エキスパンダー

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

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

Note

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

Content

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

Note

Expander は、 ListView または CollectionView内に配置されている場合、予期せず動作する可能性があります。 ただし、 public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }を設定することで、カスタム実装で制御できます。 このアクションは、ヘッダーがタップされるたびに実行されます。 このアクションを変更すると、すべてのプラットフォームで CollectionView と ListView で異なる動作を受け取る可能性があります。

折りたたまれた状態と展開された状態の Expander のスクリーンショット

基本的な使用方法

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

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

プロパティ

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

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

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

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

ExpandedChangedEventArgs

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

プロパティ

財産 タイプ Description
IsExpanded bool Expanderが展開されているかどうかを判断します。

例示

この機能の例は、.NET MAUI Community Toolkit サンプル アプリケーションで動作しています。

API

Expander のソース コードは、.NET MAUI Community Toolkit GitHub リポジトリで確認できます。

  • Last updated on