xaml – UserControl中的UWP VisualStates

我很难理解如何正确使用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始终为null.看起来我的视觉状态从来没有被“连接”到UserControl.这不是为UserControls定义Visual States的正确方法吗？

解决方法

如果要在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>

结果：

xaml – UserControl中的UWP VisualStates

解决方法

猜你在找的Windows相关文章