title: How can I style a WPF combobox to make it look more like it did in previous versions
body: <p>My goal is to style a combobox in WPF so that it looks like a combobox from older versions. What I mean by this is the old combobox has distinct white textbox and a grey toggle button on the right end. See Images below for 
  <a href="https://i.stack.imgur.com/NBxIO.png" rel="nofollow noreferrer">New and old comboboxes</a></p>
  
  <p>I was hoping there would be some properties of the combobox such as "togglebutton background" that I could simply go change, but this does not seem to be the case. I am wondering if the code below is even the right place to start with.</p>
  
  <pre><code>&lt;ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/&gt;
  &lt;ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/&gt;
  </code></pre>
  
  <p>From what I have gathered in searching through posts on this website, my starting point will be editing the control template for a default combobox. This provides about 300 lines of code defining the styling of the control and in my opinion not very easy to follow.</p>
  
  <p>This post <a href="https://stackoverflow.com/questions/22695145/wpf-change-background-color-of-a-combobox">WPF Change Background color of a Combobox</a> has some code that styles a combobox similar to what I want, but I am hoping someone can explain the process more rather than just post code as I will be doing many minor tweaks to various controls.</p>
  
  <h2>Can anyone advise me if I am on the right track and where to go from here? Also, once I have something working, what would be the best way to reuse this new template style so that it can be used in other applications? Thanks for the help!</h2>
  
  <p>@zack raiyan I essentially tried pasting the two templates in that code over the togglebutton and controlbox templates already in the code. This is giving me an error for invalid markup. Do you see what I did wrong? Code below</p>
  
  <pre><code>    &lt;Window
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:local="clr-namespace:WpfApplication15"
          xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2" x:Class="WpfApplication15.MainWindow"
          mc:Ignorable="d"
          Title="MainWindow" Height="350" Width="525"&gt;
      &lt;Window.Resources&gt;
          &lt;Style x:Key="FocusVisual"&gt;
              &lt;Setter Property="Control.Template"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate&gt;
                          &lt;Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style&gt;
          &lt;LinearGradientBrush x:Key="ComboBox.Static.Background" EndPoint="0,1" StartPoint="0,0"&gt;
              &lt;GradientStop Color="#FFF0F0F0" Offset="0.0"/&gt;
              &lt;GradientStop Color="#FFE5E5E5" Offset="1.0"/&gt;
          &lt;/LinearGradientBrush&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Static.Border" Color="#FFACACAC"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Static.Editable.Background" Color="#FFFFFFFF"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Static.Editable.Border" Color="#FFABADB3"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Static.Editable.Button.Background" Color="Transparent"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Static.Editable.Button.Border" Color="Transparent"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.MouseOver.Glyph" Color="#FF000000"/&gt;
          &lt;LinearGradientBrush x:Key="ComboBox.MouseOver.Background" EndPoint="0,1" StartPoint="0,0"&gt;
              &lt;GradientStop Color="#FFECF4FC" Offset="0.0"/&gt;
              &lt;GradientStop Color="#FFDCECFC" Offset="1.0"/&gt;
          &lt;/LinearGradientBrush&gt;
          &lt;SolidColorBrush x:Key="ComboBox.MouseOver.Border" Color="#FF7EB4EA"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.MouseOver.Editable.Background" Color="#FFFFFFFF"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.MouseOver.Editable.Border" Color="#FF7EB4EA"/&gt;
          &lt;LinearGradientBrush x:Key="ComboBox.MouseOver.Editable.Button.Background" EndPoint="0,1" StartPoint="0,0"&gt;
              &lt;GradientStop Color="#FFEBF4FC" Offset="0.0"/&gt;
              &lt;GradientStop Color="#FFDCECFC" Offset="1.0"/&gt;
          &lt;/LinearGradientBrush&gt;
          &lt;SolidColorBrush x:Key="ComboBox.MouseOver.Editable.Button.Border" Color="#FF7EB4EA"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Pressed.Glyph" Color="#FF000000"/&gt;
          &lt;LinearGradientBrush x:Key="ComboBox.Pressed.Background" EndPoint="0,1" StartPoint="0,0"&gt;
              &lt;GradientStop Color="#FFDAECFC" Offset="0.0"/&gt;
              &lt;GradientStop Color="#FFC4E0FC" Offset="1.0"/&gt;
          &lt;/LinearGradientBrush&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Pressed.Border" Color="#FF569DE5"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Pressed.Editable.Background" Color="#FFFFFFFF"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Pressed.Editable.Border" Color="#FF569DE5"/&gt;
          &lt;LinearGradientBrush x:Key="ComboBox.Pressed.Editable.Button.Background" EndPoint="0,1" StartPoint="0,0"&gt;
              &lt;GradientStop Color="#FFDAEBFC" Offset="0.0"/&gt;
              &lt;GradientStop Color="#FFC4E0FC" Offset="1.0"/&gt;
          &lt;/LinearGradientBrush&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Pressed.Editable.Button.Border" Color="#FF569DE5"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Disabled.Glyph" Color="#FFBFBFBF"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Disabled.Background" Color="#FFF0F0F0"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Disabled.Border" Color="#FFD9D9D9"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Disabled.Editable.Background" Color="#FFFFFFFF"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Disabled.Editable.Border" Color="#FFBFBFBF"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Disabled.Editable.Button.Background" Color="Transparent"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Disabled.Editable.Button.Border" Color="Transparent"/&gt;
          &lt;SolidColorBrush x:Key="ComboBox.Static.Glyph" Color="#FF606060"/&gt;
          &lt;SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="#e3e9ef" /&gt;
          &lt;SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#fff" /&gt;
          &lt;SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" /&gt;
          &lt;SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" /&gt;
          &lt;SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" /&gt;
          &lt;Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"&gt;
              &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
              &lt;Setter Property="IsTabStop" Value="false"/&gt;
              &lt;Setter Property="Focusable" Value="false"/&gt;
              &lt;Setter Property="ClickMode" Value="Press"/&gt;
              &lt;Setter Property="Template"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate"&gt;
                          &lt;Grid&gt;
                              &lt;Grid.ColumnDefinitions&gt;
                                  &lt;ColumnDefinition /&gt;
                                  &lt;ColumnDefinition Width="20" /&gt;
                              &lt;/Grid.ColumnDefinitions&gt;
                              &lt;Border Grid.ColumnSpan="2" Name="Border"
            BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" 
            CornerRadius="0" BorderThickness="1, 1, 1, 1" 
            Background="{StaticResource ComboBoxNormalBackgroundBrush}" /&gt;
                              &lt;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}" /&gt;
  
                              &lt;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" /&gt;
                          &lt;/Grid&gt;
                          &lt;ControlTemplate.Triggers&gt;
                              &lt;Trigger Property="UIElement.IsMouseOver" Value="True"&gt;
                                  &lt;Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/&gt;
                              &lt;/Trigger&gt;
                              &lt;Trigger Property="ToggleButton.IsChecked" Value="True"&gt;
                                  &lt;Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/&gt;
                                  &lt;Setter Property="Shape.Fill" TargetName="Arrow" Value="#FF8D979E"/&gt;
                              &lt;/Trigger&gt;
                              &lt;Trigger Property="UIElement.IsEnabled" Value="False"&gt;
                                  &lt;Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/&gt;
                                  &lt;Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/&gt;
                                  &lt;Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/&gt;
                                  &lt;Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/&gt;
                                  &lt;Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/&gt;
                              &lt;/Trigger&gt;
                          &lt;/ControlTemplate.Triggers&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style&gt;
          &lt;ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}"&gt;
              &lt;Grid x:Name="templateRoot" SnapsToDevicePixels="true"&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="*"/&gt;
                      &lt;ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom"&gt;
                      &lt;Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}"&gt;
                          &lt;Border x:Name="dropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"&gt;
                              &lt;ScrollViewer x:Name="DropDownScrollViewer"&gt;
                                  &lt;Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled"&gt;
                                      &lt;Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"&gt;
                                          &lt;Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}" Height="{Binding ActualHeight, ElementName=dropDownBorder}" Width="{Binding ActualWidth, ElementName=dropDownBorder}"/&gt;
                                      &lt;/Canvas&gt;
                                      &lt;ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/&gt;
                                  &lt;/Grid&gt;
                              &lt;/ScrollViewer&gt;
                          &lt;/Border&gt;
                      &lt;/Themes:SystemDropShadowChrome&gt;
                  &lt;/Popup&gt;
                  &lt;ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/&gt;
                  &lt;ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/&gt;
              &lt;/Grid&gt;
              &lt;ControlTemplate.Triggers&gt;
                  &lt;Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true"&gt;
                      &lt;Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/&gt;
                      &lt;Setter Property="Color" TargetName="shadow" Value="#71000000"/&gt;
                  &lt;/Trigger&gt;
                  &lt;Trigger Property="HasItems" Value="false"&gt;
                      &lt;Setter Property="Height" TargetName="dropDownBorder" Value="95"/&gt;
                  &lt;/Trigger&gt;
                  &lt;MultiTrigger&gt;
                      &lt;MultiTrigger.Conditions&gt;
                          &lt;Condition Property="IsGrouping" Value="true"/&gt;
                          &lt;Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/&gt;
                      &lt;/MultiTrigger.Conditions&gt;
                      &lt;Setter Property="ScrollViewer.CanContentScroll" Value="false"/&gt;
                  &lt;/MultiTrigger&gt;
                  &lt;Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false"&gt;
                      &lt;Setter Property="Canvas.Top" TargetName="opaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/&gt;
                      &lt;Setter Property="Canvas.Left" TargetName="opaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/&gt;
                  &lt;/Trigger&gt;
              &lt;/ControlTemplate.Triggers&gt;
          &lt;/ControlTemplate&gt;
          &lt;SolidColorBrush x:Key="TextBox.Static.Background" Color="#FFFFFFFF"/&gt;
          &lt;Style x:Key="ComboBoxEditableTextBox" TargetType="{x:Type TextBox}"&gt;
              &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
              &lt;Setter Property="AllowDrop" Value="true"/&gt;
              &lt;Setter Property="MinWidth" Value="0"/&gt;
              &lt;Setter Property="MinHeight" Value="0"/&gt;
              &lt;Setter Property="FocusVisualStyle" Value="{x:Null}"/&gt;
              &lt;Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/&gt;
              &lt;Setter Property="Stylus.IsFlicksEnabled" Value="False"/&gt;
              &lt;Setter Property="Template"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate TargetType="{x:Type TextBox}"&gt;
                          &lt;ScrollViewer x:Name="PART_ContentHost" Background="Transparent" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style&gt;
          &lt;ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}"&gt;
              &lt;Grid x:Name="templateRoot" SnapsToDevicePixels="true"&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="*"/&gt;
                      &lt;ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom"&gt;
                      &lt;Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}"&gt;
                          &lt;Border x:Name="dropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"&gt;
                              &lt;ScrollViewer x:Name="DropDownScrollViewer"&gt;
                                  &lt;Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled"&gt;
                                      &lt;Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"&gt;
                                          &lt;Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}" Height="{Binding ActualHeight, ElementName=dropDownBorder}" Width="{Binding ActualWidth, ElementName=dropDownBorder}"/&gt;
                                      &lt;/Canvas&gt;
                                      &lt;ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/&gt;
                                  &lt;/Grid&gt;
                              &lt;/ScrollViewer&gt;
                          &lt;/Border&gt;
                      &lt;/Themes:SystemDropShadowChrome&gt;
                  &lt;/Popup&gt;
                  &lt;ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/&gt;
                  &lt;Border x:Name="border" Background="{StaticResource TextBox.Static.Background}" Margin="{TemplateBinding BorderThickness}"&gt;
                      &lt;TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="{TemplateBinding Padding}" Style="{StaticResource ComboBoxEditableTextBox}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/&gt;
                  &lt;/Border&gt;
              &lt;/Grid&gt;
              &lt;ControlTemplate.Triggers&gt;
                  &lt;Trigger Property="IsEnabled" Value="false"&gt;
                      &lt;Setter Property="Opacity" TargetName="border" Value="0.56"/&gt;
                  &lt;/Trigger&gt;
                  &lt;Trigger Property="IsKeyboardFocusWithin" Value="true"&gt;
                      &lt;Setter Property="Foreground" Value="Black"/&gt;
                  &lt;/Trigger&gt;
                  &lt;Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true"&gt;
                      &lt;Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/&gt;
                      &lt;Setter Property="Color" TargetName="shadow" Value="#71000000"/&gt;
                  &lt;/Trigger&gt;
                  &lt;Trigger Property="HasItems" Value="false"&gt;
                      &lt;Setter Property="Height" TargetName="dropDownBorder" Value="95"/&gt;
                  &lt;/Trigger&gt;
                  &lt;MultiTrigger&gt;
                      &lt;MultiTrigger.Conditions&gt;
                          &lt;Condition Property="IsGrouping" Value="true"/&gt;
                          &lt;Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/&gt;
                      &lt;/MultiTrigger.Conditions&gt;
                      &lt;Setter Property="ScrollViewer.CanContentScroll" Value="false"/&gt;
                  &lt;/MultiTrigger&gt;
                  &lt;Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false"&gt;
                      &lt;Setter Property="Canvas.Top" TargetName="opaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/&gt;
                      &lt;Setter Property="Canvas.Left" TargetName="opaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/&gt;
                  &lt;/Trigger&gt;
              &lt;/ControlTemplate.Triggers&gt;
          &lt;/ControlTemplate&gt;
          &lt;Style x:Key="ComboBoxFlatStyle"  TargetType="{x:Type ComboBox}"&gt;
              &lt;Setter Property="UIElement.SnapsToDevicePixels" Value="True"/&gt;
              &lt;Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/&gt;
              &lt;Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/&gt;
              &lt;Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/&gt;
              &lt;Setter Property="ScrollViewer.CanContentScroll" Value="True"/&gt;
              &lt;Setter Property="TextElement.Foreground" Value="Black"/&gt;
              &lt;Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/&gt;
              &lt;Setter Property="Control.Template"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate TargetType="ComboBox"&gt;
                          &lt;Grid&gt;
                              &lt;ToggleButton Name="ToggleButton" Grid.Column="2"
              ClickMode="Press" Focusable="False"
              IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
              Template="{StaticResource ComboBoxToggleButtonTemplate}"/&gt;
  
                              &lt;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}"/&gt;
                              &lt;TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3"                     
                   IsReadOnly="{TemplateBinding IsReadOnly}"
                   Visibility="Hidden" Background="Transparent"
                   HorizontalAlignment="Left" VerticalAlignment="Center"
                   Focusable="True" &gt;
                                  &lt;TextBox.Template&gt;
                                      &lt;ControlTemplate TargetType="TextBox" &gt;
                                          &lt;Border Name="PART_ContentHost" Focusable="False" /&gt;
                                      &lt;/ControlTemplate&gt;
                                  &lt;/TextBox.Template&gt;
                              &lt;/TextBox&gt;
                              &lt;!-- Popup showing items --&gt;
                              &lt;Popup Name="Popup" Placement="Bottom"
                 Focusable="False" AllowsTransparency="True"
                 IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                 PopupAnimation="Slide"&gt;
                                  &lt;Grid Name="DropDown" SnapsToDevicePixels="True"
                  MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                  MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"&gt;
                                      &lt;Border Name="DropDownBorder" Background="White" Margin="0, 1, 0, 0"
                      CornerRadius="0" BorderThickness="1,1,1,1" 
                      BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"/&gt;
                                      &lt;ScrollViewer Margin="4" SnapsToDevicePixels="True"&gt;
                                          &lt;ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" /&gt;
                                      &lt;/ScrollViewer&gt;
                                  &lt;/Grid&gt;
                              &lt;/Popup&gt;
                          &lt;/Grid&gt;
                          &lt;ControlTemplate.Triggers&gt;
                              &lt;Trigger Property="ItemsControl.HasItems" Value="False"&gt;
                                  &lt;Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/&gt;
                              &lt;/Trigger&gt;
                              &lt;Trigger Property="UIElement.IsEnabled" Value="False"&gt;
                                  &lt;Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/&gt;
                              &lt;/Trigger&gt;
                              &lt;Trigger Property="ItemsControl.IsGrouping" Value="True"&gt;
                                  &lt;Setter Property="ScrollViewer.CanContentScroll" Value="False"/&gt;
                              &lt;/Trigger&gt;
                              &lt;Trigger Property="ComboBox.IsEditable" Value="True"&gt;
                                  &lt;Setter Property="KeyboardNavigation.IsTabStop" Value="False"/&gt;
                                  &lt;Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/&gt;
                                  &lt;Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/&gt;
                              &lt;/Trigger&gt;
                          &lt;/ControlTemplate.Triggers&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style&gt;
      &lt;/Window.Resources&gt;
      &lt;Grid&gt;
          &lt;ComboBox x:Name="comboBox" HorizontalAlignment="Left" Margin="196,65,0,0" VerticalAlignment="Top" Width="120" Style="{DynamicResource ComboBoxStyleFlatWhite}"/&gt;
  
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>