title: Modify WPF Toolkit DropDownButton style
body: <p>I am trying to modify WpfToolkit's DropDownButton style in order to allow me to set the Background color.</p>
  
  <p>Here is the default style of the DropDownButton:</p>
  
  <pre><code>&lt;ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:chrome="clr-namespace:Xceed.Wpf.Toolkit.Chromes"
                      xmlns:conv="clr-namespace:Xceed.Wpf.Toolkit.Core.Converters"
                      xmlns:local="clr-namespace:Xceed.Wpf.Toolkit"&gt;
  
     &lt;conv:InverseBoolConverter x:Key="InverseBoolConverter" /&gt;
  
     &lt;LinearGradientBrush x:Key="PopupDarkBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0"&gt;
        &lt;GradientStop Color="#FFA3AEB9" Offset="0" /&gt;
        &lt;GradientStop Color="#FF8399A9" Offset="0.375" /&gt;
        &lt;GradientStop Color="#FF718597" Offset="0.375" /&gt;
        &lt;GradientStop Color="#FF617584" Offset="1" /&gt;
     &lt;/LinearGradientBrush&gt;
  
     &lt;LinearGradientBrush x:Key="PopupBackgroundBrush" StartPoint="0,0" EndPoint="0,1"&gt;
        &lt;LinearGradientBrush.GradientStops&gt;
           &lt;GradientStopCollection&gt;
              &lt;GradientStop Offset="0" Color="#FFffffff" /&gt;
              &lt;GradientStop Offset="1" Color="#FFE8EBED" /&gt;
           &lt;/GradientStopCollection&gt;
        &lt;/LinearGradientBrush.GradientStops&gt;
     &lt;/LinearGradientBrush&gt;
  
     &lt;Style TargetType="{x:Type local:DropDownButton}"&gt;
        &lt;Setter Property="BorderThickness" Value="1" /&gt;
        &lt;Setter Property="IsTabStop" Value="False" /&gt;
        &lt;Setter Property="HorizontalContentAlignment" Value="Center" /&gt;
        &lt;Setter Property="VerticalContentAlignment" Value="Center" /&gt;
        &lt;Setter Property="Padding" Value="3" /&gt;
        &lt;Setter Property="Template"&gt;
           &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type local:DropDownButton}"&gt;
                 &lt;Grid x:Name="MainGrid" SnapsToDevicePixels="True"&gt;
                    &lt;ToggleButton x:Name="PART_DropDownButton"
                                  Grid.Column="1"
                                  IsChecked="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                  IsHitTestVisible="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolConverter}}"&gt;
                       &lt;ToggleButton.Template&gt;
                          &lt;ControlTemplate TargetType="ToggleButton"&gt;
                             &lt;ContentPresenter /&gt;
                          &lt;/ControlTemplate&gt;
                       &lt;/ToggleButton.Template&gt;
                       &lt;Grid&gt;
                          &lt;chrome:ButtonChrome x:Name="ToggleButtonChrome"
                                               CornerRadius="2.75"
                                               RenderChecked="{TemplateBinding IsOpen}"
                                               RenderEnabled="{TemplateBinding IsEnabled}"
                                                          RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}"
                                                          RenderPressed="{Binding IsPressed, ElementName=PART_DropDownButton}"&gt;
                             &lt;Grid&gt;
                                &lt;Grid.ColumnDefinitions&gt;
                                   &lt;ColumnDefinition Width="*" /&gt;
                                   &lt;ColumnDefinition Width="Auto" /&gt;
                                &lt;/Grid.ColumnDefinitions&gt;
                                &lt;ContentPresenter Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="true" /&gt;
                                &lt;Grid x:Name="arrowGlyph" IsHitTestVisible="False" Margin="4,3,4,3" Grid.Column="1"&gt;
                                   &lt;Path x:Name="Arrow"  Width="7" Height="4" Data="M 0,1 C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 z" Fill="#FF000000" /&gt;
                                &lt;/Grid&gt;
                             &lt;/Grid&gt;
                          &lt;/chrome:ButtonChrome&gt;
                       &lt;/Grid&gt;
                    &lt;/ToggleButton&gt;
  
                    &lt;Popup x:Name="PART_Popup" 
                           HorizontalOffset="1"
                           VerticalOffset="1"
                           AllowsTransparency="True"
                           StaysOpen="False"
                           Placement="Bottom"
                           Focusable="False"
                           IsOpen="{Binding IsChecked, ElementName=PART_DropDownButton}"&gt;
                       &lt;Border BorderThickness="1" Background="{StaticResource PopupBackgroundBrush}" BorderBrush="{StaticResource PopupDarkBorderBrush}"&gt;
                          &lt;ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding DropDownContent}" /&gt;
                       &lt;/Border&gt;
                    &lt;/Popup&gt;
  
                 &lt;/Grid&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsEnabled" Value="False"&gt;
                          &lt;Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF" /&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
           &lt;/Setter.Value&gt;
        &lt;/Setter&gt;
     &lt;/Style&gt;
  &lt;/ResourceDictionary&gt;
  </code></pre>
  
  <p>I am creating the DropDownButton like so:</p>
  
  <pre><code>&lt;extToolkit:DropDownButton VerticalAlignment="Center" Background="Red"&gt;
              &lt;extToolkit:DropDownButton.Content&gt;
                  &lt;TextBlock&gt;Click me&lt;/TextBlock&gt;
              &lt;/extToolkit:DropDownButton.Content&gt;
              &lt;extToolkit:DropDownButton.DropDownContent&gt;
                  &lt;TextBlock&gt;Popup&lt;/TextBlock&gt;
              &lt;/extToolkit:DropDownButton.DropDownContent&gt;
          &lt;/extToolkit:DropDownButton&gt;
  </code></pre>
  
  <p>I set the Background to Red but that doesn't have any impact.  So I tried to set the Background of the DropDownButton's style to bind to the Background I set:</p>
  
  <pre><code>&lt;Grid Background="{TemplateBinding Background}"&gt;
                                              &lt;Grid.ColumnDefinitions&gt;
                                                  &lt;ColumnDefinition Width="*" /&gt;
                                                  &lt;ColumnDefinition Width="Auto" /&gt;
                                              &lt;/Grid.ColumnDefinitions&gt;
                                              &lt;ContentPresenter Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="true" /&gt;
                                              &lt;Grid x:Name="arrowGlyph" IsHitTestVisible="False" Margin="4,3,4,3" Grid.Column="1"&gt;
                                                  &lt;Path x:Name="Arrow"  Width="7" Height="4" Data="M 0,1 C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 z" Fill="#FF000000" /&gt;
                                              &lt;/Grid&gt;
                                          &lt;/Grid&gt;
  </code></pre>
  
  <p>But that didn't change the background color, no matter what I set in my control.  If I set the Background color directly in the style (no binding), then the color takes affect but for some reason the CornerRadius defined on ButtonChrome disappears and the button reverts to a rectangle.</p>
  
  <p>Any suggestions?  I just want to be able to set the background of the drop down button and the PART_Popup when defining the control.</p>