Expander

Элемент Expander управления предоставляет расширяемый контейнер для размещения любого содержимого. Элемент управления имеет два основных свойства для хранения содержимого:

Верхний колонтитул

Это Header свойство можно предоставить с любым представлением, чтобы разрешить полную настройку. Всегда Header отображается и взаимодействует с ним (щелчок или касание) отображается или свернуто Content.

Примечание.

Не рекомендуется размещать элементы управления внутри заголовка, разрешающие взаимодействие с пользователем.

Содержимое

Это основное содержимое, показывающее, когда Header свойство взаимодействует с ним (щелчок или нажатие) или IsExpanded свойство изменяется.

Примечание.

Expander не поддерживается внутри ListView iOS/MacCatalyst и вызывает NotSupportedException. Однако его можно заменить пользовательской реализацией, задав параметр public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Это действие выполняется при каждом нажатии заголовка. Обратите внимание, изменив это действие, вы можете получить другое поведение на CollectionView всех платформах и ListView на всех платформах.

Базовое использование

В следующих примерах показано, как использовать Expander представление, задав Header свойству элемент Label управления и Content быть HorizontalStackLayout элементом управления и ImageLabel внутри.

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.

<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#

В следующем примере показано, как добавить Expander представление в C#.

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();

Свойства

Свойство	Type	Описание
Command	ICommand	Выполняется при нажатии заголовка Expander .
CommandParameter	object	Параметр, переданный в Command.
Direction	ExpandDirection	Определяет направление расширения.
Content	IView?	Определяет содержимое, отображаемое при развертывании Expander .
Header	IView?	Определяет содержимое заголовка.
IsExpanded	bool	Expander Определяет, развернут ли он. Это свойство использует режим привязки TwoWay и имеет значение falseпо умолчанию.

Перечисление ExpandDirection определяет следующие члены:

значение	Описание
Down	Указывает, что содержимое Expander находится под заголовком.
Up	Указывает, что содержимое Expander над заголовком.

Элемент Expander управления также определяет ExpandedChanged событие, которое запускается при нажатии заголовка Expander .

ExpandedChangedEventArgs

Аргумент события, содержащий ExpanderIsExpanded состояние.

Свойства

Свойство	Type	Описание
IsExpanded	bool	Expander Определяет, развернут ли он.

Примеры

Пример этой функции можно найти в действии в сообществе .NET MAUI набор средств пример приложения.

API

Исходный код Expander можно найти в репозитории сообщества .NET MAUI набор средств GitHub.