WPF - 将滑块值数据绑定到 StoryBoard？

Posted 2023-03-29

【中文标题】WPF - 将滑块值数据绑定到 StoryBoard？

【英文标题】：WPF - Databind slider value to StoryBoard?

【发布时间】：2010-10-23 07:23:33

【问题描述】：

我正在尝试创建一个音量控制，为此我创建了一个故事板，它可以在视觉上为音量设置动画。我把它放在一个通用的滑块控件中。我想将滑块的值直接绑定到情节提要的时间线位置。如果滑块的值为 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"/>

【问题讨论】：

什么？我真的在这里一片空白。我只知道一点 Visual Basic，仅此而已。有人可以给我一个小提示下一步该做什么吗？我的意思是，我有故事板和它的 XAML 代码。故事板得到了价值。现在，在 Visual Studio 中，我可能只是通过引用命名空间将值直接绑定在一起，并且它是绑定到的控件。我什至不知道在这里使用的正确语法。

【参考方案1】：

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

例如，如果您的动画是一个旋钮，那么执行此操作的方法是通过转换器将滑块值绑定到您要制作动画的项目的旋转角度。但是，正如我所说，这取决于你的动画。显示它，即使是 JPEG，我可以告诉更多细节。

【讨论】：

好的，我已经上传了一个 JPEG 文件供您查看：img24.imageshack.us/img24/396/slidern.jpg 正如您所看到的，我从 SimpleStyles.xaml 中插入了一个滑块控件并创建了一个副本。我已将控件内的默认 Grid 分组到另一个 Grid 中，并将现有内容放入第二列。只是为声音图标和动画腾出空间。然后我创建了一个故事板，其中 00:00 代表最低音量，最长 1 秒，代表最大音量。如果有必要，我当然可以创建更多关键帧。 :)

有人吗？我一直在到处搜索，但在这样的故事板上找不到任何信息

【参考方案2】：

老了，我知道，但我在很多地方都看到过这个问题。希望这个答案对其他人有所帮助。

来自 MSDN：如何：在使用情节提要动画后设置属性

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

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