title: How to style a SplitButton
body: <p>Using the SplitButton from exceed's <a href="http://wpftoolkit.codeplex.com/" rel="nofollow noreferrer">extended wpf toolkit</a>, I would like to use a style I have, "blueButtonStyle".</p>
  
  <p>Trying to apply the style directly doesn't work, since the button really isn't a button! So am wondering how to approach this.</p>
  
  <p>Ideally there would be a button property on the split button that I could apply the blueButtonStyle to, but I don't see one. </p>
  
  <p>How should I approach this?</p>
  
  <p>Cheers,<br>
  Berryl</p>
  
  <h1>desired look (blueButtonStyle)</h1>
  
  <p><img src="https://i.stack.imgur.com/TsNdP.jpg" alt="enter image description here"></p>
  
  <h1>default look</h1>
  
  <p><img src="https://i.stack.imgur.com/gRkBM.jpg" alt="enter image description here"></p>
  
  <h1>current xaml definition with error (inapplicable style)</h1>
  
  <pre><code>&lt;toolkit:SplitButton DockPanel.Dock="Right" Content="{resx:Resx SplitButton_Add}" 
                       Height="25" Width="80" HorizontalAlignment="Right" Margin="15" 
                       Style="{StaticResource blueButtonStyle}"
                       &gt;
      &lt;toolkit:SplitButton.DropDownContent&gt;
          &lt;StackPanel Orientation="Vertical" &gt;
              &lt;StackPanel.Resources&gt;
                  &lt;Style TargetType="{x:Type Button}" BasedOn="{StaticResource blueButtonStyle}"&gt;
                  &lt;/Style&gt;
              &lt;/StackPanel.Resources&gt;
              &lt;Button Content="Person" Command="{Binding AddNewPersonCommand}"/&gt;
              &lt;Button Content="Company" Command="{Binding AddNewOrganizationCommand}"/&gt;
          &lt;/StackPanel&gt;
      &lt;/toolkit:SplitButton.DropDownContent&gt;
  &lt;/toolkit:SplitButton&gt;
  </code></pre>
  
  <h1>SplitButton xaml</h1>
  
  <pre><code>&lt;!-- =============================================================================== --&gt;
  &lt;!-- SplitButton                                                                     --&gt;
  &lt;!-- =============================================================================== --&gt;
  &lt;Style TargetType="{x:Type local:SplitButton}"&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="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" /&gt;
      &lt;Setter Property="Padding" Value="3" /&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type local:SplitButton}"&gt;
                  &lt;Grid x:Name="MainGrid" SnapsToDevicePixels="True"&gt;
                      &lt;chrome:ButtonChrome x:Name="ControlChrome" Background="{TemplateBinding Background}" RenderEnabled="{TemplateBinding IsEnabled}" CornerRadius="2.75"&gt;
                          &lt;Grid&gt;
                              &lt;Grid.ColumnDefinitions&gt;
                                  &lt;ColumnDefinition Width="*" /&gt;
                                  &lt;ColumnDefinition Width="Auto" /&gt;
                              &lt;/Grid.ColumnDefinitions&gt;
                              &lt;Button x:Name="PART_ActionButton" Margin="0" 
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" &gt;
                                  &lt;Button.Template&gt;
                                      &lt;ControlTemplate TargetType="Button"&gt;
                                          &lt;ContentPresenter /&gt;
                                      &lt;/ControlTemplate&gt;
                                  &lt;/Button.Template&gt;
                                  &lt;Grid&gt;
                                      &lt;chrome:ButtonChrome x:Name="ActionButtonChrome"
                                                 CornerRadius="2.75, 0, 0, 2.75"                                                         
                                                 RenderNormal="False"
                                                 RenderEnabled="{TemplateBinding IsEnabled}"
                                                            RenderMouseOver="{Binding IsMouseOver, ElementName=PART_ActionButton}"
                                                            RenderPressed="{Binding IsPressed, ElementName=PART_ActionButton}"&gt;
                                          &lt;ContentPresenter Name="ActionButtonContent" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="true" /&gt;
                                      &lt;/chrome:ButtonChrome&gt;
                                  &lt;/Grid&gt;
                              &lt;/Button&gt;
                              &lt;ToggleButton x:Name="PART_ToggleButton"
                                    Grid.Column="1"
                                    IsTabStop="False"
                                    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="0, 2.75, 2.75, 0"
                                                 RenderNormal="False"
                                                 RenderChecked="{TemplateBinding IsOpen}"
                                                 RenderEnabled="{TemplateBinding IsEnabled}"
                                                            RenderMouseOver="{Binding IsMouseOver, ElementName=PART_ToggleButton}"
                                                            RenderPressed="{Binding IsPressed, ElementName=PART_ToggleButton}"&gt;
                                          &lt;Grid x:Name="arrowGlyph" IsHitTestVisible="False" Margin="4,3,4,3"&gt;
                                              &lt;Path 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;/chrome:ButtonChrome&gt;
                                  &lt;/Grid&gt;
                              &lt;/ToggleButton&gt;
                          &lt;/Grid&gt;
                      &lt;/chrome:ButtonChrome&gt;
  
                      &lt;Popup x:Name="PART_Popup" 
                       HorizontalOffset="1"
                       VerticalOffset="1"
                       AllowsTransparency="True"
                       StaysOpen="False"
                       Placement="Bottom"
                       Focusable="False"
                       IsOpen="{Binding IsChecked, ElementName=PART_ToggleButton}"&gt;
                          &lt;!-- TODO: Create Popup Styles that can be reused on all popups in the toolkit--&gt;
                          &lt;Border BorderThickness="1" Background="{StaticResource PopupBackgroundBrush}" BorderBrush="{StaticResource ColorPickerDarkBorderBrush}"&gt;
                              &lt;ContentPresenter Content="{TemplateBinding DropDownContent}" /&gt;
                          &lt;/Border&gt;
                      &lt;/Popup&gt;
  
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <h1>BlueButtonStyle</h1>
  
  <pre><code>&lt;!--BlueButtonStyle--&gt;
  &lt;Style x:Key="BlueButtonStyle" TargetType="Button"&gt;
      &lt;Setter Property="Padding" Value="20,0" /&gt;
      &lt;Setter Property="Margin" Value="3" /&gt;
      &lt;Setter Property="Height" Value="23" /&gt;
      &lt;Setter Property="MinWidth" Value="75" /&gt;
      &lt;Setter Property="Foreground" Value="White" /&gt;
  
      &lt;Setter Property="FocusVisualStyle"&gt;
          &lt;Setter.Value&gt;
              &lt;Style&gt;
                  &lt;Setter Property="Control.Template"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ControlTemplate&gt;
                              &lt;Rectangle RadiusX="5" RadiusY="5" Stroke="Gold" StrokeThickness="1" /&gt;
                          &lt;/ControlTemplate&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Style&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                  &lt;Grid x:Name="rootGrid" RenderTransformOrigin=".5,.5"&gt;
  
                      &lt;Grid.Resources&gt;
                          &lt;SolidColorBrush x:Key="borderBrush" Color="Transparent"/&gt;
                      &lt;/Grid.Resources&gt;
  
                      &lt;Grid.RenderTransform&gt;
                          &lt;TranslateTransform X="0" Y="0"/&gt;
                      &lt;/Grid.RenderTransform&gt;
                      &lt;Grid.RowDefinitions&gt;
                          &lt;RowDefinition /&gt;
                          &lt;RowDefinition /&gt;
                      &lt;/Grid.RowDefinitions&gt;
                      &lt;Rectangle Grid.RowSpan="2" x:Name="bottomBorder" RadiusX="5" RadiusY="5" 
                                 Stroke="{StaticResource borderBrush}" StrokeThickness="2"
                                 Fill="{StaticResource headerBrush}" /&gt;
                      &lt;Rectangle x:Name="highlight" Margin="2.5" Fill="White" RadiusX="3" RadiusY="3"&gt;
                          &lt;Rectangle.OpacityMask&gt;
                              &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt;
                                  &lt;GradientStop Color="#D0FFFFFF" Offset="0"/&gt;
                                  &lt;GradientStop Color="#00FFFFFF" Offset="1"/&gt;
                              &lt;/LinearGradientBrush&gt;
                          &lt;/Rectangle.OpacityMask&gt;
                      &lt;/Rectangle&gt;
                      &lt;ContentPresenter Grid.RowSpan="2"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                          Margin="{TemplateBinding Padding}"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                          RecognizesAccessKey="True" RenderTransformOrigin="0.5,0.5" x:Name="contentPresenter" /&gt;
                  &lt;/Grid&gt;
                  &lt;ControlTemplate.Resources&gt;
                      &lt;Storyboard x:Key="buttonDown_Animation"&gt;
                          &lt;DoubleAnimation Storyboard.TargetName="rootGrid" 
                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                                           From="0" To="0" Duration="0:0:0" 
                                           /&gt;
                      &lt;/Storyboard&gt;
                  &lt;/ControlTemplate.Resources&gt;
  
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsFocused" Value="True"&gt;
                          &lt;Setter TargetName="bottomBorder" Property="Stroke" Value="Black" /&gt;
                      &lt;/Trigger&gt;
  
                      &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                          &lt;Setter TargetName="bottomBorder" Property="Stroke" Value="Black" /&gt;
                      &lt;/Trigger&gt;
  
                      &lt;Trigger Property="IsEnabled" Value="False"&gt;
                          &lt;Setter TargetName="bottomBorder" Property="Fill" Value="DarkGray" /&gt;
                          &lt;Setter TargetName="bottomBorder" Property="Stroke" Value="Silver" /&gt;
                          &lt;Setter TargetName="bottomBorder" Property="StrokeThickness" Value="4" /&gt;
                          &lt;Setter TargetName="highlight" Property="Fill" Value="#20FFFFFF" /&gt;
                      &lt;/Trigger&gt;
  
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>