Ronded corners on MetroComboBox ?

[barryBithead]

Is there a way to get rounded corners on a MetroComboBox ?

Barry

[punker76]

@barryBithead Not in a simple way yet, you must create your own style for a workaround until it's implemented...

[barryBithead]

HERE'S ONE TAKE ON IT:

       <!-- COMBOBOX STYLING -->          
        <ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="16" />
                </Grid.ColumnDefinitions>
                <Border
      BorderBrush="DarkGray"
      CornerRadius="2,2,2,2"
      BorderThickness="1,1,1,1"
      Name="Border"
      Background="LightGray"
      Grid.ColumnSpan="2" />
                <Border
      Margin="1,1,1,1"
      BorderBrush="{StaticResource NormalBorderBrush}"
      CornerRadius="3,0,0,3"
      BorderThickness="0,0,1,0"
      Background="White"
      Grid.Column="0" />
                <Path
      Margin="0,0,3,0"
      Data="M0,0L4,4 8,0z"
      HorizontalAlignment="Center"
      Fill="{Binding BGColourPref}"
      Name="Arrow"
      VerticalAlignment="Center"
      Width="8"
      Grid.Column="1" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="UIElement.IsMouseOver" Value="True">
                    <Setter Property="Panel.Background" TargetName="Border" Value="DarkGray"/>
                </Trigger>
                <Trigger Property="ToggleButton.IsChecked" Value="True">
                    <Setter Property="Panel.Background" TargetName="Border" Value="DarkGray"/>
                    <Setter Property="Shape.Fill" TargetName="Arrow" Value="{Binding BGColourPref}"/>
                </Trigger>
                <Trigger Property="UIElement.IsEnabled" Value="False">
                    <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource DisabledBackgroundBrush}"/>
                    <Setter Property="Border.BorderBrush" TargetName="Border" Value="{StaticResource DisabledBorderBrush}"/>
                    <Setter Property="TextElement.Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                    <Setter Property="Shape.Fill" TargetName="Arrow" Value="{Binding BGColourPref}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <ControlTemplate TargetType="TextBox" x:Key="ComboBoxTextBoxTemplate">
            <Border Name="PART_ContentHost" Background="{Binding BGColourPref}" Focusable="False" />
        </ControlTemplate>

        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
            <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="TextElement.Foreground"  Value="Black"/>
            <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Border Name="Border" SnapsToDevicePixels="True" Padding="3,2,2,2">
                            <ContentPresenter ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Content="{TemplateBinding ContentControl.Content}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ComboBoxItem.IsHighlighted" Value="True">
                                <Setter Property="Panel.Background" TargetName="Border" Value="{DynamicResource DefaultBrush}"/>
                                <Setter Property="TextElement.Foreground" Value="White"></Setter>
                            </Trigger>
                            <Trigger Property="ComboBoxItem.IsSelected" Value="True">
                                <Setter Property="Background" Value="Red" />
                            </Trigger>
                            <Trigger Property="UIElement.IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="CustomComboBoxStyle" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
            <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
            <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
            <Setter Property="TextElement.Foreground" Value="Black"/>
            <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <ToggleButton
            ClickMode="Press"
            Name="ToggleButton"
            IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
            Focusable="False"
            Grid.Column="2"
            Template="{StaticResource ComboBoxToggleButtonTemplate}"/>       
                            <ContentPresenter
            Margin="3,3,23,3"
            HorizontalAlignment="Left"
            Name="ContentSite"
            VerticalAlignment="Center"
            ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
            Content="{TemplateBinding ComboBox.SelectionBoxItem}"
            IsHitTestVisible="False" />
                            <TextBox
            Margin="3,3,23,3"
            Visibility="Hidden"
            HorizontalAlignment="Left"
            Name="PART_EditableTextBox"
            Background="Transparent"
            VerticalAlignment="Center" 
            Style="{x:Null}"
            IsReadOnly="False"
            Focusable="True"
            xml:space="preserve"
            Template="{StaticResource ComboBoxTextBoxTemplate}"/>
        <Popup
            Placement="Bottom"
            Name="Popup"
            Focusable="False"
            AllowsTransparency="True"
            IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
            PopupAnimation="Fade">
          <Grid
              MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
              MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
              Name="DropDown"
              SnapsToDevicePixels="True">
            <Border
                BorderBrush="{StaticResource NormalBorderBrush}"
                BorderThickness="1,1,1,1"
                Name="DropDownBorder"
                Background="{StaticResource WindowBackgroundBrush}"/>
            <ScrollViewer
                Margin="4,6,4,6"
                SnapsToDevicePixels="True">
              <ItemsPresenter
                  KeyboardNavigation.DirectionalNavigation="Contained" />
            </ScrollViewer>
          </Grid>
        </Popup>
      </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ItemsControl.HasItems" Value="False">
                                <Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
                            </Trigger>
                            <Trigger Property="UIElement.IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                            </Trigger>
                            <Trigger Property="ItemsControl.IsGrouping" Value="True">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                            </Trigger>
                            <Trigger Property="Window.AllowsTransparency" SourceName="Popup" Value="True">
                                <Setter Property="Border.CornerRadius" TargetName="DropDownBorder" Value="4"/>
                                <Setter Property="FrameworkElement.Margin" TargetName="DropDownBorder" Value="0,2,0,0"/>
                            </Trigger>
                            <Trigger Property="ComboBox.IsEditable" Value="True">
                                <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
                                <Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                                <Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

[barryBithead]

HOW TO COLOR THE SELECTED ITEMS THE WAY YOU WANT (inline style override):

            <ComboBox Style="{StaticResource CustomComboBoxStyle}" HorizontalAlignment="Left" Width="125" Height="25" SelectedItem="{Binding SelectedBrowser, Mode=TwoWay}" ItemsSource="{Binding InstalledBrowsers}" Margin="-164,304,0,0" x:Name="UrlBrowserPrefDropDown" VerticalAlignment="Top" IsEnabled="False">
                <ComboBox.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="{Binding BGColourPref}"/>
                    <SolidColorBrush x:Key="{x:Static SystemColors.WindowBrushKey}" Color="Red" />
                </ComboBox.Resources>
                <ComboBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ComboBoxItem}">
                        <Setter Property="Padding" Value="3"/>
                        <Setter Property="Margin" Value="2,0,0,0"/>
                        <Setter Property="Background" Value="#FFEEEEEE"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" Value="{Binding BGColourPref}" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ComboBox.ItemContainerStyle>
                </ComboBox>

[punker76]