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

时间:2018-05-02 22:38:37

标签: xaml uwp uwp-xaml

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

问题:似乎嵌套的Grid控件阻止了我的VisualState setter被应用。在下面的示例中(已从原始代码中简化),如果OuterGrid被注释掉,VisualState setter将触发,但在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>

1 个答案:

答案 0 :(得分:1)

您需要在XAML树的根级别as per docs定义您的Visual状态。

将您的<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>