WPF - データバインディングのスライダ値をStoryBoardに設定しますか？

Question

私は音量コントロールを作成しようとしています。そのためにボリュームを視覚的にアニメーション化しているストーリーボードを作成しました。そして私はこれを共通のスライダーコントロールの中に入れました。スライダーの値をストーリーボードのタイムラインの位置に直接バインドする必要があります。スライダーが値0の場合、ストーリーボードは00:00など、上から上までのすべての位置になければなりません。これは可能ですか？

これはコントロールのコードです。ストーリーボードアニメーションはここにあります。

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

そして、それは次のようにキャンバスの上に置くコントロール自体：

<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

それはあなたが達成することを計画かに依存します。要点は、ビジュアルツリー上のアイテム間でプロパティのバインディングを実行する必要があることです。アニメーションを表示すると、アニメーションとスライダの値をバインドする適切な方法がわかります。

たとえば、アニメーションが回転ノブの場合、アニメーションするアイテムの回転角度にコンバーターを介してスライダーの値をバインドする方法があります。しかし、私が言ったように、それはあなたのアニメーションに依存します。それを表示、さらにはJPEG、私は詳細を伝えることができます。

Answer 2

私は知っていますが、私はこの質問を数多くの場所で聞いたことがあります。この回答が他の人に役立つことを望む。あなたがオブジェクトからストーリーボードを削除する必要があり、手動での終了値にその値を設定し、ストーリーボード

http://msdn.microsoft.com/en-us/library/aa970493.aspx

とそれをアニメーション化した後にプロパティを設定します。どのように：MSDNから

アニメーション。