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

Expanderとは？
プロパティ
注意点
サンプルコード

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>

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

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

WPFの道！

C#プログラマーのための正しい3層構造が分かる「C#アーキテクチャー解説動画」をここで公開しています。よかったら見てみてください。

参考図書

C#のWPFでPrismを使ってMVVMで実装する方法