Detailed review

Last time we looked at the use of basic controls and common properties, such as TextBlock Button, and explained how controls are aligned.

This text

  • What is adaptive?

    Adaptive is when your software interface becomes larger or smaller, the layout of the software changes with it, rather than being partially obscured.

⭐ take a chestnut for everyone to understand:

To recap:

Grids can be branched and sorted, and containers such as grids can be nested

I wrote a code where I split a Grid into two columns, with a Grid with a blue background in the left column and a Grid with a brown background in the right column (although it doesn’t look brown) as follows:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <Grid Background="Blue"/>

    <Grid Background="Brown" Grid.Column="1"/>
</Grid>
Copy the code

The renderings are as follows:

If, however, I want it to look like this when the window width is less than one value:

At this point, we introduce VisualState and AdaptiveTrigger!

Our next idea is to divide the main Grid into two rows and two columns. Assume that when the width of the software window is larger than 800px, the two small grids in the middle occupy one column on the left and right, and span two rows at the same time. When the software window is smaller than 800px, the two small grids in the middle occupy the next row and span the two columns simultaneously.

Remember:

RowSpan and ColumnSpan can be used to span multiple rows

  1. The Grid is divided into two rows and two columns, and the window is smaller than 800px.

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

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Background="Blue" Grid.ColumnSpan="2"/>

        <Grid Background="Brown" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>
Copy the code

  2. Next we introduce the VisualStateManager, the complete code is as follows:

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Background="Blue" Grid.ColumnSpan="2"/>

        <Grid Background="Brown" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>
Copy the code

  3. Then add AdaptiveTrigger to

    with the syntax as follows:

    <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Copy the code

    MinWindowWidth indicates the critical value of your software window, which triggers an event if it is greater than this value. There are several AdaptiveTrigger options that you can check out.

  4. So we’re going to write the Setter, and as the name implies, we’re going to fire an event, so what are we going to do? Of course we’re going to do it! The code is as follows:

    <VisualState.StateTriggers>
     <AdaptiveTrigger MinWindowWidth="800"/>
</VisualState.StateTriggers>

<VisualState.Setters>
                        
</VisualState.Setters>
Copy the code

  5. Now, we should be writing Setters inside Setters, but we’re basically telling the compiler that we’re going to do something with this Grid, but the compiler doesn’t know which Grid you’re talking about, so we’re going to name the Grid, Through the Name property. The code is as follows:

    <Grid Name="Grid1" Background="Blue" Grid.ColumnSpan="2"/>
<Grid Name="Grid2" Background="Brown" Grid.Row="1" Grid.ColumnSpan="2"/>
Copy the code

    I’ll call them Grid1 and Grid2, you can call them whatever you like, but please use more distinguishable names for official development!

  6. Then, we can write the Setter, complete as follows:

    <VisualState.Setters>
    <Setter Target="Grid1.(Grid.ColumnSpan)" Value="1"/>
    <Setter Target="Grid1.(Grid.RowSpan)" Value="2"/>
    <Setter Target="Grid2.(Grid.Row)" Value="0"/>
    <Setter Target="Grid2.(Grid.Column)" Value="1"/>
    <Setter Target="Grid2.(Grid.RowSpan)" Value="2"/>
</VisualState.Setters>
Copy the code

    Where Value stands for the Value that we set the corresponding attribute to. These lines of code represent the following meanings:

    When the window size is greater than 800 px:

    • Change the column for Grid1 from two rows across to one row
    • Change the rows for Grid1 from the same row to two
    • Place Grid2 on the first row of the big Grid
    • Place Grid2 in the second column of the big Grid
    • Change the row for Grid2 from two rows across to one

    ** Note: ** I didn’t change the position of Grid1’s rows and columns in the big Grid because I didn’t set it earlier, so it defaults to row 1 and column 1, whereas in the context of this topic we only need to change its RowSpan and ColumnSpan.

  7. Finally, compile!

    Discovery realized what we wanted!!

Problem sets

Below is a simple UWP software I developed before. Its main interface will change with the change of window width, as shown below:

The image above shows what the window looks like when the width is less than 820px.

The image above shows what the window looks like when it is larger than 820px.

Let’s simplify the above complex interface as a few Grid, and then operate it, go and have a try!

conclusion

Through this lesson, you have a preliminary understanding of adaptive layout writing. The problem sets are a little bit more difficult, but the general idea is exactly the same. In the next article, we will talk about page navigation.

See you next!