WPF - Databind slider value to StoryBoard?

Question

Hi, 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?

This is the code of the control. The Storyboard animation is in here.

<ControlTemplate TargetType="{x:Type Slider}">
        <ControlTemplate.Resources>
         <Storyboard x:Key="SoundControl_Animation">
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path3" Storyboard.TargetProperty="(UIElement.Opacity)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.005"/>
           <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
           <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path2" Storyboard.TargetProperty="(UIElement.Opacity)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
           <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path1" Storyboard.TargetProperty="(UIElement.Opacity)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.495"/>
           <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
          </DoubleAnimationUsingKeyFrames>
         </Storyboard>
        </ControlTemplate.Resources>
        <Grid Width="Auto" Height="Auto">
         <Grid.ColumnDefinitions>
          <ColumnDefinition Width="51.333"/>
          <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>
         <Grid x:Name="GridRoot" Margin="0,0,0,0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center">
          <Grid.RowDefinitions>
           <RowDefinition Height="Auto"/>
           <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
           <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>

          <!-- TickBar shows the ticks for Slider -->
          <TickBar Visibility="Collapsed" x:Name="TopTick" Height="4" SnapsToDevicePixels="True" Placement="Top" Fill="{DynamicResource GlyphBrush}"/>
          <Border Grid.Row="1" Margin="0" x:Name="Border" Height="4" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>

          <!-- The Track lays out the repeat buttons and thumb -->
          <Track Grid.Row="1" x:Name="PART_Track">
           <Track.Thumb>
            <Thumb Style="{DynamicResource SimpleSliderThumb}"/>
           </Track.Thumb>
           <Track.IncreaseRepeatButton>
            <RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="Slider.IncreaseLarge"/>
           </Track.IncreaseRepeatButton>
           <Track.DecreaseRepeatButton>
            <RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="Slider.DecreaseLarge"/>
           </Track.DecreaseRepeatButton>
          </Track>

          <TickBar Visibility="Collapsed" Grid.Row="2" x:Name="BottomTick" Height="4" SnapsToDevicePixels="True" Placement="Bottom" Fill="{TemplateBinding Foreground}"/>
         </Grid>
         <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"/>
         <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"/>
         <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"/>
         <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"/>
        </Grid>
        <ControlTemplate.Triggers>
         <Trigger Property="TickPlacement" Value="TopLeft">
          <Setter Property="Visibility" Value="Visible" TargetName="TopTick"/>
         </Trigger>
         <Trigger Property="TickPlacement" Value="BottomRight">
          <Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/>
         </Trigger>
         <Trigger Property="TickPlacement" Value="Both">
          <Setter Property="Visibility" Value="Visible" TargetName="TopTick"/>
          <Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/>
         </Trigger>
         <Trigger Property="IsEnabled" Value="false">
          <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
          <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
         </Trigger>

         <!-- Use a rotation to create a Vertical Slider form the default Horizontal -->
         <Trigger Property="Orientation" Value="Vertical">
          <Setter Property="LayoutTransform" TargetName="GridRoot">
           <Setter.Value>
            <RotateTransform Angle="-90"/>
           </Setter.Value>
          </Setter>
          <!-- Track rotates itself based on orientation so need to force it back -->
          <Setter TargetName="PART_Track" Property="Orientation" Value="Horizontal"/>
         </Trigger>

        </ControlTemplate.Triggers>
       </ControlTemplate>

And the control itself it put on the Canvas like this:

<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"/>

Answer 1

It depends on what you plan to achieve. The point is that property binding should be performed across items on the visual tree. If you show the animation I can tell how is the proper way to bind the animation and the slider value.

For example, if your animation is a turning knob the way to do it is binding the slider value through a converter to the rotation angle of the item you want to animate. But, as I said, it depends on your animation. Show it, even a JPEG, and I can tell more details.