VisualStateManager 未在 UWP 应用程序中设置附加属性 Grid.Row 和 Grid.ColumnSpan

Question

我正在尝试使用 Windows 10 通用应用程序项目中的 VisualStateManager 更改一些附加属性，但设置器无法正常工作。它没有设置我的 TopBarGrid 元素的附加属性。

如果您在下面查看，我使用括号表示法来更改 Grid.Row 和 Grid.ColumnSpan 属性。但是当我运行应用程序时，当我扩大宽度时没有设置属性。我期待 Grid 移动到那个位置。

这是我的代码：

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="wideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="641" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="splitView.DisplayMode" Value="Inline"/>
                    <Setter Target="splitView.IsPaneOpen" Value="True"/>
                    <Setter Target="togglePaneButton.Visibility" Value="Collapsed"/>
                    <Setter Target="appHeader.Margin" Value="0,0,0,0"/>
                    <Setter Target="PaneHeader.Margin" Value="6,12,0,0"/>
                    <Setter Target="TopBarGrid.(Grid.Column)" Value="0"/>
                    <Setter Target="TopBarGrid.(Grid.RowSpan)" Value="2"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="narrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="splitView.DisplayMode" Value="Overlay"/>
                    <Setter Target="togglePaneButton.Visibility" Value="Visible"/>
                    <Setter Target="PaneHeader.Margin" Value="60,12,0,0"/>
                    <Setter Target="searchForInfoBox.Width" Value="270"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>
        <RowDefinition x:Name="TopRowHeight" Height="80"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="60"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="TopBarGrid" Grid.Row="0" Grid.ColumnSpan="2">
        <toolbars:TopHorizontalToolBar/>
    </Grid>
    <Grid x:Name="LeftBarGrid" Grid.Column="0" Grid.RowSpan="2" Visibility="Collapsed">
        <toolbars:VerticalToolBar />
    </Grid>

Answer 1

您的代码看起来不错，但是，在这两种状态下，您都将TopBarGrid 的Row 和ColumnSpan 设置为相同 值。这就是为什么您不会看到任何变化。

尝试从一种状态中删除一组。

---

您仍然看不到任何更改的原因很可能是因为您的Setters 在您的narrowState 中有问题。

尝试以下代码，注意TopBarGrid 的行为正确。

<Grid x:Name="LayoutRoot">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="wideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="641" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TopBarGrid.(Grid.Column)" Value="0" />
                    <Setter Target="TopBarGrid.(Grid.RowSpan)" Value="2" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="narrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TopBarGrid.Background" Value="Green" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="TopRowHeight" Height="80" />
            <RowDefinition Height="*" />
            <RowDefinition Height="60" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid x:Name="TopBarGrid" Grid.Row="0" Grid.ColumnSpan="2" Background="Red" />
            <Grid x:Name="LeftBarGrid" Grid.Column="0" Grid.RowSpan="2" Visibility="Collapsed" />
    </Grid>
</Grid>

但只要我向narrowState 输入更多Setters（例如<Setter Target="PaneHeader.Margin" Value="60,12,0,0" />），它就会停止工作。我知道，PaneHeader 甚至没有在我的测试页面中定义！但它也告诉我VSM 只是出于某种原因吞下了错误。

因此，请尝试删除您的 Setters 并将它们一对一添加以找到错误的。那么这将是一个简单的修复。

Answer 2

@Ray 至于 TopBarGrid.(Grid.Column) 你必须提供 PaneHeader.(FrameworkElement.Margin)