WPF Flat Combo Box Style

gistfile1.xml

<!-- Flat ComboBox -->
  <SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="#e3e9ef" />
  <SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#fff" />
  <SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" />
  <SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" />
  <SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" />

  <ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="20" />
      </Grid.ColumnDefinitions>
      <Border Grid.ColumnSpan="2" Name="Border"
              BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" 
              CornerRadius="0" BorderThickness="1, 1, 1, 1" 
              Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
      <Border Grid.Column="1" Margin="1, 1, 1, 1" BorderBrush="#444" Name="ButtonBorder"
              CornerRadius="0, 0, 0, 0" BorderThickness="0, 0, 0, 0" 
              Background="{StaticResource ComboBoxNormalBackgroundBrush}" />

      <Path Name="Arrow" Grid.Column="1" 
            Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
            HorizontalAlignment="Center" Fill="#444"
            VerticalAlignment="Center" />
    </Grid>
    <ControlTemplate.Triggers>
      <Trigger Property="UIElement.IsMouseOver" Value="True">
        <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
      </Trigger>
      <Trigger Property="ToggleButton.IsChecked" Value="True">
        <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
        <Setter Property="Shape.Fill" TargetName="Arrow" Value="#FF8D979E"/>
      </Trigger>
      <Trigger Property="UIElement.IsEnabled" Value="False">
        <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
        <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
        <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
        <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
        <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
      </Trigger>
    </ControlTemplate.Triggers>
  </ControlTemplate>

  <Style x:Key="ComboBoxFlatStyle"  TargetType="{x:Type ComboBox}">
    <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 Name="ToggleButton" Grid.Column="2"
                ClickMode="Press" Focusable="False"
                IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                Template="{StaticResource ComboBoxToggleButtonTemplate}"/>

            <ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False"
                              HorizontalAlignment="Left" VerticalAlignment="Center"                              
                              Content="{TemplateBinding ComboBox.SelectionBoxItem}" 
                              ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
            <TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3"                     
                     IsReadOnly="{TemplateBinding IsReadOnly}"
                     Visibility="Hidden" Background="Transparent"
                     HorizontalAlignment="Left" VerticalAlignment="Center"
                     Focusable="True" >
              <TextBox.Template>
                <ControlTemplate TargetType="TextBox" >
                  <Border Name="PART_ContentHost" Focusable="False" />
                </ControlTemplate>
              </TextBox.Template>
            </TextBox>
            <!-- Popup showing items -->
            <Popup Name="Popup" Placement="Bottom"
                   Focusable="False" AllowsTransparency="True"
                   IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                   PopupAnimation="Slide">
              <Grid Name="DropDown" SnapsToDevicePixels="True"
                    MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                    MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
                <Border Name="DropDownBorder" Background="White" Margin="0, 1, 0, 0"
                        CornerRadius="0" BorderThickness="1,1,1,1" 
                        BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"/>
                <ScrollViewer Margin="4" 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 ComboBoxDisabledForegroundBrush}"/>
            </Trigger>
            <Trigger Property="ItemsControl.IsGrouping" Value="True">
              <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
            </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>
  <!-- End of Flat ComboBox -->

as is

Nice sollution. Thanks. For changing background in dropdownlist, adds:

<Style TargetType="ComboBoxItem">
        <Setter Property="Foreground" Value="Yellow"/>
        <Setter Property="Background" Value="Yellow"/>
</Style>

Just what I needed. Thank you very much!

Thank you! It is what I need now.

Very nice and thanks. May I ask, is it possible to change the background and foreground colors of the item selected?

thanks

Thank you, very nice!

Trying to figure out why "ToggleButton Name="ToggleButton"" says Grid.Column=2, but no other control in the parent grid has it's column defined. I would assume that defaults to 0, but when I attempt to define the columns and assign them to column 0, it craps out on me.
I would like a button on the left side of the combobox control, any suggestions?

its very good
tank`s

This is Awesome. plug n play
Thank you..!

Awesome! Thanks for posting this, made my life sooo much easier.

Nice,, thank you,,

Nice one! Thanks 👍

This is great. How would one do a IsFocused blur to the border? That is, to blur the border when the ComboBox has focus.

This is great. How would one do I change the font color?

How to make ComboBoxItems text align to left or right instead of center?

Thanks for ready to work solution.

Thank you, very nice!

Very nice code... I made it look like apple style...

        <ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <Border Grid.ColumnSpan="2" Name="Border"
          BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" 
          CornerRadius="4" BorderThickness="0" 
          Background="{StaticResource ComboBoxNormalBackgroundBrush}" >
                    <Border.Effect>
                        <DropShadowEffect ShadowDepth="0" BlurRadius="2"/>
                    </Border.Effect>
                </Border>
                <Border Grid.Column="1" Margin="0" BorderBrush="{StaticResource bg_btn}" Name="ButtonBorder"
          CornerRadius="4" BorderThickness="0, 0, 0, 0" 
          Background="{StaticResource ComboBoxNormalBackgroundBrush}" >
                    <Border.Effect>
                        <DropShadowEffect ShadowDepth="0" BlurRadius="1"/>
                    </Border.Effect>
                </Border>

                <Path Name="Arrow" Grid.Column="1" 
        Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
        HorizontalAlignment="Center" Fill="Gray"
        VerticalAlignment="Center" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="UIElement.IsMouseOver" Value="True">
                    <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
                </Trigger>
                <Trigger Property="ToggleButton.IsChecked" Value="True">
                    <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
                    <Setter Property="Shape.Fill" TargetName="Arrow" Value="#FF8D979E"/>
                </Trigger>
                <Trigger Property="UIElement.IsEnabled" Value="False">
                    <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
                    <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
                    <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
                    <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
                    <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="IsEditable" Value="False"/>
            <Setter Property="IsTextSearchEnabled" Value="True"/>
            <Setter Property="IsTextSearchCaseSensitive" Value="False"/>
            <Setter Property="MinWidth" Value="100"/>
            <Setter Property="Margin" Value="3"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            
            <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="IsDropDownOpen" Value="False"/>

            <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <ToggleButton Name="ToggleButton" Grid.Column="2"
            ClickMode="Press" Focusable="False"
            IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
            Template="{StaticResource ComboBoxToggleButtonTemplate}"/>

                            <ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False"
                          HorizontalAlignment="Left" VerticalAlignment="Center"                              
                          Content="{TemplateBinding ComboBox.SelectionBoxItem}" 
                          ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
                            <TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3"                     
                 IsReadOnly="{TemplateBinding IsReadOnly}"
                 Visibility="Hidden" Background="Transparent"
                 HorizontalAlignment="Left" VerticalAlignment="Center"
                 Focusable="True" >
                                <TextBox.Template>
                                    <ControlTemplate TargetType="TextBox" >
                                        <Border Name="PART_ContentHost" CornerRadius="4" Focusable="False" />
                                    </ControlTemplate>
                                </TextBox.Template>
                            </TextBox>
                            <!-- Popup showing items -->
                            <Popup Name="Popup" Placement="Bottom"
               Focusable="False" AllowsTransparency="True"
               IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
               PopupAnimation="Slide">
                                <Grid Name="DropDown" SnapsToDevicePixels="True"
                MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}" Background="WhiteSmoke">
                                    <Border Name="DropDownBorder" Background="WhiteSmoke" Margin="0, 1, 0, 0"
                    CornerRadius="4" BorderThickness="0" 
                    BorderBrush="{StaticResource ComboBoxNormalBorderBrush}">
                                        <Border.Effect>
                                            <DropShadowEffect ShadowDepth="0" BlurRadius="2"/>
                                        </Border.Effect>
                                    </Border>
                                    <ScrollViewer Margin="4" 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 ComboBoxDisabledForegroundBrush}"/>
                            </Trigger>
                            <Trigger Property="ItemsControl.IsGrouping" Value="True">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                            </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>

This example helped me out a lot. Thank you very much!
I was having headaches & nightmares of styling the ComboBox, but this example really got me on the right path.
After adding the required tweeks of my customer I finally got it styled as the customer wanted it to be styled!

Very nice, thank you. It is sad how WPF is not very good for combo styling. You saved me a lot of work.

So nice, thanks!

How do I implement it in my project? I tried to create a resource dictionary with these lines of code but it doesn't work... Here an example of what I tried to do:

<ComboBox Width="250" Height="40" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Center" Grid.Column="1" Style="{StaticResource ComboBoxFlatStyle}"/>

How do I implement it in my project? I tried to create a resource dictionary with these lines of code but it doesn't work... Here an example of what I tried to do:

<ComboBox Width="250" Height="40" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Center" Grid.Column="1" Style="{StaticResource ComboBoxFlatStyle}"/>

Use DynamicResource instead of StaticResource

It's very nice design... Exactly I need.
One thing that I want to know is
How to give padding to ComboBox in this design.

Arigato

Thanks.

Big thanks.

Thank you very much

👍

Thank you.