展開工具

控件 Expander 提供可擴充的容器來裝載任何內容。 控制項有兩個主要屬性可儲存您的內容：

頁首

這個 Header 屬性可以使用任何檢視來提供，以允許完整自定義。 Header一律會顯示 ，並與它互動 （按一下或點選） 會顯示/折疊 Content。

注意

不建議將控件放在允許用戶互動的標頭內。

Content

這是當屬性與其互動時，將會顯示 Header 的主要內容（已按兩下或點選），或 IsExpanded 修改屬性。

注意

Expander 在 iOS/MacCatalyst 中 ListView 不支援 ，並擲回 NotSupportedException。 不過，您可以藉由設定 public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }來取代為自定義實作。 每次點選標頭時，都會執行此動作。 請注意，藉由變更此動作，您可能會在所有平臺上收到不同的行為CollectionViewListView。

基本使用方式

下列範例示範如何使用 Expander 檢視，方法是將 屬性設定 Header 為 Label 控件，並將 Content 設定為 HorizontalStackLayout 具有 Image 和 Label 內部的 。

XAML

包含 XAML 命名空間

若要在 XAML 中使用工具組，必須將下列專案 xmlns 新增至您的頁面或檢視：

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

因此，下列專案：

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

將修改為包含 xmlns ，如下所示：

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

使用展開器

下列範例示範如何在 XAML 中新增 Expander 檢視。

<toolkit:Expander>
    <toolkit:Expander.Header>
        <Label Text="Baboon"
               FontAttributes="Bold"
               FontSize="Medium" />
    </toolkit:Expander.Header>
    <HorizontalStackLayout Padding="10">
        <Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               Aspect="AspectFill"
               HeightRequest="120"
               WidthRequest="120" />
        <Label Text="Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae."
               FontAttributes="Italic" />
    </HorizontalStackLayout>
</toolkit:Expander>

C#

下列範例示範如何在 C# 中新增 Expander 檢視。

using CommunityToolkit.Maui.Views;

var expander = new Expander
{
    Header = new Label
    {
        Text = "Baboon",
        FontAttributes = FontAttributes.Bold,
        FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label))
    }
};

expander.Content = new HorizontalStackLayout
{
    Padding = new Thickness(10),

    Children =
    {
        new Image
        {
            Source = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg",
            Aspect = Aspect.AspectFill,
            HeightRequest = 120,
            WidthRequest = 120
        },

        new Label
        {
            Text = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
            FontAttributes = FontAttributes.Italic
        }
    }
};

C# 標記

using CommunityToolkit.Maui.Views;

Content = new Expander
{
    Header = new Label()
        .Text("Baboon")
        .Font(bold: true, size: 18),

    Content = new HorizontalStackLayout
    {
        new Image()
            .Source("http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg")
            .Size(120)
            .Aspect(Aspect.AspectFill),

        new Label()
            .Text("Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.")
            .Font(italic: true)

    }.Padding(10)

}.CenterHorizontal();

屬性

屬性	類型​	描述
Command	ICommand	點選標頭時執行 Expander 。
CommandParameter	object	傳遞至 Command的參數。
Direction	ExpandDirection	定義展開器方向。
Content	IView?	定義展開時 Expander 要顯示的內容。
Header	IView?	定義標頭內容。
IsExpanded	bool	判斷是否已 Expander 展開 。 這個屬性會使用系 TwoWay 結模式，且預設值為 false。

ExpandDirection 列舉會定義下列成員：

值	Description
Down	表示 Expander 內容位於標頭底下。
Up	表示 Expander 內容在標頭上方。

控件 Expander 也會定義 ExpandedChanged 點選標頭時 Expander 引發的事件。

ExpandedChangedEventArgs

包含狀態的事件 ExpanderIsExpanded 自變數。

屬性

屬性	類型​	描述
IsExpanded	bool	判斷是否已 Expander 展開 。

範例

您可以在 .NET MAUI Community Toolkit 範例應用程式中找到這項功能的範例。

API

您可以在 .NET MAUI Community Toolkit GitHub 存放庫上找到 的Expander原始程式碼。