Expander

아티클
03/11/2024

컨트롤은 Expander 콘텐츠를 호스트할 수 있는 확장 가능한 컨테이너를 제공합니다. 컨트롤에는 콘텐츠를 저장할 두 가지 기본 속성이 있습니다.

이 Header 속성은 전체 사용자 지정을 허용하도록 보기와 함께 제공할 수 있습니다. 항상 Header 표시되고 상호 작용(클릭 또는 탭)이 표시되거나 축소 Content됩니다.

참고 항목

사용자 상호 작용을 허용하는 컨트롤을 헤더 내부에 배치하지 않는 것이 좋습니다.

콘텐츠

속성이 상호 작용(클릭 또는 탭)IsExpanded되거나 속성이 수정될 때 Header 표시되는 기본 콘텐츠입니다.

참고 항목

Expander 는 iOS/MacCatalyst에서 지원 ListView 되지 않으며 NotSupportedException을 throw합니다. 그러나 설정 public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }하여 사용자 지정 구현으로 바꿀 수 있습니다. 이 작업은 헤더를 탭할 때마다 실행됩니다. 이 작업을 변경하면 모든 플랫폼에서 다른 동작 CollectionViewListView 을 받을 수 있습니다.

Screenshot of an Expander in collapsed and expanded states

기본 사용법

다음 예제에서는 컨트롤로 속성을 설정 하 여 뷰를 사용 Expander 하는 Label 방법을 보여 줍니다.ImageContentHorizontalStackLayoutLabelHeader

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

속성

속성	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

.NET MAUI 커뮤니티 도구 키트 GitHub 리포지토리에서 오버에 대한 Expander 소스 코드를 찾을 수 있습니다.

Share via