title: wpf custom control using blend
body: <p>I'm trying to build a custom <code>ToggleIconButton</code> with image = toggle button with image.
  But some features as <code>Command</code> not really working.</p>
  
  <p>I created the following custom class: </p>
  
  <pre><code>public class ToggleIconButton : ToggleButton
  {
      static ToggleIconButton()
      {
          DefaultStyleKeyProperty.OverrideMetadata(typeof(ToggleIconButton), new FrameworkPropertyMetadata(typeof(ToggleIconButton)));
      }
  
      public static readonly DependencyProperty IconProperty =
          DependencyProperty.Register("Icon", typeof(string), typeof(ToggleIconButton), new PropertyMetadata(default(string)));
  
      public string Icon
      {
          get { return (string)GetValue(IconProperty); }
          set { SetValue(IconProperty, value); }
      }
  }
  </code></pre>
  
  <p>and using <code>Blend</code>, I created the following style:</p>
  
  <p><code>ResourceDictionary1.xaml</code></p>
  
  <pre><code>&lt;SolidColorBrush x:Key="ToolBarButtonHoverBorder" Color="#3399FF"/&gt;
  &lt;SolidColorBrush x:Key="ToolBarButtonChecked" Color="#E6F0FA"/&gt;
  &lt;SolidColorBrush x:Key="ToolBarButtonHover" Color="#C2E0FF"/&gt;
  &lt;SolidColorBrush x:Key="ToolBarButtonPressedBorder" Color="#3399FF"/&gt;
  &lt;SolidColorBrush x:Key="ToolBarButtonPressed" Color="#99CCFF"/&gt;
  &lt;Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}"&gt;
      &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/&gt;
      &lt;Setter Property="Padding" Value="2"/&gt;
      &lt;Setter Property="BorderThickness" Value="1"/&gt;
      &lt;Setter Property="Background" Value="Transparent"/&gt;
      &lt;Setter Property="BorderBrush" Value="Transparent"/&gt;
      &lt;Setter Property="HorizontalAlignment" Value="Center"/&gt;
      &lt;Setter Property="VerticalAlignment" Value="Center"/&gt;
      &lt;Setter Property="HorizontalContentAlignment" Value="Center"/&gt;
      &lt;Setter Property="VerticalContentAlignment" Value="Center"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type ToggleButton}"&gt;
                  &lt;Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"&gt;
                      &lt;Image Width="22" Height="22" HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding Icon, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type controls:ToggleIconButton}}}"/&gt;
                  &lt;/Border&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsChecked" Value="true"&gt;
                          &lt;Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonHoverBorder}"/&gt;
                          &lt;Setter Property="Background" Value="{StaticResource ToolBarButtonChecked}"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsMouseOver" Value="true"&gt;
                          &lt;Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonHoverBorder}"/&gt;
                          &lt;Setter Property="Background" Value="{StaticResource ToolBarButtonHover}"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsKeyboardFocused" Value="true"&gt;
                          &lt;Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonHoverBorder}"/&gt;
                          &lt;Setter Property="Background" Value="{StaticResource ToolBarButtonHover}"/&gt;
                      &lt;/Trigger&gt;
                      &lt;MultiTrigger&gt;
                          &lt;MultiTrigger.Conditions&gt;
                              &lt;Condition Property="IsMouseOver" Value="true"/&gt;
                              &lt;Condition Property="IsChecked" Value="true"/&gt;
                          &lt;/MultiTrigger.Conditions&gt;
                          &lt;Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonPressedBorder}"/&gt;
                          &lt;Setter Property="Background" Value="{StaticResource ToolBarButtonPressed}"/&gt;
                      &lt;/MultiTrigger&gt;
                      &lt;MultiTrigger&gt;
                          &lt;MultiTrigger.Conditions&gt;
                              &lt;Condition Property="IsKeyboardFocused" Value="true"/&gt;
                              &lt;Condition Property="IsChecked" Value="true"/&gt;
                          &lt;/MultiTrigger.Conditions&gt;
                          &lt;Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonPressedBorder}"/&gt;
                          &lt;Setter Property="Background" Value="{StaticResource ToolBarButtonPressed}"/&gt;
                      &lt;/MultiTrigger&gt;
                      &lt;Trigger Property="IsPressed" Value="true"&gt;
                          &lt;Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonPressedBorder}"/&gt;
                          &lt;Setter Property="Background" Value="{StaticResource ToolBarButtonPressed}"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsEnabled" Value="false"&gt;
                          &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  
  &lt;Style x:Key="ToggleIconButtonStyle" TargetType="{x:Type controls:ToggleIconButton}"&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type controls:ToggleIconButton}"&gt;
                  &lt;Grid&gt;
                      &lt;ToggleButton Content="ToggleButton" Style="{DynamicResource ToggleButtonStyle}"/&gt;
                      &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="Click!" Style="{DynamicResource ContentPresenterStyle}"/&gt;
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  &lt;Style x:Key="ContentPresenterStyle" TargetType="{x:Type ContentPresenter}"/&gt;
  </code></pre>
  
  <p>and apply the custom control:</p>
  
  <pre><code>&lt;ToolBar VerticalAlignment="Top"&gt;
      &lt;Controls:ToggleIconButton 
          Content="ToggleIconButton" 
          Height="24" 
          Style="{DynamicResource ToggleIconButtonStyle}" 
          VerticalAlignment="Center" 
          Width="24"
          Icon="/Images/musicNote48.png"
          Command="{Binding AddCommand}"
          /&gt;
  </code></pre>
  
  <p>The control shown good, with the icon, but Command is not invoked. If i click on the ContentPresenter content it is... my wish is to remove the <code>ContentPresenter</code> with the label "Click!" and use only the icon...</p>