Maui 教學 – Maui Stacklayout – 功能講解及實作示範

Maui Stacklayout – Maui 教學 – Stacklayout是一個排版元件,  作用是把Controls, 及其他的Layout等加進StackLayout內, 成為Children. StackLayout會把children排列起來, 其方式為把一個個的Children堆疊在layout內, 並自動把Children排序起來. 就好像起組合樓字一樣, 一層一層地把建築層加上去. 而其排版的方式有三個方向, 一個是上下 (Maui VerticalStacklayout), 一個是左右 (Maui HorizontalStacklayout). 一個為layout置中.

用Stacklayout的好處

1. 而使用StackLayout的好處在於: 在一般的Windows GUI版面, 都不會像HTML一樣, 只需在前方的Control後面加上Control的程式碼就可, 會自動排列下去.
2. WinGui大多需要輸入x, y位置. 而如果該版面語言沒有GUI Designer的話, 排版工作往往會是一件很累人的事. 在調整位置時, 程式員可能需要記下位置, Stop Debug, 再作調整, 再Running Debug. 而結果又有可能不對, 再Stop Debug, 再改, 一直至成功為止. 如此重覆下去, 必定是浪費時間, 當中的不斷重覆過程, 不但令人感到無聊, 更是一件感到令人痛苦的事.
3. Microsoft Maui提供了一個自動按上下, 左右的排版方式供大家使用, 以減少編程上工序的重覆而帶來的不便.
4. 而Stacklayout 使用方便, 最簡單的時候只輸加入Stacklayout的tag. 再放入Children便可.
5. 加上融合Maui的HotReload Function, 程式員可以在Debug 時, 更改Xaml的資料來令版面自動更新, 令排版來得更易.
6. 在StackLayout內可加其他Layout, 增加其排版的靈活性.

何時適合用StackLayout

1. 當在Children是按Sequence排序時, 會比較適合用StackLayout. 如果要有多行多列的排列, 可能比較適合用Grid.
2. 如果Control需要放在固定的地方, 可能需要用AbsoluteLayout. 作一個例子, 如有十個Control, 當中的height都不同, Entry可能有三行, 輸入相片可能大小不定, 這時候, 用Grid的Setting太多, AbsoluteLayout要Set 太多的x, y 位置, 這都不便, 而StackLayout會自動按上下排版, 這就省掉了很多功夫了.
3. 而有時候, 有些版面不需要特別客製或附加其他功能, 如只需按Class內的Property, 或 DB Table內的Column來作輸入欄, 而要的Function只有如直接把資料Insert, Update, Delete等. 這樣的話是如果想省時, 可自製Dynamic Autogenerate版面, 只需用Code就可自動生成版面, 可減少工作.

StackLayout注意事項

介紹後, 就開始準備實作了, 先說以下三件事:

1. <stacklayout orientation=”vertical”/>等如<verticalstacklayout/> 及 <stacklayout orientation=” horizontal”/>等如<horizontalstacklayout/>
2. VerticalOption 及 HorizontalOption 有值8個, Start, Center, End, Fill, StartAndExpand, CenterAndExpand, EndAndExpand, FillAndExpand. 故明其意, Start, Center, End 是指在Column/Row內的Position. Fill為填满, 而加上”AndExpand”就是指其為更多的空間.
3. Spacing參數, Children內互相邊緣的距離. Padding參數, 為StackLayout與Children們邊位的距離.

以下我們開始實作一個login版面, Let’s Start.

首先, 我們加入以下的Code

        <verticalstacklayout backgroundcolor="Gray" horizontaloptions="Start" verticaloptions="Start">
            <label text="Login Name:"></label>
            <entry></entry>
            <label text="Login Pwd:"></label>
            <entry></entry>
            <button text="Login"></button>
        </verticalstacklayout>

這等如

VerticalStackLayout layout = new VerticalStackLayout();
layout.BackgroundColor = new Color(180);
layout.HorizontalOptions = LayoutOptions.Start;
layout.VerticalOptions = LayoutOptions.Start;
this.Content = layout;

其結果

評: StackLayout太過向左及上下未能置中

所以作出以下修改

        <verticalstacklayout backgroundcolor="Gray" horizontaloptions="CenterAndExpand" verticaloptions="CenterAndExpand">
            <label text="Login Name:"></label>
            <entry></entry>
            <label text="Login Pwd:"></label>
            <entry></entry>
            <button text="Login"></button>
        </verticalstacklayout>

這等如

VerticalStackLayout layout = new VerticalStackLayout();
layout.BackgroundColor = new Color(180);
layout.HorizontalOptions = LayoutOptions.CenterAndExpand;
layout.VerticalOptions = LayoutOptions.CenterAndExpand;
this.Content = layout;
//……省略…..

其結果

評: 內裏的Children太過窄, 所以

所以作出以下修改

        <verticalstacklayout backgroundcolor="Gray" horizontaloptions="FillAndExpand" verticaloptions="CenterAndExpand">
            <label text="Login Name:"></label>
            <entry></entry>
            <label text="Login Pwd:"></label>
            <entry></entry>
            <button text="Login"></button>
        </verticalstacklayout>

這等如

layout = new VerticalStackLayout();
layout.BackgroundColor = new Color(180);
layout.HorizontalOptions = LayoutOptions.FillAndExpand;
layout.VerticalOptions = LayoutOptions.CenterAndExpand;
this.Content = layout;
//……省略…..

其結果

評: 內裏的Children間太過窄, 而且StackLayout太貼邊位, 所以

所以作出以下修改

       <verticalstacklayout spacing="10" padding="10" backgroundcolor="Gray" horizontaloptions="FillAndExpand" verticaloptions="CenterAndExpand">
            <label text="Login Name:"></label>
            <entry></entry>
            <label text="Login Pwd:"></label>
            <entry></entry>
            <button text="Login"></button>
        </verticalstacklayout>

這等如

VerticalStackLayout layout = new VerticalStackLayout();
layout.BackgroundColor = new Color(180);
layout.HorizontalOptions = LayoutOptions.FillAndExpand;
layout.VerticalOptions = LayoutOptions.CenterAndExpand;
layout.Spacing = 10;
layout.Padding = 10;
this.Content = layout;
//……省略…..

其結果

這樣就完成了!

以下為全部的Code:

<contentpage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:class="MauiApp1.MainPage">

    <scrollview>
        <verticalstacklayout spacing="10" padding="10" backgroundcolor="Gray" horizontaloptions="FillAndExpand" verticaloptions="CenterAndExpand">
            <label text="Login Name:"></label>
            <entry></entry>
            <label text="Login Pwd:"></label>
            <entry></entry>
            <button text="Login"></button>
        </verticalstacklayout>
    </scrollview>
</contentpage>

等如

namespace MauiApp1
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();

VerticalStackLayout layout = new VerticalStackLayout();
layout.BackgroundColor = new Color(180);
layout.HorizontalOptions = LayoutOptions.FillAndExpand;
layout.VerticalOptions = LayoutOptions.CenterAndExpand;
layout.Spacing = 10;
layout.Padding = 10;
this.Content = layout;
//………..
}
}
}

參考資料: https://docs.microsoft.com/en-us/dotnet/maui/