title: How to put width value as percentage in storyboard animation in WPF
body: <p>I want to make a drawer using storyboard.
  There are 2 child grids in the base grid.
  One is a 'MenuGrid', the other is a 'ContentGrid'.</p>
  <p><a href="https://i.stack.imgur.com/3jUnC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3jUnC.png" alt="enter image description here" /></a></p>
  <p>So I wrote a storyboard like this(This is a storyboard that adjusts the width of the 'MenuGrid'.):</p>
  <pre><code>&lt;Window.Resources&gt;
      &lt;Storyboard x:Key=&quot;MenuOpen&quot;&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;Width&quot; 
                                         Storyboard.TargetName=&quot;MenuGrid&quot;&gt;
              &lt;EasingDoubleKeyFrame KeyTime=&quot;0&quot; Value=&quot;60&quot;/&gt;
              &lt;EasingDoubleKeyFrame KeyTime=&quot;0:0:0.5&quot; Value=&quot;300&quot;/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
      &lt;/Storyboard&gt;
      &lt;Storyboard x:Key=&quot;MenuClose&quot; &gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;Width&quot; 
                                         Storyboard.TargetName=&quot;MenuGrid&quot;&gt;
              &lt;EasingDoubleKeyFrame KeyTime=&quot;0&quot; Value=&quot;300&quot;/&gt;
              &lt;EasingDoubleKeyFrame KeyTime=&quot;0:0:0.5&quot; Value=&quot;60&quot;/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
      &lt;/Storyboard&gt;
  &lt;/Window.Resources&gt;
  
  &lt;Window.Triggers&gt;
      &lt;EventTrigger RoutedEvent=&quot;ButtonBase.Click&quot; SourceName=&quot;ButtonOpenMenu&quot;&gt;
          &lt;BeginStoryboard Storyboard=&quot;{StaticResource MenuOpen}&quot;/&gt;
      &lt;/EventTrigger&gt;
      &lt;EventTrigger RoutedEvent=&quot;ButtonBase.Click&quot; SourceName=&quot;ButtonCloseMenu&quot;&gt;
          &lt;BeginStoryboard Storyboard=&quot;{StaticResource MenuClose}&quot;/&gt;
      &lt;/EventTrigger&gt;
  &lt;/Window.Triggers&gt;
  
  &lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width=&quot;300&quot;/&gt;
          &lt;ColumnDefinition Width=&quot;*&quot;/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;Grid Width=&quot;300&quot; x:Name=&quot;MenuGrid&quot; Grid.Column=&quot;0&quot;&gt;
          &lt;StackPanel&gt;
                  &lt;Button x:Name=&quot;ButtonCloseMenu&quot; Width=&quot;60&quot; Height=&quot;60&quot; VerticalAlignment=&quot;Top&quot; HorizontalAlignment=&quot;Right&quot;&gt;
                  &lt;/Button&gt;
                  &lt;Button x:Name=&quot;ButtonOpenMenu&quot; Width=&quot;60&quot; Height=&quot;60&quot; VerticalAlignment=&quot;Top&quot; HorizontalAlignment=&quot;left&quot; &gt;
                  &lt;/Button&gt;
          &lt;/StackPanel&gt;
      &lt;/Grid&gt;
      &lt;Grid x:Name=&quot;ContentGrid&quot; Grid.Column=&quot;1&quot;&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  <p>Every time I press a certain button it works very well.
  However, when the Width of the MenuGrid decreases, I want the Width of the ContentGrid to increase as well.</p>
  <p>In EasingDoubleKeyFrame KeyTime=&quot;0&quot; Value=&quot;300&quot;, is there a way to express 'Value' as a percentage or ratio rather than an int value?</p>