Question

我正在创建一个Windows 10 Universal App。当然它应该在许多设备上工作。在这个例子中它是一个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中设计您的布局。

如何将项添加到VisualStates并更改行/列定义？

1 个答案: