xaml - 用户控件中的 UWP VisualStates

Question

我很难理解如何正确使用 UWP VisualStateManager。我定义了一个包含一些简单视觉状态的 UserControl，这是 XAML:

<UserControl
    x:Class="BingSearch.Views.UserControls.VerticalsTabHeader"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Margin="8 0 8 0"
    mc:Ignorable="d" IsTabStop="False">
    <UserControl.Resources>
        <VisualStateGroup x:Name="CommonStates">
            <VisualStateGroup.Transitions>
                <VisualTransition From="Normal" To="Minimal" 
                          GeneratedDuration="0:0:0.2">
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Normal">
            </VisualState>
            <VisualState x:Name="Minimal">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="BubbleGrid" 
                    Storyboard.TargetProperty="Opacity" From="1" To="0" />
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </UserControl.Resources>
    <StackPanel>
        <Grid x:Name="BubbleGrid">
            <Ellipse Width="60" Height="60" Fill="Black" Stroke="White" StrokeThickness="1" />
            <FontIcon
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Glyph="{Binding Glyph}"
                Foreground="White"
                FontSize="26" />
        </Grid>
    </StackPanel>
</UserControl>

在我的代码后面，当我调用VisualStateManager.GoToState(this, "Minimal", true);时或VisualStateManager.GoToState(this, "Normal", true); ， 什么都没发生。调用的返回值始终为 false，并且 CommonStates.CurrentState始终为空。似乎我的视觉状态从未“连接”到用户控件。这不是为用户控件定义视觉状态的正确方法吗？

Answer 1

如果想在UserControl中正确使用VisualStateManager，需要做以下两件事:

首先，您需要将 VisualStateGroup 包装在

<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>

之后，您需要将 VisualStateManager 放置为 UserControl 中 Root 控件的直接子级，如下所示:

<StackPanel>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualStateGroup.Transitions>
                <VisualTransition From="Normal" To="Minimal" 
                      GeneratedDuration="0:0:0.2">
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Normal">
            </VisualState>
            <VisualState x:Name="Minimal">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="BubbleGrid" 
                Storyboard.TargetProperty="Opacity" From="1" To="0" />
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid x:Name="BubbleGrid">
        <Ellipse Width="60" Height="60" Fill="Black" Stroke="White" StrokeThickness="1" />
        <FontIcon
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Glyph="{Binding Glyph}"
            Foreground="White"
            FontSize="26" />
    </Grid>
</StackPanel>

结果: