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 -->

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.