Development of Windows 10 UWP and Windows 10 UWP
Windows 10 UWP development-responsive design
This article briefly discusses the feasible methods and tips for developing a Windows10 Universal App layout that adapts to different resolutions and aspect ratios. The experience has been summarized from practice. There may be many imperfections and limitations. You are welcome to strictly correct them. In addition, this article is just a reference, hoping to gain more practical experience.
Necessity of self-adaptationAfter talking about this, we may first ask, why is responsive design required? The reasons are as follows:
Cross-platform performance of Windows 10Windows 10 is an operating system that Microsoft claims to be able to run on PCs, tablets, mobile phones, Xbox, and many other platforms. Of course, this is also the origin of the word "universal. If you want your applications to be confined to a platform, it is necessary to make some responsive la S.
The container window size of Win10 UWP can be customized. Even if your application is only for windows rt tablet users, win10's new uwp processing method also prevents developers from adapting to resolutions. Application store applications of Win8.1 and Win10 respectively:
It is not difficult to find that, in order to enhance the practicality of the store app, The uwp In the desktop environment can customize the window size. In order to prevent applications from being easily compromised by users, it is quite necessary to organize and organize the appearance.
Let's take a look at the methods that can be used for responsive design.
Self-Adaptive Layout Method and webpage design class comparison I don't know how many readers have experience with html + css layout. Although this set of things is not perfect in layout, it is easy to use and can make the webpage layout have basic and good adaptability.
So here I will first talk about the difference and connection between the browser layout and the XAML layout. The good news is that, in a word, almost everything HTML can do and XAML can do. Specifically, several common methods of webpage layout in xaml are implemented as follows:
That is, there is no layout... This method is sufficient for presenting simple content (such as this blog. Just like the following code model
<!DOCTYPE html>
<html>
<body>
<p style="font-size:70px">I am title</p>
<div style="width:100px;height:100px;background:rgb(230,230,250);display:inline-block;"></div>
<span style="font-size:30px">Inline text</span>
<div style="font-size:32px">
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
</div>
</body>
</html>
All elements are arranged from top to bottom, left to right, and those that cannot be arranged will enter the next line. The effect is very simple to implement using HTML. Since most html elements are inline, they can be arranged directly from top to bottom.
In XAML, things are a bit more troublesome, because all elements float on the interface without being occupied, so you need the help of other controls: Grid can be used to arrange elements from top to bottom, and stackpanel can be used for elements in the same row arrangement. If you need more responsive layouts, such as automatic line wrapping when the width is not enough, you need to cooperate with ListView and ItemsWrapGrid for layout. The detailed code model is shown below, which is very simple, so I won't go into details.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Orientation="Vertical" Margin="70,70,70,10">
<TextBlock Text="I am title." FontSize="70"/>
<StackPanel Orientation="Horizontal">
<Grid Background="Lavender" Width="100" Height="100"/>
<TextBlock Text="Inline text." VerticalAlignment="Bottom" FontSize="30"/>
</StackPanel>
<TextBlock Text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog." TextWrapping="Wrap" FontSize="32"/>
</StackPanel>
</Grid>
Absolute Dafa
There is a saying called constant change.
No matter what the circumstances, this layout method is wild and common: fixed page size at design time, layout each element according to a fixed position, if the frame is too small, use the scroll bar to browse, the frame is too large, then automatically centered. Reflected in html, it is the ubiquitous position: absolute.
The advantage of this is that it is convenient to design, can reproduce the designer's design to the greatest extent (or not at all bad), and saves workload (for example, for a computer designing a 1366x768 layout, the overall window size is common). The disadvantages are obvious: lack of flexibility and user-friendliness, so it only applies to specific services.
<div style="width:500px;height:500px;background:rgb(230,230,250);position:relative;">
<div style="width:130px;height:130px;background:#332CC7;position:absolute;left:20px;top:20px;">
</div>
<div style="width:310px;height:310px;background:#4CA5FF;position:absolute;left:170px;top:170px;">
</div>
<div style="width:310px;position:absolute;left:170px;top:75px;font-size:28px;">
The quick brown fox jumps over the lazy dog.
</div>
<div style="width:150px;position:absolute;left:20px;top:170px;font-size:28px;">
The quick brown fox jumps over the lazy dog.
</div>
</div>
UWP uses the Canvas control to achieve absolute layout, and its internal elements are aligned with the top using Canvas.left / Canvas.top.
<Canvas Background="Lavender" Margin="70,70,70,70" Width="500" Height="500">
<Grid Background="#FF332CC7" Width="130" Height="130" Canvas.Left="20" Canvas.Top="20">
</Grid>
<TextBlock
Canvas.Top="75" Canvas.Left="170" Width="310"
Text="The quick brown fox jumps over the lazy dog. "
TextWrapping="Wrap" FontSize="28"/>
<Grid Background="#FF4CA5FF" Width="310" Height="310" Canvas.Left="170" Canvas.Top="170">
</Grid>
<TextBlock
Canvas.Top="170" Canvas.Left="20" Width="150"
Text="The quick brown fox jumps over the lazy dog. "
TextWrapping="Wrap" FontSize="28"/>
</Canvas>
Streaming layout
Streaming layout is a very old concept in web design. The layout is broken down into blocks, and the block size and block spacing are changed according to the percentage of the overall page size to adapt to windows of different resolutions. As for the internal details of the block, it can be customized according to the content and needs.
This layout method is very simple to implement in xaml, and it is not a new thing in windows10. You only need to use * to indicate the percentage when the width and height of the grid are defined.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="90*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1" Background="Lavender">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="64*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Background="White">
</Grid>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="10"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" Background="White">
</Grid>
</Grid>
</Grid>
</Grid>
The effect is as follows:
XAML unique new way
XAML's own unique properties / controls can further help simplify the responsive layout and strive to avoid code.
Viewbox
Viewbox is a control that renders the objects it contains to a specified width and height. This method can be used when the layout is difficult to change and the changes that need to be adapted are not large.
Regarding the specific tips & tricks, we will introduce another log.
Rendertransform
It is a property of UIElement, which changes the object at the rendering level according to some rules, such as stretching / flipping. It should be noted that the so-called rendering level will not be aware of the properties related to the control: such as the width / height properties, will not know the pull operation on it.
For example, the following code will stretch the width and height of the Grid:
<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid Height="500" Width="450" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.RenderTransform>
<ScaleTransform x:Name="scaler"
CenterX="0.5" CenterY="0"
ScaleX="1.3"
ScaleY="1.3"
/>
</Grid.RenderTransform>
</Grid>
</Canvas>
With the canvas.left / top property and some code, it will be quite easy to make a viewbox.
RelativePanel + VisualStateManager
Both are new features introduced in Windows 10.The former is used to allow its child elements to be typeset in relative positions (attach below, attach to above, align left and right, etc.) and automatically adjust when the layout changes to ensure that they meet the given positional relationship ); The latter defines multiple sets of VisualState, each state corresponds to some property values of different controls on the page, and the property is automatically switched to the target value when the corresponding state condition is met. Combining these two points will enable responsive layout in many cases without additional C # code.
About the specific usage of this tool, it was mentioned in the previously published article 2015 Build UWP? UWP!-Build 2015? (2), it will not be repeated here.
Code dynamic adjustment
None of the above methods work well? Then use code. The trouble is a little bit more troublesome. It is the most free and customizable to use. As long as the developer has a layout goal in mind, it can meet all typography needs. However, in the process of adjusting the layout with Code, there are still some things to note:
Event-driven dynamic adjustment
Obviously, the code that adjusts the layout is event-driven instead of running all the time, so in what event? First of all, you should be able to think of SizeChanged. Yes, the SizeChanged event occurs after the size of the corresponding target changes, that is, when the event is triggered, it is guaranteed to obtain the correct width and height, so that the dynamic layout is based on the obtained data, so the code is written in the Events are the right choice. It should be noted that a change in position (such as the value of canvas.left) will not trigger this event. Another point to note is that the code written in the event cannot directly / indirectly modify its related dimensions, otherwise it will cause an avalanche effect and may bring stackoverflow.
LayoutUpdated can also be used for size change detection, but it is a more common event: the event will be triggered when the element in the layout tree changes, and the event does not specify the trigger object, if you track this event you will find that no matter what happens to the window Any changes will trigger massive LayoutUpdated events. It is not wise to write code in it.
When to Get ActualSize
In the code that dynamically lays out according to the size, it is inevitable to obtain ActualSize, but it needs to be clear that ActualSize will not take effect when the layout has just changed, and directly using this value as a benchmark will inevitably lead to errors. The solution is 2: 1. As mentioned above, write the event in SizeChanged, or rely on the event to trigger some code; 2. Forcibly call the UpdateLayout () method to update the interface synchronously, so as to guarantee the obtained after the call Actual size is real size.
to sum up
There are thousands of layout methods. This article will only briefly introduce the few places. If you need to make a truly user-friendly and responsive layout close to business needs, you need to comprehensively apply various layout methods to understand the advantages and disadvantages of each method. And its most suitable application scenarios, work together to create a good layout.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
