title: WPF - Databind slider value to StoryBoard?
body: <p>I'm trying to create a sound volume control and for that I've created a storyboard which is animating the volume visually. And I've put this inside an common slider control. And I want to databind the value of the slider directly to the storyboards timeline position. If the slider is value 0, then the storyboard should be at 00:00 etc, all th way up to the top. Is this possible?</p>
  
  <p>This is the code of the control. The Storyboard animation is in here.</p>
  
  <pre><code>&lt;ControlTemplate TargetType="{x:Type Slider}"&gt;
                      &lt;ControlTemplate.Resources&gt;
                          &lt;Storyboard x:Key="SoundControl_Animation"&gt;
                              &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path3" Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
                                  &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.005"/&gt;
                                  &lt;SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/&gt;
                                  &lt;SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/&gt;
                              &lt;/DoubleAnimationUsingKeyFrames&gt;
                              &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path2" Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
                                  &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/&gt;
                                  &lt;SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/&gt;
                              &lt;/DoubleAnimationUsingKeyFrames&gt;
                              &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path1" Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
                                  &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.495"/&gt;
                                  &lt;SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/&gt;
                              &lt;/DoubleAnimationUsingKeyFrames&gt;
                          &lt;/Storyboard&gt;
                      &lt;/ControlTemplate.Resources&gt;
                      &lt;Grid Width="Auto" Height="Auto"&gt;
                          &lt;Grid.ColumnDefinitions&gt;
                              &lt;ColumnDefinition Width="51.333"/&gt;
                              &lt;ColumnDefinition Width="*"/&gt;
                          &lt;/Grid.ColumnDefinitions&gt;
                          &lt;Grid x:Name="GridRoot" Margin="0,0,0,0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center"&gt;
                              &lt;Grid.RowDefinitions&gt;
                                  &lt;RowDefinition Height="Auto"/&gt;
                                  &lt;RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/&gt;
                                  &lt;RowDefinition Height="Auto"/&gt;
                              &lt;/Grid.RowDefinitions&gt;
  
                              &lt;!-- TickBar shows the ticks for Slider --&gt;
                              &lt;TickBar Visibility="Collapsed" x:Name="TopTick" Height="4" SnapsToDevicePixels="True" Placement="Top" Fill="{DynamicResource GlyphBrush}"/&gt;
                              &lt;Border Grid.Row="1" Margin="0" x:Name="Border" Height="4" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/&gt;
  
                              &lt;!-- The Track lays out the repeat buttons and thumb --&gt;
                              &lt;Track Grid.Row="1" x:Name="PART_Track"&gt;
                                  &lt;Track.Thumb&gt;
                                      &lt;Thumb Style="{DynamicResource SimpleSliderThumb}"/&gt;
                                  &lt;/Track.Thumb&gt;
                                  &lt;Track.IncreaseRepeatButton&gt;
                                      &lt;RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="Slider.IncreaseLarge"/&gt;
                                  &lt;/Track.IncreaseRepeatButton&gt;
                                  &lt;Track.DecreaseRepeatButton&gt;
                                      &lt;RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="Slider.DecreaseLarge"/&gt;
                                  &lt;/Track.DecreaseRepeatButton&gt;
                              &lt;/Track&gt;
  
                              &lt;TickBar Visibility="Collapsed" Grid.Row="2" x:Name="BottomTick" Height="4" SnapsToDevicePixels="True" Placement="Bottom" Fill="{TemplateBinding Foreground}"/&gt;
                          &lt;/Grid&gt;
                          &lt;Path Stretch="Fill" Data="F1 M-65.067448,318.22277 C-65.067448,318.22277 -58.87652,318.2416 -58.87652,318.2416 -58.797256,318.31822 -54.599352,312.8803 -54.599352,312.8803 -54.599352,312.8803 -54.601205,330.97579 -54.601205,330.97579 -54.601205,330.97579 -58.83846,325.45217 -58.83846,325.45217 -58.83846,325.45217 -64.980101,325.3728 -64.988066,325.38226 -65.018879,325.41884 -65.067448,318.22277 -65.067448,318.22277 z" HorizontalAlignment="Left" Margin="0,0,0,0" Stroke="{DynamicResource DrawBrush_IconStroke}" StrokeThickness="1" Fill="{DynamicResource DrawBrush_Std_Button_HighlightPatch_MouseOver}" x:Name="path" Width="15" Opacity="1" VerticalAlignment="Stretch" Grid.Column="0" Height="20"/&gt;
                          &lt;Path Margin="20.671,14,26.662,14" Fill="{x:Null}" Stretch="Fill" StrokeThickness="2" Data="M75.569117,15.851553 C75.569117,15.851553 85.628643,23.181896 75.250364,31.167364" HorizontalAlignment="Stretch" Width="4" Grid.Column="0" Height="10" Stroke="#FF666666" d:LayoutOverrides="HorizontalAlignment" x:Name="path1"/&gt;
                          &lt;Path Margin="25.51,9,19.823,9" Fill="{x:Null}" Stretch="Fill" StrokeThickness="2.5" Data="M75.569117,15.851553 C75.569117,15.851553 85.628643,23.181896 75.250364,31.167364" HorizontalAlignment="Stretch" Height="20" Stroke="#FF848484" x:Name="path2"/&gt;
                          &lt;Path Margin="0,4,12.156,4" Fill="{x:Null}" Stretch="Fill" StrokeThickness="3" Data="M75.569117,15.851553 C75.569117,15.851553 85.628643,23.181896 75.250364,31.167364" HorizontalAlignment="Right" Width="8" Height="30" Stroke="#FFB9B9B9" x:Name="path3"/&gt;
                      &lt;/Grid&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="TickPlacement" Value="TopLeft"&gt;
                              &lt;Setter Property="Visibility" Value="Visible" TargetName="TopTick"/&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="TickPlacement" Value="BottomRight"&gt;
                              &lt;Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="TickPlacement" Value="Both"&gt;
                              &lt;Setter Property="Visibility" Value="Visible" TargetName="TopTick"/&gt;
                              &lt;Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsEnabled" Value="false"&gt;
                              &lt;Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/&gt;
                              &lt;Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/&gt;
                          &lt;/Trigger&gt;
  
                          &lt;!-- Use a rotation to create a Vertical Slider form the default Horizontal --&gt;
                          &lt;Trigger Property="Orientation" Value="Vertical"&gt;
                              &lt;Setter Property="LayoutTransform" TargetName="GridRoot"&gt;
                                  &lt;Setter.Value&gt;
                                      &lt;RotateTransform Angle="-90"/&gt;
                                  &lt;/Setter.Value&gt;
                              &lt;/Setter&gt;
                              &lt;!-- Track rotates itself based on orientation so need to force it back --&gt;
                              &lt;Setter TargetName="PART_Track" Property="Orientation" Value="Horizontal"/&gt;
                          &lt;/Trigger&gt;
  
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>And the control itself it put on the Canvas like this:</p>
  
  <pre><code>&lt;Slider Margin="47.75,9.75,0,0" Style="{DynamicResource btn_SoundVolumeSlider}" Grid.Column="3" d:LayoutOverrides="Height" VerticalAlignment="Top" HorizontalAlignment="Stretch" SmallChange="0" TickFrequency="0" Value="3"/&gt;
  </code></pre>