Question

我想在UWP中使用不同屏幕的不同视图，例如我在UWP应用程序中有一个包含三列的网格，在三列中它有两个文本框和按钮或其他控件。我想根据屏幕大小更改Grid的列和行。当屏幕大小超过1000时，网格将有一行有三列。当超过600时，它将有两行，或者它将有三行。

Answer 1

在UWP应用中，如果您想根据不同的屏幕尺寸显示不同的内容/视图，我们可以使用AdaptiveTrigger来实现自适应UI。

AdaptiveTrigger 类只有两个参数： MinWindowWidth 和 MinWindowHeight 。这两个参数允许我们根据不同的屏幕尺寸切换窗口状态。

详细信息请查看： https://blogs.msdn.microsoft.com/cdndevs/2015/06/26/uwp-new-features-of-visual-state-manager-part-1/。

为了实现您的方案，我创建了以下示例，请尝试参考：

<Grid Background="Gray">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="ThreeColumns">
                <VisualState.Setters>
                    <Setter Target="MyTextBox1.(Grid.Column)" Value="0"></Setter>
                    <Setter Target="MyTextBox1.(Grid.Row)" Value="0"></Setter>
                    <Setter Target="MyTextBox2.(Grid.Column)" Value="1"></Setter>
                    <Setter Target="MyTextBox2.(Grid.Row)" Value="0"></Setter>
                    <Setter Target="MyButton.(Grid.Column)" Value="2"></Setter>
                    <Setter Target="MyButton.(Grid.Row)" Value="0"></Setter>
                    <Setter Target="MyButton.Content" Value="This is one Row"></Setter>
                </VisualState.Setters>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1000"></AdaptiveTrigger>
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="TwoColumns">
                <VisualState.Setters>
                    <Setter Target="MyTextBox1.(Grid.Column)" Value="0"></Setter>
                    <Setter Target="MyTextBox2.(Grid.Row)" Value="0"></Setter>
                    <Setter Target="MyTextBox1.(Grid.Column)" Value="1"></Setter>
                    <Setter Target="MyTextBox2.(Grid.Row)" Value="0"></Setter>
                    <Setter Target="MyButton.(Grid.Column)" Value="0"></Setter>
                    <Setter Target="MyButton.(Grid.Row)" Value="1"></Setter>
                    <Setter Target="MyButton.Content" Value="This is Two Row"></Setter>
                </VisualState.Setters>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600"></AdaptiveTrigger>
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid Height="500">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox Name="MyTextBox1" Grid.Row="0" Height="50"></TextBox>
        <TextBox Name="MyTextBox2" Grid.Row="1" Height="50"></TextBox>
        <Button Name="MyButton" Background="Red" Content="This is Three Row" Grid.Row="2" Height="50"></Button>
    </Grid>

结果：

不同的屏幕和不同的视图

1 个答案: