如何在VisualStates中添加项目和更改行/列定义？

Question

我正在创建一个Windows 10通用应用程序。当然，它应该可以在许多设备上工作。在这个例子中，它是一个5英寸的手机和一个23英寸的台式机。我现在已经完成了桌面的xaml内容。在桌面上，我有一个名为mainGrid的网格。此网格具有列和行定义。

现在我的问题是:在5“模式下，我当然需要一个ScrollViewer，整个网格和行的定义是不同的(我知道如何更改值，但不知道如何集成新元素和如何更改定义)。在手机视图中，我需要3列。中间的一列比边上的两列大6倍。

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="_5__Phone">
                <VisualState.Setters>
          //   TODO?
                </VisualState.Setters>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="_23__Desktop">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowHeight="400" MinWindowWidth="800"/>
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Frame Name="mainFrame">
        <Grid x:Name="mainGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="3*" />
                <RowDefinition Height="0.2*" />
                <RowDefinition Height="0.5*" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
            </Grid.ColumnDefinitions>

谢谢你的帮助。

                        <Setter Target="mainGrid.(Grid.RowDefinition)" Value="1*"/>

试过了，但不起作用。

Answer 1

如果我正确理解了您的桌面布局，您在桌面上有4个列区域，每个区域都具有相同的宽度，并且彼此之间以0.1*空间分隔。现在你想在手机上有3个区域，中间的一个比边上的两个大6倍。

然后，您可以将网格划分为17个部分，并使用VisualState，例如：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="_5__Phone">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="grid1.Grid.Column" Value="1" />
                    <Setter Target="grid1.Grid.ColumnSpan" Value="1" />
                    <Setter Target="grid2.Grid.Column" Value="3" />
                    <Setter Target="grid2.Grid.ColumnSpan" Value="11" />
                    <Setter Target="grid3.Grid.Column" Value="15" />
                    <Setter Target="grid3.Grid.ColumnSpan" Value="1" />
                    <Setter Target="grid4.Grid.Column" Value="16" />
                    <Setter Target="grid4.Grid.ColumnSpan" Value="1" />
                    <Setter Target="grid4.Visibility" Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="_23__Desktop">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowHeight="400" MinWindowWidth="800" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="grid1.Grid.Column" Value="1" />
                    <Setter Target="grid1.Grid.ColumnSpan" Value="3" />
                    <Setter Target="grid2.Grid.Column" Value="5" />
                    <Setter Target="grid2.Grid.ColumnSpan" Value="3" />
                    <Setter Target="grid3.Grid.Column" Value="9" />
                    <Setter Target="grid3.Grid.ColumnSpan" Value="3" />
                    <Setter Target="grid4.Grid.Column" Value="13" />
                    <Setter Target="grid4.Grid.ColumnSpan" Value="3" />
                    <Setter Target="grid4.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Frame Name="mainFrame">
        <Grid x:Name="mainGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="3*" />
                <RowDefinition Height="0.2*" />
                <RowDefinition Height="0.5*" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="0.1*" />
            </Grid.ColumnDefinitions>

            <Grid x:Name="grid1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red"></Grid>
            <Grid x:Name="grid2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Blue"></Grid>
            <Grid x:Name="grid3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Green"></Grid>
            <Grid x:Name="grid4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Yellow"></Grid>
        </Grid>
    </Frame>
</Grid>

我拿了4个Grid来代表4个区域，你可以继续在这些Grid中设计你的布局。