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 -->
@yhnbgfd
Copy link

yhnbgfd commented Aug 26, 2014

Very nice!

@treeform
Copy link

treeform commented Nov 6, 2014

This is pretty good thanks! Is there a way to change the highlight color inside the drop down? Does the ItemsPresenter needs its own template?

@kevdougful
Copy link

kevdougful commented Feb 11, 2015

This is sweet thank you!

@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

@mfaheemakhtar9
Copy link

mfaheemakhtar9 commented Aug 2, 2022

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.

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