Xamarin Forms Common Layout stacklayout detailed

Through this article you will learn about the simplest and most common layout stacklayout in Xamarin forms. As with several other layouts, the results are relatively poor, and the two layouts stacklayout and grids are currently used most in the project.

Before the previous colleague in writing Xamarin Android, chat to me that he wrote Axml layout is a drag control, which is a bit refreshing my cognitive downline, has been dragged control "historical reasons", the disadvantage is obvious, unable to master the layout of the common properties, as for Xamarin Forms can not drag the control, for the moment is not possible, the layout of the design has two ways, one is in C # code, one is in the way of XAML layout.

As the five most common layouts in xamarin forms, this article will use one of the most commonly used layout stacklayout to make the layout of a simple calculator easy to familiarize with and master the various properties of this layout.

Stacklayout is similar to the default static positioning in LinearLayout, front-end CSS in Android, and the grid is similar to the table layout in gridlayout,html in Android.

The role of 1.StackLayout layout properties and property values

As the name implies, Stacklayout is a layout that can be stacked in the upper and lower directions, the left and right direction, simple and common layout, we need to master its three important properties, the most important is the layout direction and layout positioning.

• Orientation: The layout direction, enumeration type, which represents the layout of stacklayout in which direction, Vertical (vertical layout) and
  Horizontal (horizontal layout), and the default value is Vertical.
The
• Spacing:d ouble type, which represents the gap between each child view, the default value 6.0.
• verticaloptions and Horizontaloptions: Layout positioning (You can locate and set the layout element size), the property has a property value of 8
  1. start: At the beginning of the parent layout
  2. Cente R: In the middle of the parent layout
  3. end: At the last position of the parent layout
  4. Fill: Fills the location of the entire parent layout
  5. Startandexpand, Centerandexpand, Endandexpand, Fi Llandexpand, this band Andexpand function is: Depending on the content size of other layouts, if there is a blank position will be automatically populated. When multiple attribute values are Andexpand, a blank section is split.
     go directly to the layout to see how these properties are used.
     

<?xml version= "1.0" encoding= "Utf-8"? ><contentpage xmlns= "Http://xamarin.com/schemas/2014/forms" xml             ns:x= "Http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local= "Clr-namespace:xamarinformslayout" x:class= "Xamarinformslayout.mainpage" > <stacklayout orientation= "Vertical" > <stacklayout Orientatio            N= "Vertical" backgroundcolor= "Accent" verticaloptions= "Fillandexpand" padding= "ten" > <label text= "I'm on the left" Heightrequest= "widthrequest=" horizontaloptions= "Start" verticaloptions= "S            Tart "backgroundcolor=" AliceBlue "textcolor=" Black "verticaltextalignment=" Center "/> <label text= "I'm on the right" horizontaloptions= "End" verticaloptions= "End" backgroundcolor= "AliceBlue" textcolor= "Black" verticaltextalignment= "Center"/> </StackLayout> & Lt Stacklayout Orientation= "Horizontal" backgroundcolor= "Aquamarine" verticaloptions= "Start" heightrequest= ">" <label horizonta loptions= "Start" verticaloptions= "Centerandexpand" text= "I'm on the left" textcolor= "Black" backgroundcolor= "Azure" ></ label> <label horizontaloptions= "Fillandexpand" verticaloptions= "Centerandexpand" Text= "Occupy Middle position" TextColo R= "Black" backgroundcolor= "Azure" ></Label> <label horizontaloptions= "End" verticaloptions= "Centeran Dexpand "text=" I'm on the right "textcolor=" Black "backgroundcolor=" Azure "></Label> </StackLayout> <s Tacklayout orientation= "Vertical" backgroundcolor= "Accent" padding= "ten" verticaloptions= "Fillandexpand" > & lt;!              --place new controls----<label text= "I'm at the top, highly divided" horizontaloptions= "Startandexpand"               verticaloptions= "Fillandexpand" backgroundcolor= "Red"/> <label text= "I'm in the middle, highly divided." Horizontaloptions= "Fillandexpand" verticaloptions= "Fillandexpand" backgroundcolor= "Red"/> <la Bel text= "I'm at the bottom" horizontaloptions= "Fillandexpand" verticaloptions= "Endandexpand" B Ackgroundcolor= "Red"/> </StackLayout> </StackLayout></ContentPage>

Directly set the height width can be used heightrequest and widthrequest;

2.StackLayout layout focus need to master 2.1 verticaloptions and Horizontaloptions and Widthrequest and Heightrequest priority relationship is what?

This is easy to confuse, and we already know that verticaloptions and horizontaloptions are used to locate and set the size, Widthrequest and heightrequest are double types and can only be used to set the size of the control. When all of these four properties are set, the result is what happens.

The height of the two sub-stacklayout 50%, we found that * * options and **request attribute values defined by the size of who is the main value.

2.2 Setting the width widthrequest (height heightrequest) in the vertical direction (horizontal direction) is not valid,

3.StackLayout implementation of a simple calculator layout

The code is as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><contentpage xmlns= "Http://xamarin.com/schemas/2014/forms" xml ns:x= "Http://schemas.microsoft.com/winfx/2009/xaml" x:class= "Xamarinformslayout.calculatorpage" Ba Ckgroundcolor= "#808080" > <ContentPage.Resources> <ResourceDictionary> <style x:key= "DefaultButton" targettype= "button" > <setter property= "backgroundcolor" value= "Black" ></setter&                Gt <setter property= "TextColor" value= "#dedede" ></Setter> </Style> </resourcedictionar y> </ContentPage.Resources> <stacklayout orientation= "Vertical" spacing= "ten" verticaloptions= "End" Padd ing= "> <frame backgroundcolor=" White "heightrequest=" + margin= "0,0,0,20" > <label text= " 0 "verticaloptions=" Center "horizontaloptions=" End "textcolor=" Black "fontsize="/> </Frame> <st AckLaYout orientation= "Vertical" > <stacklayout orientation= "Horizontal" spacing= "ten" > < Stacklayout orientation= "Vertical" horizontaloptions= "Fillandexpand" > <button text= "Clear" heightre Quest= "style=" {StaticResource DefaultButton} "/> <stacklayout orientation=" Horizontal "heightr equest= > <button horizontaloptions= "Fillandexpand" text= "7" style= "{StaticResource Def Aultbutton} "/> <button horizontaloptions=" Fillandexpand "text=" 8 "style=" {StaticResource Def Aultbutton} "/> <button horizontaloptions=" Fillandexpand "text=" 9 "style=" {StaticResource De Faultbutton} "/> </StackLayout> <stacklayout orientation=" Horizontal "He ightrequest= "> <button horizontaloptions=" Fillandexpand "text=" 4 "style=" {StaticResource   DefaultButton} "/>                     <button horizontaloptions= "Fillandexpand" text= "5" style= "{StaticResource DefaultButton}"/>                    <button horizontaloptions= "Fillandexpand" text= "6" style= "{StaticResource DefaultButton}"/>                        </StackLayout> <stacklayout orientation= "Horizontal" heightrequest= ">"                         <button horizontaloptions= "Fillandexpand" text= "1" style= "{StaticResource DefaultButton}"/>                         <button horizontaloptions= "Fillandexpand" text= "2" style= "{StaticResource DefaultButton}"/> <button horizontaloptions= "Fillandexpand" text= "3" style= "{StaticResource DefaultButton}"/&gt                    ;                        </StackLayout> <stacklayout orientation= "Horizontal" heightrequest= ">"                      <button horizontaloptions= "Fillandexpand" text= "0" style= "{StaticResource DefaultButton}"/>  <button horizontaloptions= "Fillandexpand" text= "."                Style= "{StaticResource DefaultButton}"/> </StackLayout> </StackLayout> <stacklayout orientation= "Vertical" widthrequest= "$" > <button text= "÷" HEIGHTR Equest= "style=" {StaticResource DefaultButton} "/> <button text=" * "heightrequest=" style= "{ StaticResource DefaultButton} "/> <button text=" + "heightrequest=" "style=" {StaticResource Defau                    Ltbutton} "/> <button text="-"heightrequest=" "style=" {StaticResource DefaultButton} "/> <button text= "=" heightrequest= "style=" {StaticResource DefaultButton} "/> </stac klayout> </StackLayout> </StackLayout> </StackLayout></ContentPage>

4. Summary

The layout of Xamarin forms is based on the idea of WPF, and the four directions of padding and margin are in the lower left and bottom right, which is somewhat different from the lower right left in the four directions of Android and front-end CSS.
Common layouts for me personally, stacklayout and grid are the most extensive and simple to use, and several other layouts are relatively complex to write and have relatively poor results.

Xamarin Forms Common Layout stacklayout detailed