title: Style a Button with Image button in WPF
body: <p>I need to style a button in WPF in the following manner
  <a href="https://i.stack.imgur.com/WZ4Dx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WZ4Dx.jpg" alt="enter image description here"></a></p>
  
  <p>The text area (Customer Login) and the Icon area (precisely the whole grey colored area) should work as  a button <br/>
  Currently, I am taking two buttons, one for the text part and the other for the Icon part, and binded them with the same click event, but I'm not getting the desired result
  <br/> <strong>Form.xaml</strong></p>
  
  <pre><code>&lt;StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"&gt;
          &lt;Grid&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition&gt;&lt;/ColumnDefinition&gt;
                  &lt;ColumnDefinition&gt;&lt;/ColumnDefinition&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
                  &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Button Tag="ByCard" x:Name="btn_CustomerLoginIcon" Grid.Column="0" Style="{StaticResource style_Button_GreyDefault}" MinHeight="90" Width="80" Margin="0,20" FontSize="35" Click="btn_CustomerLogin_Click"&gt;
                  &lt;StackPanel&gt;
                      &lt;TextBlock&gt;My text here&lt;/TextBlock&gt;
                      &lt;Image Source="/Resources/img_businessman.png" Stretch="None" /&gt;
                  &lt;/StackPanel&gt;
              &lt;/Button&gt;
              &lt;Button Tag="ByCard" x:Name="btn_CustomerLogin" Grid.Column="0" Style="{StaticResource style_Button_GreyDefault}" MinHeight="90" MinWidth="400" Margin="20" FontSize="35" Content="Customer Login" Click="btn_CustomerLogin_Click" /&gt;
              &lt;Button Tag="Manual" x:Name="btn_ConsultantLogin" Grid.Column="1" Style="{StaticResource style_Button_GreyDefault}" MinHeight="90" MinWidth="400" Margin="20" FontSize="35" Content="Consultant Login" Click="btn_ConsultantLogin_Click" /&gt;
              &lt;Button Tag="Manual" x:Name="btn_NewUser" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Style="{StaticResource style_Button_RedDefault}" MinHeight="90" MinWidth="400" Margin="20" FontSize="35" Content="New User" Width="80" Click="btn_NewUser_Click" /&gt;
          &lt;/Grid&gt;
      &lt;/StackPanel&gt;
  </code></pre>
  
  <p><strong>Resource.xaml</strong> <br/></p>
  
  <pre><code>&lt;Style x:Key="style_Button_GreyDefault" TargetType="{x:Type Button}"&gt;
          &lt;Setter Property="Focusable" Value="False" /&gt;
          &lt;Setter Property="FocusVisualStyle" Value="{x:Null}"/&gt;
          &lt;Setter Property="Background" Value="{StaticResource color_Greyish}"/&gt;
          &lt;Setter Property="BorderBrush" Value="{StaticResource color_White}"/&gt;
          &lt;Setter Property="BorderThickness" Value="5"/&gt;
          &lt;Setter Property="Foreground" Value="{StaticResource color_BlueDefault}"/&gt;
          &lt;Setter Property="HorizontalContentAlignment" Value="Center"/&gt;
          &lt;Setter Property="VerticalContentAlignment" Value="Center"/&gt;
          &lt;Setter Property="Padding" Value="16,3,16,3"/&gt;
          &lt;!--&lt;Setter Property="FontFamily" Value="Avenir-Medium"/&gt;--&gt;
          &lt;Setter Property="FontFamily" Value="Arial Bold"/&gt;
          &lt;Setter Property="FontWeight" Value="Bold"/&gt;
          &lt;Setter Property="FontSize" Value="26"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                      &lt;Border Name="Chrome"
                                  Background="{TemplateBinding Background}"
                                  BorderBrush="{TemplateBinding BorderBrush}"
                                  BorderThickness="{TemplateBinding BorderThickness}"
                                  CornerRadius="10"
                                  SnapsToDevicePixels="true"&gt;
                          &lt;ContentPresenter Name="Presenter" Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      RecognizesAccessKey="True"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/&gt;
                      &lt;/Border&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsEnabled" Value="false"&gt;
                              &lt;Setter Property="Foreground" Value="{StaticResource color_Gray}" /&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                              &lt;Setter Property="Background" Value="{StaticResource color_BlueDefault}" /&gt;
                              &lt;Setter Property="BorderBrush" Value="{StaticResource color_BlueDefault}" /&gt;
                              &lt;Setter Property="Foreground" Value="{StaticResource color_White}" /&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsPressed" Value="True"&gt;
                              &lt;Setter Property="Background" Value="{StaticResource color_BlueDefault}" /&gt;
                              &lt;Setter Property="BorderBrush" Value="{StaticResource color_White}"/&gt;
                              &lt;Setter Property="Foreground" Value="{StaticResource color_White}"/&gt;
                              &lt;Setter Property="Button.Effect"&gt;
                                  &lt;Setter.Value&gt;
                                      &lt;DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" /&gt;
                                  &lt;/Setter.Value&gt;
                              &lt;/Setter&gt;
                          &lt;/Trigger&gt;
                          &lt;!--&lt;Trigger Property="IsFocused" Value="true"&gt;
                              &lt;Setter TargetName="Chrome" Property="BorderBrush" Value="{StaticResource color_White}" /&gt;
                          &lt;/Trigger&gt;--&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
      &lt;Style x:Key="style_Button_GreyIcon" TargetType="{x:Type Button}"&gt;
          &lt;Setter Property="Focusable" Value="False" /&gt;
          &lt;Setter Property="FocusVisualStyle" Value="{x:Null}"/&gt;
          &lt;Setter Property="Background" Value="{StaticResource color_Greyish}"/&gt;
          &lt;Setter Property="BorderBrush" Value="{StaticResource color_White}"/&gt;
          &lt;Setter Property="BorderThickness" Value="5"/&gt;
          &lt;Setter Property="Foreground" Value="{StaticResource color_BlueDefault}"/&gt;
          &lt;Setter Property="HorizontalAlignment" Value="Left"/&gt;
          &lt;Setter Property="HorizontalContentAlignment" Value="Center"/&gt;
          &lt;Setter Property="VerticalContentAlignment" Value="Center"/&gt;
          &lt;Setter Property="Padding" Value="16,3,16,3"/&gt;
          &lt;!--&lt;Setter Property="FontFamily" Value="Avenir-Medium"/&gt;--&gt;
          &lt;Setter Property="FontFamily" Value="Arial Bold"/&gt;
          &lt;Setter Property="FontWeight" Value="Bold"/&gt;
          &lt;Setter Property="FontSize" Value="26"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                      &lt;Border Name="Chrome"
                                  Background="{TemplateBinding Background}"
                                  BorderBrush="{TemplateBinding BorderBrush}"
                                  BorderThickness="{TemplateBinding BorderThickness}"
                                  CornerRadius="50"
                                  SnapsToDevicePixels="true"&gt;
                          &lt;ContentPresenter Name="Presenter" Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      RecognizesAccessKey="True"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/&gt;
                      &lt;/Border&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsEnabled" Value="false"&gt;
                              &lt;Setter Property="Foreground" Value="{StaticResource color_Gray}" /&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                              &lt;Setter Property="Background" Value="{StaticResource color_BlueDefault}" /&gt;
                              &lt;Setter Property="BorderBrush" Value="{StaticResource color_BlueDefault}" /&gt;
                              &lt;Setter Property="Foreground" Value="{StaticResource color_White}" /&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsPressed" Value="True"&gt;
                              &lt;Setter Property="Background" Value="{StaticResource color_BlueDefault}" /&gt;
                              &lt;Setter Property="BorderBrush" Value="{StaticResource color_White}"/&gt;
                              &lt;Setter Property="Foreground" Value="{StaticResource color_White}"/&gt;
                              &lt;Setter Property="Button.Effect"&gt;
                                  &lt;Setter.Value&gt;
                                      &lt;DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" /&gt;
                                  &lt;/Setter.Value&gt;
                              &lt;/Setter&gt;
                          &lt;/Trigger&gt;
                          &lt;!--&lt;Trigger Property="IsFocused" Value="true"&gt;
                              &lt;Setter TargetName="Chrome" Property="BorderBrush" Value="{StaticResource color_White}" /&gt;
                          &lt;/Trigger&gt;--&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p>This is what I'm getting right now <br/>
  <a href="https://i.stack.imgur.com/mPrmD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mPrmD.jpg" alt="The button I&#39;m getting"></a>
  <br/>Is my approach correct? Or is there a better way to achieve this? What I assume is I need to do the following<br/></p>
  
  <ul>
  <li>I need to increase the height of the Image button in such way that it
  won't effect the height of text button<br/></li>
  <li>I need to apply Proper padding between the two buttons</li>
  </ul>