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

Question

Context: 我想在特定条件下使用 VisualStateManager 将 StackPanel 移动到不同的 Grid 列。

问题：嵌套的 Grid 控件似乎阻止了我的 VisualState setter 的应用。在下面的示例中（已从原始代码中简化），VisualState setter 在 OuterGrid 被注释掉时触发，但在 OuterGrid 存在时不会触发。

问题：如何在使用嵌套网格时触发 VisualState setter？

示例：

<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 树的根级别定义视觉状态，as per docs。

只需将 <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>

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

VisualStateManager doesn't update Grid properties when using nested Grid controls

xaml

uwp

uwp-xaml