Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WPF Flat Combo Box Style
<!-- 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 -->
@alienator88
Copy link

alienator88 commented Feb 12, 2015

For anyone else wanting to edit the highlight color inside the drop down, just override the default for a quick fix. Add this line at the top with all the brushes:

<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/>

@ess-yonim
Copy link

ess-yonim commented May 31, 2015

as is

@draobrehtom
Copy link

draobrehtom commented Aug 24, 2015

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

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

@jweaver66
Copy link

jweaver66 commented Oct 23, 2015

Just what I needed. Thank you very much!

@CuongDuongDuy
Copy link

CuongDuongDuy commented Oct 29, 2015

Thank you! It is what I need now.

@dommy1C
Copy link

dommy1C commented Mar 26, 2016

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

thanks

@georgianamanolache
Copy link

georgianamanolache commented May 13, 2016

Thank you, very nice!

@stevengcollins
Copy link

stevengcollins commented Jun 28, 2016

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?

@Ali-razavi128
Copy link

Ali-razavi128 commented Aug 2, 2016

its very good
tank`s

@JD-V
Copy link

JD-V commented Jan 8, 2017

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

@johnmurphy01
Copy link

johnmurphy01 commented Jun 13, 2017

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

@NvVijayakumara
Copy link

NvVijayakumara commented Sep 14, 2017

Nice,, thank you,,

@BartAMG
Copy link

BartAMG commented Nov 14, 2017

Nice one! Thanks 👍

@MarkLallemont
Copy link

MarkLallemont commented Dec 18, 2017

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

@mcka-dev
Copy link

mcka-dev commented Feb 28, 2018

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

@mrNo0b
Copy link

mrNo0b commented Mar 22, 2018

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

@CarlTheUser
Copy link

CarlTheUser commented Sep 27, 2018

Thanks for ready to work solution.

@HudsonDumont
Copy link

HudsonDumont commented Apr 4, 2019

Thank you, very nice!

@PrashantProgramer
Copy link

PrashantProgramer commented May 2, 2019

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>

@gogessj4
Copy link

gogessj4 commented Apr 24, 2020

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!

@somapatrik
Copy link

somapatrik commented Jan 17, 2021

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

@SoundIKS
Copy link

SoundIKS commented Jun 2, 2021

So nice, thanks!

@alexandersiemert
Copy link

alexandersiemert commented Sep 7, 2021

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}"/>

@bebedgreat
Copy link

bebedgreat commented Sep 21, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment