使用 UserControl 的 Page.xaml 中的 VisualStateManager 在 UWP 应用程序中不起作用

Question

在我的 UWP 应用中，在后面的代码中

VisualStateManager.GoToState(this,"Layout2",false); 

返回假；当我在使用 UserControl 的 page.xaml 中使用 VisualStateManager xaml 块时。

这就是我的意思。这是使用用户控制的 page.xaml：

<local:MainUserControl x:Name="mainControl">
    <local:MainUserControl.QuestionContent>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="200"/>
                <RowDefinition Height="200"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>

            <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>
            <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>


            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="Layout1"/>
                    <VisualState x:Name="Layout2">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

        </Grid>

    </local:MainUserControl.QuestionContent>
</local:MainUserControl>

从代码中，我正在尝试更改布局状态。但是很遗憾做不到。

我也尝试发送“this.mainControl”而不是“this”但失败了。

VisualStateManager.GoToState(this.mainControl,"Layout2",false)

我还检查了我的命名空间两次，但无法解决这个问题。

请注意，当我删除时

<local:MainUserControl x:Name="mainControl">
<local:MainUserControl.QuestionContent> 

一切都按预期进行。

任何帮助将不胜感激。

谢谢。

编辑：这是我的 MainUserControl.xaml

<UserControl
x:Class="MyProject.Pages.MainUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyProject.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">


<Grid Background="#ededed">
    <Grid.RowDefinitions>
        <RowDefinition Height="227"/>
        <RowDefinition Height="625"/>
        <RowDefinition Height="227"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="692"/>
        <ColumnDefinition Width="1000"/>
        <ColumnDefinition Width="228"/>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Row="1" Grid.Column="1" Background="White" >

        <StackPanel x:Name="panelQuestion">
            <ContentPresenter Content="{x:Bind QuestionContent}"/>
        </StackPanel>

    </StackPanel>

</Grid>

这是我的 MainUserControl.xaml.cs

namespace MyProject.Pages
{
public sealed partial class MainUserControl : UserControl
{

    public StackPanel cPanelQuestion;

    public MainUserControl()
    {
        this.InitializeComponent();
        cPanelQuestion = this.panelQuestion;

    }

    public object QuestionContent
    {
        get { return (object)GetValue(QuestionContentProperty); }
        set { SetValue(QuestionContentProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Body.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty QuestionContentProperty =
        DependencyProperty.Register("QuestionContent", typeof(object), typeof(MainUserControl), null);



}

}

Answer 1

您需要将VisualStateManager.VisualStateGroups 作为根面板Grid 的直接子标签，如下所示：

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Layout1"/>
            <VisualState x:Name="Layout2">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imageControl" Storyboard.TargetProperty="(Grid.Column)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBoxControl" Storyboard.TargetProperty="(Grid.Column)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <local:MainUserControl x:Name="mainControl">
        <local:MainUserControl.QuestionContent>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="200"/>
                    <RowDefinition Height="200"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                </Grid.ColumnDefinitions>
                <Border x:Name="imageControl" Background="Red" Height="200" Width="200" Grid.Row="0" Grid.Column="0"/>
                <Border x:Name="richTextBoxControl" Background="Yellow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            </Grid>
        </local:MainUserControl.QuestionContent>
    </local:MainUserControl>
</Grid>

然后，在此 XAML 页面的代码隐藏中，您可以调用 VisualStateManager.GoToState(this, "Layout2", false); 来更改视觉状态。