[WinUI 3][Expander] 基本使用方法

Expander

2022.01.14

Expander にはさまざまなコントロールを配置することができ、そのエリアの折りたたみおよび展開を可能にするコントロールです。

この記事では Expander の基本使用方法について説明します。

環境
Expander の基本
コンテンツの配置
複数の Expander を配置する

環境

開発環境	Microsoft Visual Studio Enterprise 2019 Version 16.11.5
Framework	Microsoft .NET Framework Version 4.8.04161

Expander の基本

Expander は、Header プロパティ に、常に表示される要素を定義し、Content プロパティ に、折りたたみおよび展開できる要素を定義します。

以下に基本のXAML を示します。

<Expander Header="News" Content="雨ニモ負ケズ風ニモ負ケズ" />

Expander の基本

コンテンツの配置

コンテンツにはさまざまなコントロールを配置することができます。

この場合は、XAML の Content=”” は使用せずに、<Expander> コントロール </Expander> のように記述をします。また、複数コントロールを配置したい場合は、StackPanel のようなコンテナコントロールが必要です。

以下は、Expander に TextBlock と Button を配置する例です。

<Window
    x:Class="WinUIAppSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUIAppSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Expander Header="News">
            <StackPanel>
                <TextBlock Text="雨ニモ負ケズ風ニモ負ケズ" />
                <Button Content="OK"/>
            </StackPanel>
        </Expander>
    </StackPanel>
</Window>

複数のコントロールを配置する例

複数の Expander を配置する

Expander は複数配置することも可能です。

以下は、3つの Expander を垂直方向に配置する例です。

<Window
    x:Class="WinUIAppSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUIAppSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Expander Header="News1">
            <StackPanel>
                <TextBlock Text="雨ニモ負ケズ風ニモ負ケズ" />
                <Button Content="OK"/>
            </StackPanel>
        </Expander>
        <Expander Header="News2">
            <StackPanel>
                <TextBlock Text="雪ニモ夏ノ暑サニモマケヌ" />
                <Button Content="OK"/>
            </StackPanel>
        </Expander>
        <Expander Header="News3">
            <StackPanel>
                <TextBlock Text="丈夫ナカラダヲモチ" />
                <Button Content="OK"/>
            </StackPanel>
        </Expander>
    </StackPanel>
</Window>