different screen and different view

问题

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.

回答1:

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:

来源：https://stackoverflow.com/questions/36218200/different-screen-and-different-view