Question

我正在XAML中使用VisualStateManager通过使用ColumnDefinition和RowDefinition x:Name属性来指定网格列/行的宽度/高度的更改。我读过here，这是有可能的...但是Visual Studio提示“未能找到名为_____的元素”，并发出警告，并且网格行的状态更改不起作用（用于更改行/列分配的设置器正确触发，所以我知道VisualStateManager总体上可以正常工作。

预期的效果是使内容在宽屏状态下垂直准确地占据屏幕（没有垂直滚动），并且每个块位于不同的列中。然后，在窄状态下，内容将重排为全部位于同一列但不同的行（因此垂直堆叠），因此必须进行垂直滚动（在宽状态下内容也将从固定宽度改变，拉伸以占据狭窄状态下的窗口宽度。

我的代码如下：

<Page>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ContentBlockA.(Grid.Column)" Value="0"></Setter>
                        <Setter Target="ContentBlockB.(Grid.Column)" Value="0"></Setter>
                        <Setter Target="ContentBlockC.(Grid.Column)" Value="0"></Setter>
                        <Setter Target="ContentBlockA.(Grid.Row)" Value="2"></Setter>
                        <Setter Target="ContentBlockB.(Grid.Row)" Value="1"></Setter>
                        <Setter Target="ContentBlockC.(Grid.Row)" Value="0"></Setter>
                        <Setter Target="ContentRowZero.Height" Value="Auto"></Setter>
                        <Setter Target="ContentColumnZero.Width" Value="*"></Setter>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Wide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="900"></AdaptiveTrigger>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!-- Empty setters defaults to the layout specified in XAML below. -->
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <ScrollViewer>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="ContentColumnZero"
                                      Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition x:Name="ContentRowZero"
                                   Height="*"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>

                <Grid Name="ContentBlockA"
                      Grid.Column="0">
                    <!-- Content here -->
                </Grid>

                <Grid Name="ContentBlockB"
                      Grid.Column="1">
                    <!-- Content here -->
                </Grid>

                <Grid Name="ContentBlockC"
                      Grid.Column="2">
                    <!-- Content here -->
                </Grid>
            </Grid>
        </ScrollViewer>
    </Grid>
</Page>

UWP Visual State Manager更改网格行高

0 个答案: