Question

我正在尝试在UWP中制作一个AppBarButton，当它可见时它就会淡出。

为此，我复制了AppBarButton样式，并使用WindowsStateTriggers nuget包中的触发器添加了另一个VisualStateGroup。

<ControlTemplate TargetType="AppBarButton">
    <Grid x:Name="Root" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" Margin="1,0">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisibilityStates">
                <VisualState x:Name="Hidden">
                    <VisualState.Setters>
                        <Setter Target="ContentRoot.Opacity" Value="0"/>
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <windowsStateTriggers:EqualsStateTrigger Value="{Binding ElementName=Root, Path=Visibility}" EqualTo="Hidden"/>
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="Visible">
                    <VisualState.Storyboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Opacity"
                                             From="0" To="1.0" Duration="0:0:1" />
                        </Storyboard>
                    </VisualState.Storyboard>
                    <VisualState.StateTriggers>
                        <windowsStateTriggers:EqualsStateTrigger Value="{Binding ElementName=Root, Path=Visibility}" EqualTo="Visible"/>
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>

问题正在尝试使用“可见性”触发。使用上面的代码，当第一次使控件可见时，整个应用程序暂停一秒钟，然后运行淡入淡出动画。然后，在随后的可见性更改中，动画将不再运行。

我猜测问题出在EqualsStateTrigger，因为使用内置AdaptiveTrigger并具有任意窗口大小，我可以触发所有问题。

问题：

我应该在这里使用什么触发器？
是否可以通过Page XAML更改此组的VisualState？
是否有其他方法不需要重写控制模板？我知道对于WPF，SciChart有一个Transistionz库，但是找不到UWP库。

Answer 1

（请参阅最后的更新）

要回答我自己的问题，上述代码的主要问题是绑定。它应该是{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Visibility}。而且，“隐藏”视觉状态不是必需的。例如

 <VisualStateGroup x:Name="VisibilityStates"><VisualState x:Name="Visible">
                <VisualState.Storyboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Opacity"
                                         From="0" To="1.0" Duration="0:0:1" />
                    </Storyboard>
                </VisualState.Storyboard>
                <VisualState.StateTriggers>
                    <windowsStateTriggers:EqualsStateTrigger Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Visibility}" EqualTo="Visible"/>
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>

此方法涉及编辑控制模板。如果您不想这样做，可以将VisualStateGroup放在第一个Grid元素下（它不能直接在Page下使用），并针对不同的按钮和触发器设置多个动画置于其他按钮的可见性所依赖的控制之下。例如。

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="MultiSelect">
            <VisualState x:Name="Checked">
                <VisualState.Storyboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="buttonSelectAll" Storyboard.TargetProperty="Opacity"
                                         From="0" To="1.0" Duration="0:0:0.3" />
                        <DoubleAnimation Storyboard.TargetName="buttonClearAll" Storyboard.TargetProperty="Opacity"
                                         From="0" To="1.0" Duration="0:0:0.3" />
                    </Storyboard>
                </VisualState.Storyboard>
                <VisualState.Setters>
                    <Setter Target="buttonSelectAll.Visibility" Value="Visible" />
                    <Setter Target="buttonClearAll.Visibility" Value="Visible" />
                </VisualState.Setters>
                <VisualState.StateTriggers>
                    <windowsStateTriggers:EqualsStateTrigger Value="{Binding ElementName=buttonSelect, Path=IsChecked}" EqualTo="True"/>
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

更新

这也可以通过Windows Community Toolkit通过CompositionAnimations

实现

当能见度发生变化时，UWP按钮会淡入，使用什么触发器？

1 个答案: