Expander

Expander コントロールは、コンテンツをホストするための展開可能なコンテナーを提供します。 コントロールには、コンテンツを格納するための主なプロパティが 2 つあります。

ヘッダー

この Header プロパティには、完全なカスタマイズを可能にする任意のビューを指定できます。 Header は常に表示され、それを操作 (クリックまたはタップ) すると、Content が表示または折りたたまれます。

Note

ユーザーの操作を許可するコントロールをヘッダー内に配置することはおすすめしません。

Content

これは、 Header プロパティが操作されたとき (クリックまたはタップ) または IsExpanded プロパティが変更されたときに表示されるメイン コンテンツです。

Note

Expander は iOS/MacCatalyst の ListView 内ではサポートされておらず、NotSupportedException をスローします。 ただし、public Action<TappedEventArgs>? HandleHeaderTapped { get; set; } を設定することで、カスタム実装に置き換えることができます。 このアクションは、ヘッダーがタップされるたびに実行されます。 このアクションを変更すると、すべてのプラットフォームで CollectionView と ListView で異なる動作を受け取る可能性があることに注意してください。

基本的な使用方法

次の例では、 Header プロパティを Label コントロールに設定し、Content を Image と Label を含む HorizontalStackLayout に設定して、Expander ビューを使用する方法を示します。

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

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

Properties

プロパティ	タイプ	説明
Command	ICommand	Expander ヘッダーがタップされたときに実行されます。
CommandParameter	object	Command に渡されるパラメーター。
Direction	ExpandDirection	Expander の方向を定義します。
Content	IView?	Expander が展開されたときに表示するコンテンツを定義します。
Header	IView?	ヘッダーのコンテンツを定義します。
IsExpanded	bool	Expander が展開されているかどうかを判断します。 このプロパティは、TwoWay バインド モードを使用し、既定値は falseです。

ExpandDirection 列挙型には、次のメンバーが定義されています。

Value	説明
Down	Expander コンテンツがヘッダーの下にあることを示します。
Up	Expander コンテンツがヘッダーの上にあることを示します。

Expander コントロールは、Expander ヘッダーがタップされたときに発生する ExpandedChanged イベントも定義します。

ExpandedChangedEventArgs

ExpanderIsExpanded 状態を含むイベント引数。

Properties

プロパティ	タイプ	説明
IsExpanded	bool	Expander が展開されているかどうかを判断します。

例

この機能の動作状態の例は、.「NET MAUI Community Toolkit サンプル アプリケーション」でご覧になれます。

API

Expander のソース コードは、.NET MAUI Community Toolkit の GitHub リポジトリにあります。