Изменение визуальных состояний в ContentDialog

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 не работает с Content Dialog.

Но он хорошо работает в 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>