XAML learning notes-Layout (1), xaml learning notes layout

XAML learning notes-Layout (1), xaml learning notes layout

Recently, I was interested in UWP development. After learning about it, I thought it was necessary to review the relevant content of xaml .. As a result, I took the time to collect relevant materials from the past, and made a small summary of the new xaml features .. I hope I can keep writing it .. O (distinct _ distinct) O ~

I personally think it is more appropriate to write from a relatively scattered xaml layout, which directly determines the practicality of the application, in particular, applications with various compatibility ideas of terminals and platforms highlight the importance of layout.

I still like to write more useful things in front (I feel more formal). Pay attention to the following points when considering the layout:

• It is best not to fix the positions of elements in the layout, and try to apply similarAttribute combination of control positions such as AlignmentMarginTo adjust the position of the element.
• Do not set the element width (Width) And height (Height) Attribute value.Auto. This is mainly because it is not flexible enough, and later modification is very troublesome. Instead, you can use the minimum height (MinHeight）, Maximum height (MaxHeight）, Minimum width (MinWidth) andMaximum width (MaxWidth）The four attributes specify the control element width and height range to Achieve flexible control in different layout containers.
• Do not use canvasPanel layout except to draw the specified vector image or other special requirements.
• Design layout should be as simple as possible, such as the operation button of the Design dialog box, select the simplest StackPanel.
• We recommend that you use GridPanel to design the input data form.

 

The above is an empirical discussion. It doesn't matter if you cannot understand it. You can finish learning the basic layout knowledge point and start the development stage ..

Next, we will introduce some Layout-related attributes to adjust the widget's position in the layout.

First, we will introduce two important attributes: horizontal alignment (HorizontalAlignmant) And vertical alignment (VerticalAlignment). A simple understanding is to specify the alignment of elements in the layout. The horizontal alignment mode (HorizontalAlignmant) Includes Left, Right, Center, and Strech ). Vertical alignment (VerticalAlignment) Includes Top, Bottom, and Strech ). The two attributes can be used in combination. The specific effect is as follows:

Next we need to know two common layout attributes, Margin (Margin) and Padding (Padding ). Here, Margin indicates that the outer boundary of the element is white, and Padding indicates that the Padding of the element is white. Generally, Margin attributes are commonly used. Take the button as an example. The actual effect is shown in:

<Button Content = "Margin" Margin = "10, 20, 30, 40" HorizontalAlignment = "Stretch" VerticalAlignment = "Stretch"/>

:

<Button Content = "Margin" Margin = "10, 20" HorizontalAlignment = "Stretch" verticalignment = "Stretch"/>

:

<Button Content = "Margin" Margin = "10" HorizontalAlignment = "Stretch" verticalignment = "Stretch"/>

:

 

Finally, we will briefly introduce the ScrollViewer control. In a fixed-size container, when a part of the content size exceeds the container size range, you can put it into the ScrollViewer control, through the horizontal scroll bar (HorizontalScrollBarVisibility) and vertical scroll bar (VerticalScrollBarVisibility) adjust the display content. You can useScrollbarVisibilityProperty controls whether the scroll bar is visible.

 

Write it here today. Several la s will be introduced in future articles.