UserControl 中的 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); 时，没有任何反应。调用的 return 值始终为 false，而 CommonStates.CurrentState 始终为 null。似乎我的视觉状态从未 "hooked up" 到 UserControl。这不是为用户控件定义视觉状态的正确方法吗？

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>

结果：

UserControl 中的 UWP VisualStates

UWP VisualStates in UserControl

xaml

windows-runtime

uwp