Question

我有两个按钮的视频播放器：播放和暂停。我只想使用一个按钮。当用户点击Play时，按钮外观将更改为Pause，反之亦然。

实现该任务的更好方法是什么没有使用cs代码？

我尝试将DataTrigger用于我的IsPlaying属性，但没有取得多大成功....

这是我的代码：

<Window.Resources>
        <Viewbox x:Key="viewboxSource" >
            <Viewbox.Triggers>
                <DataTrigger Binding="{Binding IsPlaying}" Value="True">
                    <Setter Property="Path">
                        <Setter.Value>
                            <Path Stroke="Black" StrokeThickness="1" Fill="AliceBlue">
                                <Path.Data>
                                    <GeometryGroup>
                                        <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"/>
                                    </GeometryGroup>
                                </Path.Data>
                            </Path>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Viewbox.Triggers>
        </Viewbox>
    </Window.Resources>
      <StackPanel>
        <Button Content="{StaticResource viewboxSource}"></Button>
     </StackPanel>

但是我发出一个错误，上面写着“'Path'成员无效，因为它没有合格的类型名称”。任何人都可以帮助或给我一个更好的解决方案吗？

Answer 1

这种行为符合切换按钮模式。

在资源中制作一种风格

       <Style x:Key="PlayToggleButtonStyle" TargetType="ToggleButton" >

然后在其中定义一个模板

            <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">

这里最重要的是使用VisualStateManager。

                       <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled"/>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="border" />
                                        <ColorAnimation Duration="0:0:0.2" To="#FF392929" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">

                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

我使用2个动画。一个按钮移动2个像素，第二个改变渐变，提供良好的体验。

唯一的缺点是您需要使用故事板来处理这些状态。你需要添加一个我称之为Geometry nad的Path对象。

            <Storyboard Storyboard.TargetName="Geometry" 
                        Storyboard.TargetProperty="Data">
              <ObjectAnimationUsingKeyFrames>
                <DiscreteObjectKeyFrame KeyTime="0" Value=""/> <!-- place the data here (how your button looks like) -->
              </ObjectAnimationUsingKeyFrames>
            </Storyboard>

但是恕我直言，更好的解决方案是将2个Path对象放在模板中，使其位于另一个上，并更改最顶层的不透明度。

    <Storyboard>
        <DoubleAnimation Storyboard.TargetName="TopGeometry" Storyboard.TargetProperty="Opacity" Duration="0:0:0.5" To="0.0">
            <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseIn"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

你会在这两种状态之间进行很好的转换。更重要的是，不需要数据f.eIPLaying属性。

如何基于DataTrigger设置Viewbox内容

1 个答案: