Question

我无法让VisualStateManager在自定义ContentDialog中切换状态。我已经包含了一个自包含的示例，其中XAML页面定义了两个具有不同颜色的矩形和一些视觉状态来调整两个矩形的可见性。我们的想法是，当按下按钮时，之前看不见的矩形现在可见。然而，实际发生的是VisualStateManager::GoToState()返回false并且没有发生视觉状态变化。

我在这里做了一些明显错误的事吗？我相信<VisualStateManager.VisualStateGroups>元素位于正确的位置（是根元素孩子的孩子），但我仍然无法让这种情况发挥作用。

XAML文件：

<ContentDialog
    x:Class="Test.MyContentDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    MaxWidth="750"
    MaxHeight="550"
    Background="Black">

    <Grid Width="500" Height="210" Margin="0,25,0,0">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="BlueVisibleState">
                    <VisualState.Setters>
                        <Setter Target="BlueRect.Visibility" Value="Visible" />
                        <Setter Target="RedRect.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="RedVisibleState">
                    <VisualState.Setters>
                        <Setter Target="BlueRect.Visibility" Value="Collapsed" />
                        <Setter Target="RedRect.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Rectangle x:Name="BlueRect" Width="50" Height="50" Fill="Blue" />
        <Rectangle x:Name="RedRect" Width="50" Height="50" Fill="Red" />

        <Button Content="Change Style" Width="500" Height="30" HorizontalAlignment="Center" VerticalAlignment="Bottom" Click="Button_Click"/>
    </Grid>
</ContentDialog>

代码隐藏：

namespace Test
{

MyContentDialog::MyContentDialog()
{
    InitializeComponent();
    VisualStateManager::GoToState(this, BlueVisibleState->Name, false);
}

void MyContentDialog::Button_Click( Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e )
{
    VisualStateManager::GoToState(this, RedVisibleState->Name, true);
}

} // namespace Test

Answer 1

我使用您的代码进行了演示并重现了问题。似乎VisualStateManager.GoToState不适用于内容对话框。

但它在UserControl中效果很好。因此，作为一种变通方法，您可以创建一个新的用户控件并将其与内容对话框一起打包：

新用户控件xaml（RootDialogControl.xaml）：

<UserControl
    x:Class="VisualStatesSampleCpp.RootDialogControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:VisualStatesSampleCpp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="BlueVisibleState">
                <VisualState.Setters>
                    <Setter Target="BlueRect.Visibility" Value="Visible" />
                    <Setter Target="RedRect.Visibility" Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="RedVisibleState">
                <VisualState.Setters>
                    <Setter Target="BlueRect.Visibility" Value="Collapsed" />
                    <Setter Target="RedRect.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <StackPanel>
        <Rectangle x:Name="BlueRect" Width="50" Height="50" Fill="Blue" />
        <Rectangle x:Name="RedRect" Width="50" Height="50" Fill="Red" />
        <Button Content="Change Style" Width="500" Height="30" HorizontalAlignment="Center" VerticalAlignment="Bottom" Click="Button_Click"/>
    </StackPanel>
</Grid>

代码隐藏（RootDialog.xaml.cpp）：

RootDialogControl::RootDialogControl()
{
    InitializeComponent();
    VisualStateManager::GoToState(this, BlueVisibleState->Name, false);
}


void VisualStatesSampleCpp::RootDialogControl::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    VisualStateManager::GoToState(this, RedVisibleState->Name, false);
}

将用户控件包装在内容对话框中：

<ContentDialog
    x:Class="VisualStatesSampleCpp.RootDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:VisualStatesSampleCpp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="TITLE"
    PrimaryButtonText="Button1"
    SecondaryButtonText="Button2"
    PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
    SecondaryButtonClick="ContentDialog_SecondaryButtonClick">

<Grid Width="500" Height="210" Margin="0,25,0,0">
    <local:RootDialogControl/>
</Grid>

在ContentDialog中更改视觉状态

1 个答案: