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

スポンサーリンク

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

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

スポンサーリンク

環境

開発環境Microsoft Visual Studio Enterprise 2019
Version 16.11.5
FrameworkMicrosoft .NET Framework Version 4.8.04161
スポンサーリンク

Expander の基本

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

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

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

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>
複数の Expander を配置する例

複数の Expander を配置する例

Please follow and like us:

コメント

タイトルとURLをコピーしました