Как настроить содержимое Viewbox на основе DataTrigger

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 пикселя, а вторая изменяет градиент, что дает хороший опыт.

Единственный недостаток - вам нужно использовать раскадровки для обработки этих состояний. Вам нужно добавить объект Path, который я назвал Geometry nad mainupulate.

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

У вас был бы хороший переход между этими двумя состояниями. Более того, данные не требуются для свойства IsPLaying.