UWP Development (9)-simple interface layout skills and screen adaptation, uwp Layout

UWP Development (9)-simple interface layout skills and screen adaptation, uwp Layout

Hey, the question is too difficult. This article mainly discusses the layout skills of pages in general, how to display elements as much as possible to achieve resolution independence. The basic idea is to set as few numbers as possible, but to use a ratio column to mark the space occupied by each element.

Here I plan to use the Yixin business card page as an example:

　　

The Phone interface looks good, with a vertical line. The top part is the title bar, And the Avatar is centered. The text below is aligned to the left in the form of a list, and the bottom part is left White. Considering that the title bar needs to be anchored at the top, it does not participate in proportional allocation. The proportion of avatar, text and white space is roughly 2.5: 4: 3. The Grid in XAML is defined as follows:

        <Grid.RowDefinitions>            <RowDefinition Height="Auto"></RowDefinition>            <RowDefinition Height="2.5*"></RowDefinition>            <RowDefinition Height="*"></RowDefinition>            <RowDefinition Height="*"></RowDefinition>            <RowDefinition Height="*"></RowDefinition>            <RowDefinition Height="*"></RowDefinition>            <RowDefinition Height="3*"></RowDefinition>        </Grid.RowDefinitions>

The advantage is that when the screen size changes, or even the aspect ratio of the screen changes, each element can be laid out in a relative position, reduces the problem of truncation or mutual coverage due to insufficient screen space.

After reading the overall vertical ratio, confirm the horizontal layout of the title bar of The 0th rows. The three elements are arranged in the order of left and right. Here is a solution:

<Grid. row = "0"> <Grid. columnDefinitions> <ColumnDefinition Width = "Auto"> </ColumnDefinition> <ColumnDefinition Width = "*"> </ColumnDefinition> <ColumnDefinition Width = "Auto"> </ColumnDefinition> </ grid. columnDefinitions> <FontIcon Grid. column = "0" Glyph = "& # xE00E;"/> <TextBlock Grid. column = "1" Style = "{StaticResource SubtitleTextBlockStyle}" HorizontalAlignment = "Left"> personal business card </TextBlock> <TextBlock Grid. column = "2" Style = "{StaticResource CaptionTextBlockStyle}" VerticalAlignment = "Center"> edit </TextBlock> </Grid>

Next, the Avatar is divided into four lines and left white at the top (when you consider the horizontal screen, the dead number of Margin takes up a lot of space), Avatar, name, and ease of signal.

<Grid. row = "1"> <Grid. rowDefinitions> <RowDefinition Height = "*"> </RowDefinition> <RowDefinition Height = "Auto"> </RowDefinition> <RowDefinition Height = "*"> </RowDefinition> <RowDefinition height = "*"> </RowDefinition> </Grid. rowDefinitions> <Ellipse Grid. row = "1" Width = "60" Height = "60"> <Ellipse. fill> <ImageBrush ImageSource = "Assets/xingzheng.jpg"> </ImageBrush> </Ellipse. fill> </Ellipse> <StackPanel Grid. row = "2" Orientation = "Horizontal" HorizontalAlignment = "Center"> <TextBlock Style = "{StaticResource SubtitleTextBlockStyle}" verticalignment = "Center"> zhengzheng </TextBlock> <FontIcon glyph = "& # xE1D1; "> </FontIcon> </StackPanel> <StackPanel Grid. row = "3" Orientation = "Horizontal" HorizontalAlignment = "Center"> <TextBlock Style = "{StaticResource BodyTextBlockStyle}" Foreground = "LightGray"> easy signal: </TextBlock> <TextBlock Style = "{StaticResource BodyTextBlockStyle}" Foreground = "LightGray"> manupstairs </TextBlock> </StackPanel> </Grid>

Here we can see that the Width and Height of the Avatar Image are dead. This is because the size of the Avatar should be the same as that of the text, rather than the size of the Avatar scaled according to the screen. It is strange to change the Avatar individually without changing the font size of the entire page.

The following list and white space are relatively simple, so we will not introduce them much. We will directly release the Phone page and compare it with the original version:

　　　　

The thumbnail is almost the same. Of course, I don't have the easy-to-use icons. I use the built-in system.

To use the Adaptive UI, you must switch to the PC mode seamlessly. You should check the original version first.

The part of the PC is still in the same layout, but because the aspect ratio is the opposite, the part of the Horizontal Self-Adaptive will pull the entire picture on the right. It is the window mode. If it is placed in full screen mode, the width on the right will increase.

　　

In this way, it is most common to achieve adaptive layout by stretching the background horizontally or vertically without changing the element size and relative position.

Our previous Code basically does not have any written numeric values, which are all in a proportional layout. So you can drag the window to see the effect without modifying it.

　　

The translation and comparison show that the effect is similar. Is this the end of this article? I used to think that Adaptive UI is generally enough. The overall layout will not change, but the details can be raised at most.

But art is not like this. They suddenly want to say that on PC, I want the following effects, the built-in system ......

　　

I want to align the PC to the left ...... To the left ...... To the left ...... At that time, I felt like my head was about to blow up. At ordinary times, my propaganda statement is "nothing cannot be done ". This Nima has to stick his head too. It's easy to think about it. Just add a layer of VisualState:

        <VisualStateManager.VisualStateGroups>            <VisualStateGroup>                <VisualState >                    <VisualState.StateTriggers>                        <AdaptiveTrigger MinWindowWidth="769" />                    </VisualState.StateTriggers>                    <VisualState.Setters>                        <Setter Target="GridRootLayout.HorizontalAlignment" Value="Left"></Setter>                        <Setter Target="GridRootLayout.VerticalAlignment" Value="Top"></Setter>                        <Setter Target="GridRootLayout.Width" Value="320"></Setter>                        <Setter Target="GridRootLayout.Height" Value="640"></Setter>                    </VisualState.Setters>                </VisualState>            </VisualStateGroup>        </VisualStateManager.VisualStateGroups>

Here, 769 is for 1520 p 6-inch machines like 1080. In common models, the maximum Width of 1520 is 768. 769 is the dividing line between mobile phones and PCs and Tablet. As shown in the following figure, the screen of the P model is copied and pasted to the upper left corner:

　　　　

As for whether it looks better than just now, art has the final say.

This is basically the case. At last, we must summarize the skills of the xaml ui layout:

The last is the conventional egg: This method supports mobile phone horizontal screen, and the original version won't work.

GayHub address:

Https://github.com/manupstairs/UWPSamples