C#WPFの道#16!Expanderの書き方と使い方を解りやすく解説

当サイトではアフィリエイト広告を利用しています。

WPF

Expanderとは?

Expanderコントロールとは、エリアの開閉ができるコントロールです。

「TitleA」などと書かれている横のボタンを押すと、開いたり閉じたりします。

プロパティ

Header タイトルを設定します
IsExpanded 開閉状態を設定できます。Trueのときに開いた状態になります。
BorderBrush ボーダーラインの色を設定します

注意点

Expander自体のHeight(高さ)を指定しない場合は、Expanderを閉じたときに、エリアは縮小され、その下にあるコントロールも追従して上に上がります。Height(高さ)を指定すると、閉じた場合もエリアの高さはそのままとなります。

サンプルコード

<Window x:Class="WPF016.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF016"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid>
        <StackPanel>
            <Expander Header="TitleA" 
                      Margin="10"
                      IsExpanded="True"
                      BorderBrush="Red">
                <StackPanel Margin="6" 
                            HorizontalAlignment="Left"
                            Width="200">
                    <RadioButton Content="AAA"
                                 FontSize="20"/>
                    <RadioButton Content="BBB" 
                                 FontSize="20"/>
                </StackPanel>
            </Expander>

            <Expander Header="TitleB" 
                      Margin="10"
                      IsExpanded="True"
                      BorderBrush="Blue">
                <StackPanel Margin="6" 
                            HorizontalAlignment="Left"
                            Width="200">
                    <RadioButton Content="CCC"
                                 FontSize="20"/>
                    <RadioButton Content="DDD" 
                                 FontSize="20"/>
                </StackPanel>
            </Expander>
        </StackPanel>
    </Grid>
</Window>