title: Dynamic Button Width using WPF
body: <p>I am trying to create a control that performs several animations on mouse over event of a button. The first functionality is that, the button should take padding=2 and occupy the entire columns. I am not able to do that; if I am trying to decrease the width of the button on mouseover, I am able to do, but when I am trying to increase the width, the button is expanding but the expanded part is not visible. How to implement the same ?</p>
  
  <p>I am using the below code in control template. Please suggest changes :-</p>
  
  <p></p>
  
  <pre><code>&lt;!--Create a control template for button--&gt;
  &lt;ControlTemplate x:Key="buttonAnimate" TargetType="Button"&gt;
      &lt;Grid Name="myGrid"&gt;
          &lt;Button Name="myButton" Background="{TemplateBinding Background }" Width="{TemplateBinding Width}"&gt;
          &lt;/Button&gt;
      &lt;Border Name="MyBorder" BorderBrush="Orange" BorderThickness="3" CornerRadius="2"&gt;&lt;/Border&gt;
      &lt;/Grid&gt;
      &lt;ControlTemplate.Triggers&gt;
          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
              &lt;Setter Property="Background" Value="DarkRed" TargetName="MyBorder"/&gt;
              &lt;Setter Property="Width" Value="200" TargetName="myButton"/&gt;
              &lt;Setter Property="Cursor" Value="Hand" TargetName="myGrid"/&gt;
              &lt;Setter Property="Width" Value="300" TargetName="myButton"/&gt;
              &lt;Setter Property="Width" Value="300" TargetName="MyBorder"/&gt;
              &lt;Setter Property="Padding" Value="2" TargetName="myButton"/&gt;
          &lt;/Trigger&gt;
      &lt;/ControlTemplate.Triggers&gt;
  &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p></p>
  
  <p>Thanks in advance.</p>