WPF - Databind 슬라이더 값을 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

오래되었지만,이 질문을 여러 곳에서 들었습니다. 이 답변을 원하면 다른 사람을 도울 것입니다.

MSDN에서

: 방법 : 당신은 개체에서 스토리 보드를 제거해야하는 수동의 종료 값으로 그 값을 설정 스토리 보드

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

와 애니메이션 후 속성을 설정 생기.