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

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>

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

我猜这个问题是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>

更新

这也可以通过CompositionAnimations用Windows Community Toolkit实现