不同的屏幕和不同的视图 [英] different screen and different view

问题描述

我想在 UWP 中拥有不同屏幕的不同视图，例如我在 UWP 应用中有一个包含三列的网格，在三列内有两个文本框和按钮或其他控件.我想根据屏幕大小更改网格的列和行.当屏幕尺寸超过 1000 时，网格将变为一排三列.大于600时为两排，或为三排.

解决方案

在 UWP app 中，如果你想根据不同的屏幕尺寸显示不同的内容/视图，我们可以使用

I want to have a different view with different screen in UWP, For example I have a grid with three columns in UWP app, inside the three columns it has two textboxes and button or other control. I want to change the Grid's column and row based on the screen size. When the screen size is more than 1000, the grid will have one row with three columns . when is more than 600 it will have two row, or it will have three row.

解决方案

In UWP app, if you want to show different content/view based on the different screen size, we can use the AdaptiveTrigger to implement the adaptive UI.

The AdaptiveTrigger class has only two parameters: MinWindowWidth and MinWindowHeight. These two parameters allow us to switch state of window based on the different screen size.

For the detailed information, please check: https://blogs.msdn.microsoft.com/cdndevs/2015/06/26/uwp-new-features-of-visual-state-manager-part-1/ .

In order to implement your scenario, I have created the following example, please try to refer to:

<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>

The result:

这篇关于不同的屏幕和不同的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！