UI Features - Layouts

StackLayout

Information:

StackLayout is the default Container layout and the default setting for StackLayout is top to bottom. This means a default Container will "stack" the elements within it top to bottom. However StackLayout has properties that allow for other orders of "stacking."

Typical "StackLayout":

 
//This Container will show the Label above the Button and the Button above the TextField:
Container {
        layout: StackLayout {
            orientation: LayoutOrientation.TopToBottom
        }
        Label {
            text: "Label"
        }
        Button {
            text: "Button"
        }
        TextField {
            text: "TextField"
        }
    }
 
//This Container will show the Label to the left of Button and the Button to the left of the TextField:
    Container {
        layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight
        }
        Label {
            text: "Label"
        }
        Button {
            text: "Button"
        }
        TextField {
            text: "TextField"
        }
    }
 
//This Container will show the Label to the right of Button and the Button to the right of the TextField:
    Container {
        layout: StackLayout {
            orientation: LayoutOrientation.RightToLeft
        }
        Label {
            text: "Label"
        }
        Button {
            text: "Button"
        }
        TextField {
            text: "TextField"
        }
    }
 
//This Container will show the Label below the Button and the Button below the TextField. 
//Additionally the elements will be aligned to the Bottom of the Container:
    Container {
        layout: StackLayout {
            orientation: LayoutOrientation.BottomToTop
        }
        Label {
            text: "Label"
        }
        Button {
            text: "Button"
        }
        TextField {
            text: "TextField"
        }
    }
 

Examples/Tutorials Using This Feature:

**Coming Soon**