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

Question

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

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

这是我的代码：

<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 设置为 相同的 值。这就是为什么您看不到任何变化的原因。

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

您仍然看不到任何变化的原因很可能是因为您的 narrowState.

中的 Setter 有问题

尝试以下代码，注意 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 中输入更多 Setter（例如 <Setter Target="PaneHeader.Margin" Value="60,12,0,0" />），它就会停止工作。我知道，PaneHeader 甚至没有在我的测试页中定义！但它也告诉我 VSM 只是出于某种原因吞下了错误。

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

Answer 2

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

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

VisualStateManager not setting attached properties Grid.Row and Grid.ColumnSpan in UWP application

xaml

winrt-xaml

win-universal-app

windows-10-mobile

uwp