扩展器

Expander 控件提供可扩展容器来托管任何内容。 该控件有两个可用于存储内容的主要属性：

头文件

此 Header 属性可以随任何视图一起提供，以支持完全自定义。 Header 将始终可见，与之交互（单击或点击）时会显示/折叠 Content。

注意

不建议将控件置于允许用户交互的标头中。

内容

这是 Header 属性与之交互（单击或点击）或修改 IsExpanded 属性时将显示的主要内容。

注意

Expander 在 iOS/MacCatalyst 上的 ListView 中不受支持，会引发 NotSupportedException。 但是，可以通过设置 public Action<TappedEventArgs>? HandleHeaderTapped { get; set; } 将其替换为自定义实现。 每次点击标头时都会执行此操作。 请注意，通过更改此操作，可能会在所有平台上收到 CollectionView 和 ListView 的不同行为。

基本用法

以下示例展示了如何使用 Expander 视图，方法是将 Header 属性设置为 Label 控件，并将 Content 设置为包含 Image 和 Label 的 HorizontalStackLayout。

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>

使用 Expander

以下示例展示了如何在 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 枚举定义以下成员：

值	说明
Down	指示 Expander 内容位于标头下。
Up	指示 Expander 内容位于标头上方。

Expander 控件还定义点击 Expander 标头时触发的 ExpandedChanged 事件。

ExpandedChangedEventArgs

包含 ExpanderIsExpanded 状态的事件参数。

属性

属性	类型​​	描述
IsExpanded	bool	确定是否已展开 Expander。

示例

可以在 .NET MAUI 社区工具包示例应用程序中找到此功能的示例。

API

可以在 .NET MAUI 社区工具包 GitHub 存储库中找到 Expander 的源代码。