VisualStateManager 在使用嵌套网格控件时不会更新网格属性

Question

上下文：我想使用VisualStateManager在特定条件下将StackPanel移动到不同的网格列。

问题：似乎嵌套网格控件会阻止应用我的 VisualState 资源库。在下面的示例中(已从原始代码简化(，如果外部网格被注释掉，则 VisualState 资源库会触发，但在存在外部网格时不会触发。

问：使用嵌套网格时如何触发 VisualState 资源库？

例：

<Grid x:Name="OuterGrid">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel 
Grid.Column="0"
>
<Button 
x:Name="Button1"
HorizontalAlignment="Stretch"
Content="Button1"
/>
</StackPanel>
<StackPanel 
x:Name="Button2"
Grid.Column="2"
>
<HyperlinkButton
Height="36"
HorizontalAlignment="Stretch"
>
<TextBlock
Text="Button2"
/>
</HyperlinkButton>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ButtonAlignments">
<VisualState>
<!-- Move Button2 to the left column -->
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Button2.(Grid.Column)" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Grid>

Answer 1

需要根据文档在 XAML 树的根级别定义视觉状态。

只需将您的<VisualStateManager.VisualStateGroups>移入OuterGrid即可。我稍微更改了您的示例 - 它正在使用Visibility而不是Grid.Column：

<Grid x:Name="OuterGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ButtonAlignments">
<VisualState>
<!-- Move Button2 to the left column -->
<VisualState.Setters>
<!--<Setter Target="Button2.(Grid.Column)"
Value="0" />-->
<Setter Target="Button2.(UIElement.Visibility)"
Value="Visible" />
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="12" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Button x:Name="Button1"
HorizontalAlignment="Stretch"
Content="Button1" />
</StackPanel>
<StackPanel x:Name="Button2"
Grid.Column="2"
Visibility="Collapsed">
<HyperlinkButton Height="36"
HorizontalAlignment="Stretch">
<TextBlock Text="Button2" />
</HyperlinkButton>
</StackPanel>
</Grid>
</Grid>