WPF - Databind Schieberegler Wert zu StoryBoard?

Question

Ich versuche, eine Lautstärkeregelung zu erstellen, und dafür habe ich ein Storyboard erstellt, das die Lautstärke visuell animiert. Und ich habe dies in einen allgemeinen Schieberegler eingefügt. Und ich möchte den Wert des Schiebereglers direkt in die Timeline-Position der Storyboards bringen. Wenn der Schieberegler den Wert 0 hat, sollte das Storyboard auf 00:00 usw. stehen, und zwar ganz nach oben. Ist das möglich?

Dies ist der Code der Steuerung. Die Storyboard Animation ist hier drin.

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

Und die Steuerung selbst es so auf der Leinwand setzen:

<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

Es hängt davon ab, was Sie vorhaben, zu erreichen. Der Punkt ist, dass die Eigenschaftenbindung für alle Elemente in der visuellen Struktur durchgeführt werden soll. Wenn Sie die Animation zeigen, kann ich sagen, wie man die Animation und den Schieberegler richtig verbindet.

Wenn Ihre Animation beispielsweise ein Drehknopf ist, binden Sie den Schiebereglerwert über einen Konverter an den Drehwinkel des Objekts, das Sie animieren möchten. Aber wie gesagt, es hängt von deiner Animation ab. Zeigen Sie es, sogar ein JPEG, und ich kann mehr Details erzählen.

Answer 2

Alt, ich weiß, aber ich habe diese Frage in Tonnen von Orten gesehen. Diese Antwort zu hoffen, wird anderen helfen.

Von MSDN: Gewusst wie: eine Eigenschaft festgelegt, nachdem es mit einem Storyboard

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

Sie benötigen Animieren das Storyboard aus dem Objekt und manuell setzen Sie den Wert auf den Endwert des entfernen Animation.