WPF - Databind slider value to StoryBoard? - wpf

Question

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.

Answer 2

Old, I know, but I've seen this question asked in tons of places. Hoping this answer will help someone else.
From MSDN: How to: Set a Property After Animating It with a Storyboard
http://msdn.microsoft.com/en-us/library/aa970493.aspx
You need to remove the storyboard from the object and manually set its value to the ending value of the animation.