新增視覺控制項至 .NET MAUI 應用程式

使用 .NET MAUI 範本建立應用程式後，下一步是新增使用者介面，並實作初始 UI 邏輯。

在本單元中，您將深入了解 .NET MAUI (多平台應用程式使用者介面) 應用程式和導覽結構的建置區塊。

.NET MAUI 專案中有什麼？

為了回顧，.NET MAUI 專案一開始包含：

• MauiProgram.cs 檔案，其中包含用於建立和設定 Application 物件的程式碼。

• App.xaml 和 App.xaml.cs 檔案，其會提供 UI 資源並建立應用程式的初始視窗。

• AppShell.xaml 和 AppShell.xaml.cs 檔案會指定應用程式的初始頁面，並處理頁面的註冊以用於導覽路由。

• MainPage.xaml 和 MainPage.xaml.cs 檔案，其會針對初始視窗中預設顯示的頁面定義配置和 UI 邏輯。

您可以視需要將更多頁面新增至應用程式，也可以建立更多類別來實作應用程式所需的商務邏輯。

.NET MAUI 專案也包含一組預設的應用程式資源 (例如影像、圖示和字型)，以及每個平台的預設啟動程序程式碼。

應用程式類別

App 類別代表整體 .NET MAUI 應用程式。 其會從 Microsoft.Maui.Controls.Application 繼承一組預設行為。 回想一下前一個單元，是關於啟動程序程式碼針對每個平台具現化和載入的 App 類別。 這個 App 類別的建構函式通常會接著建立 AppShell 類別的執行個體，並將其指派給 MainPage 屬性。 是這個程式碼根據 AppShell 中的定義內容控制使用者看到的第一個畫面。

App 類別也包含：

• 處理生命週期事件的方法，包括將應用程式傳送到背景時 (也就是當它不再是前景應用程式時)。

• 為應用程式建立新 Windows 的方法。 .NET MAUI 應用程式預設具有單一視窗，但您可以建立並啟動更多視窗，這對電腦和平板電腦應用程式很有幫助。

Shell

.NET 多平台應用程式 UI (.NET MAUI) 殼層提供大多數應用程式需要的基本功能，以降低應用程式開發的複雜度，包括：

• 用來描述應用程式視覺階層的單一位置。
• 常見的瀏覽使用者體驗。
• 允許瀏覽至應用程式中任何頁面的 URI 型瀏覽配置。
• 整合式搜尋處理常式。

在 .NET MAUI 殼層應用程式中，應用程式的視覺階層會在將 Shell 類別分成子類別的類別中描述。 這個類別可以包含三個主要階層式物件：

• FlyoutItem 或 TabBar。 FlyoutItem 代表飛出視窗中的一或多個項目，而且應該在應用程式的瀏覽模式需要飛出視窗時使用。 TabBar 代表底部的索引標籤列，而且應該在應用程式的瀏覽模式從底部索引標籤開始，並且不需要飛出視窗時使用。
• Tab 代表分組內容，可透過底部索引標籤導覽。
• ShellContent 代表每個索引標籤的 ContentPage 物件。

這些物件並不代表任何使用者介面，而是應用程式視覺階層的組織。 殼層會採用這些物件，並產生內容的瀏覽使用者介面。

頁面

頁面是 Shell 的 .NET MAUI 內部 .NET MAUI 中 UI 階層的根。 到目前為止，您所看到的解決方案包含名為 MainPage 的類別。 此類別衍生自 ContentPage，是最簡單且最常見的頁面類型。 內容頁面會直接顯示其內容。 .NET MAUI 也具有數個其他內建的頁面類型，包括：

• TabbedPage：用於索引標籤瀏覽的根頁面。 索引標籤式頁面包含子頁面物件；每個索引標籤各有一個。

• FlyoutPage：可讓您實作主要/詳細樣式簡報。 飛出視窗頁面包含項目清單。 當您選取項目時，顯示該項目詳細資料的檢視就會出現。

有其他頁面類型可用，而且大多用於在多重畫面應用程式中啟用不同的瀏覽模式。

檢視

內容頁面通常會顯示檢視。 檢視可讓您以特定方式擷取和呈現資料。 內容頁面的預設檢視為 ContentView，其中依原狀顯示項目。 如果您縮小檢視，項目可能會從顯示器中消失，直到您調整檢視大小為止。 ScrollView 可讓您在捲動視窗中顯示項目；如果縮小視窗，您可以向上和向下捲動以顯示項目。 CarouselView 是可捲動的檢視，其可讓使用者撥動項目集合。 CollectionView 可以從具名的資料來源擷取資料，並使用範本做為格式呈現每個項目。 還有許多其他類型的檢視也可使用。

控制項和配置

檢視可以包含單一控制項，例如按鈕、標籤或文字方塊。 (嚴格來說，檢視本身就是一種控制項，因此一個檢視可以包含另一個檢視。)不過，受限於單一控制項的使用者介面並不是很實用，因此控制項會定位在配置中。 配置會定義控制項相對彼此顯示的規則。 配置也是一種控制項，因此您可以將其新增至檢視。 如果查看預設的 MainPage.xaml 檔案，您會看到這個頁面/檢視/配置/控制項階層作用中。 在這個 XAML 程式碼中，VerticalStackLayout 元素只是另一個控制項，讓您微調其他控制項的配置。

<ContentPage ...>
    <ScrollView ...>
        <VerticalStackLayout>
            <Image ... />
            <Label ... />
            <Label ... />
            <Button ... />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

用來定義配置的一些常用控制項如下：

• VerticalStackLayout 和 HorizontalStackLayout 是最佳化的堆疊配置，會在上到下或左至右的堆疊中配置控制項。 StackLayout 也可用，其有一個名為 StackOrientation 的屬性，您可以將它設定為 Horizontal 或 Vertical。 在平板電腦或手機上，於應用程式碼中修改此屬性可讓您在使用者旋轉裝置時調整顯示器：

  

• AbsoluteLayout，這可讓您設定控制項的確切座標。

• FlexLayout，這類似於 StackLayout，但其可讓您在其包含的子控制項無法容納於單一資料列或資料行時，包裝這些控制項。 此配置也提供對齊和適應不同螢幕大小的選項。 例如，在垂直排列時，FlexLayout 控制項可以將其子控制項靠左、靠右或置中對齊。 水平對齊時，您可以將控制項左右對齊以確保間距平均。 您可以在 FlexLayout 內使用水平 ScrollView，以顯示可水平捲動的圖文框系列 (每個圖文框本身可以是垂直排列的 FlexLayout)：

  

• Grid，根據您設定的資料行和資料列位置來配置其控制項。 您可以定義資料行和資料列大小以及範圍，因此格線版面配置不一定會有「棋盤式外觀」。

下圖概括這些常見版面配置類型的重要屬性：

所有控制項都有屬性。 您可以使用 XAML (Extensible Application Markup Language) 來設定這些屬性的初始值。 在許多情況下，您可以在應用程式的 C# 程式碼中修改這些屬性。 例如，程式碼若在預設 .NET MAUI 應用程式中處理 [按我] 按鈕的 Clicked 事件，看起來像這樣：

int count = 0;
private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

此程式碼會修改 Text 頁面中 CounterBtn 控制項的屬性。 您甚至可以在程式碼中建立完整頁面、檢視和配置；您不必使用 XAML。 例如，請考慮頁面的下列 XAML 定義：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Phoneword.MainPage">

    <ScrollView>
        <VerticalStackLayout>
            <Label Text="Current count: 0"
                Grid.Row="0"
                FontSize="18"
                FontAttributes="Bold"
                x:Name="CounterLabel"
                HorizontalOptions="Center" />

            <Button Text="Click me"
                Grid.Row="1"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

C# 中的對等程式碼看起來像這樣：

public partial class TestPage : ContentPage
{
    int count = 0;
    
    // Named Label - declared as a member of the class
    Label counterLabel;

    public TestPage()
    {       
        var myScrollView = new ScrollView();

        var myStackLayout = new VerticalStackLayout();
        myScrollView.Content = myStackLayout;

        counterLabel = new Label
        {
            Text = "Current count: 0",
            FontSize = 18,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(counterLabel);
        
        var myButton = new Button
        {
            Text = "Click me",
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(myButton);

        myButton.Clicked += OnCounterClicked;

        this.Content = myScrollView;
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;
        counterLabel.Text = $"Current count: {count}";

        SemanticScreenReader.Announce(counterLabel.Text);
    }
}

C# 程式碼更詳細，但是會提供額外的彈性，讓您動態地調整 UI。

若要在應用程式開始執行時顯示此頁面，請將 TestPage 中的 AppShell 類別設定為主要 ShellContent：

<ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:TestPage}"
        Route="TestPage" />

調整配置

在控制項周圍新增一些「呼吸空間」很有用。 每個控制項都有版面配置所遵守的 Margin 屬性。 您可以將邊界想像成將其他控制項推開的控制項。

所有配置也都有防止其任何子系靠近配置框線的 Padding 屬性。 此概念的一個思考方式是，想像所有控制項都在一個方塊中，而該方塊有鋪墊的牆。

另一個有用的空白空間設定是 Spacing 或 VerticalStackLayout 的 HorizontalStackLayout 屬性。 這會設定所有配置子系之間的空間。 此值會與控制項本身的邊界相加，因此實際空白空間會是邊界再加上間距。