title: WPF Smoothly animated ProgressBar in template
body: <p>I am working on an MVVM application and I would like to have a ProgressBar that smoothly animates to it's new value when that property changes. I have seen several answers to this question using c# but I'd prefer to do it all inside the template. The problem I'm having is setting up and targeting the event and storyboard properly. Here is what I have currently:</p>
  
  <p>The progress bar- 
                      </p>
  
  <p>The style- (just the triggers)</p>
  
  <pre><code>                    &lt;ControlTemplate.Triggers&gt;
                      &lt;EventTrigger RoutedEvent="RangeBase.ValueChanged"&gt;
                          &lt;BeginStoryboard&gt;
                              &lt;Storyboard&gt;
                                  &lt;DoubleAnimation
                                      Storyboard.TargetName="???????" 
                                      Storyboard.TargetProperty="Value"
                                      To="???????" Duration="0:0:5"  /&gt;
                              &lt;/Storyboard&gt;
                          &lt;/BeginStoryboard&gt;
                      &lt;/EventTrigger&gt;
  </code></pre>
  
  <p>I took the trigger code from here: <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.progressbar(v=vs.110).aspx" rel="noreferrer">http://msdn.microsoft.com/en-us/library/system.windows.controls.progressbar(v=vs.110).aspx</a>. </p>
  
  <p>How do I set the TargetName to the template itself so that it applies to all the controls which use this template? How do I set "To" to the incoming Value? There appears to be a way to grab the "Binding" value but I have Value and Max both bound on the progressbar element. How would it know what to use?</p>
  
  <p>Here is the whole template for reference:</p>
  
  <pre><code>    &lt;Style x:Key="ProgressStyle" TargetType="{x:Type ProgressBar}"&gt;
      &lt;Setter Property="OverridesDefaultStyle" Value="True" /&gt;
      &lt;Setter Property="SnapsToDevicePixels" Value="True" /&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type ProgressBar}"&gt;
                  &lt;Grid MinHeight="14" MinWidth="20"&gt;
                      &lt;Border x:Name="BaseRectangle" Background="{StaticResource BaseColor}" CornerRadius="10,0,10,0"&gt;&lt;/Border&gt;
                      &lt;Border x:Name="GlassRectangle" CornerRadius="10,0,10,0"  Background="{StaticResource GlassFX}" Panel.ZIndex="10"&gt;&lt;/Border&gt;
                      &lt;Border x:Name="animation" CornerRadius="10,0,10,0" Opacity=".7" Background="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Left"&gt;&lt;/Border&gt;
                      &lt;Border x:Name="PART_Indicator" CornerRadius="10,0,10,0" Background="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Left"&gt;&lt;/Border&gt;
                      &lt;Border x:Name="PART_Track" BorderThickness="1" CornerRadius="10,0,10,0" BorderBrush="Black"&gt;&lt;/Border&gt;
                      &lt;Border x:Name="BordeCabeceraSombra" BorderThickness="2" CornerRadius="10,0,10,0" BorderBrush="DarkGray" Opacity=".2" Margin="1,1,1,0"&gt;&lt;/Border&gt;
                      &lt;Label x:Name="Progress" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontWeight="Bold" Foreground="White" Opacity=".7" Content="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"&gt;&lt;/Label&gt;
                  &lt;/Grid&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;EventTrigger RoutedEvent="RangeBase.ValueChanged"&gt;
                          &lt;BeginStoryboard&gt;
                              &lt;Storyboard&gt;
                                  &lt;DoubleAnimation
                                      Storyboard.TargetName="???????" 
                                      Storyboard.TargetProperty="Value"
                                      From="???????" To="???????" Duration="0:0:5"  /&gt;
                              &lt;/Storyboard&gt;
                          &lt;/BeginStoryboard&gt;
                      &lt;/EventTrigger&gt;
                      &lt;Trigger Property="IsIndeterminate" Value="True"&gt;
                          &lt;Setter Property="Visibility" TargetName="Progress" Value="Hidden"&gt;&lt;/Setter&gt;
                          &lt;Setter Property="Background" TargetName="PART_Indicator"&gt;
                              &lt;Setter.Value&gt;
                                  &lt;MultiBinding&gt;
                                      &lt;MultiBinding.Converter&gt;
                                          &lt;wintheme:ProgressBarHighlightConverter/&gt;
                                      &lt;/MultiBinding.Converter&gt;
                                      &lt;Binding Source="{StaticResource GlowFXProgressAnimated}"/&gt;
                                      &lt;Binding Path="ActualWidth"  ElementName="BaseRectangle"/&gt;
                                      &lt;Binding Path="ActualHeight" ElementName="BaseRectangle"/&gt;
                                  &lt;/MultiBinding&gt;
                              &lt;/Setter.Value&gt;
                          &lt;/Setter&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsEnabled" Value="False"&gt;
                          &lt;Setter Property="Opacity" Value=".5"&gt;&lt;/Setter&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>Any help would be appreciated!</p>