WPF-将滑块值数据绑定到情节提要?

WPF-将滑块值数据绑定到情节提要?,wpf,data-binding,animation,expression-blend,storyboard,Wpf,Data Binding,Animation,Expression Blend,Storyboard,我正在尝试创建一个音量控制,为此我创建了一个故事板,可以直观地为音量设置动画。我把它放在一个普通的滑动控件中。我想将滑块的值直接数据绑定到故事板的时间线位置。如果滑块的值为0,那么故事板应该在00:00等,一直到顶部。这可能吗 这是控件的代码。故事板动画在这里 <ControlTemplate TargetType="{x:Type Slider}"> <ControlTemplate.Resources>

我正在尝试创建一个音量控制,为此我创建了一个故事板,可以直观地为音量设置动画。我把它放在一个普通的滑动控件中。我想将滑块的值直接数据绑定到故事板的时间线位置。如果滑块的值为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"/>

这取决于您计划实现的目标。关键是属性绑定应该跨可视化树上的项执行。如果显示动画,我可以告诉您如何正确地绑定动画和滑块值


例如,如果动画是一个旋转旋钮,则执行该操作的方法是通过转换器将滑块值绑定到要设置动画的项目的旋转角度。但是,正如我所说,这取决于你的动画。显示它,即使是JPEG,我也能说出更多的细节。

我知道,这是个老问题,但我在很多地方都看到过这个问题。希望这个答案能帮助别人

从MSDN:如何:在使用故事板设置属性动画后设置属性


您需要从对象中删除情节提要,并手动将其值设置为动画的结束值。

好的,我上传了一个JPEG供您查看:如您所见,我从SimpleStyles.xaml中插入了一个滑块控件并创建了一个副本。我已将控件中的默认网格分组到另一个网格中,并将现有内容放入第二列。只是为了给声音图标和动画腾出空间。然后我创建了一个故事板,其中00:00表示最低音量,最长可达1秒,表示最大音量。如果有必要,我当然可以创建更多关键帧。:)任何人我到处都在搜索,但在故事板上找不到任何类似的信息。什么?我这里真的是一片空白。我只懂一点Visual Basic,仅此而已。谁能给我一点提示,告诉我下一步该怎么做?我的意思是,我有故事板和它的XAML代码。故事板也有价值。现在,在VisualStudio中,我可以通过引用名称空间和绑定到的控件将值直接绑定到一起。我甚至不知道这里使用的正确语法。