다음을 통해 공유


Expander

컨트롤은 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 소스 코드를 찾을 수 있습니다.