VB のたまご

作成日: 2017/03/05, 更新日: 2017/03/05



Expander

    イメージ
  •  Expander は、GroupBox に開閉機能が付いたようなコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「ExpanderWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="ExpanderWindow1"
            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:w03_ContainerControls"
            mc:Ignorable="d"
            Title="ExpanderWindow1" Height="300" Width="300">
        
        <Grid>
    
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            
            <Expander Header="expander1" Margin="10" 
                      BorderBrush="Blue" Background="AliceBlue">
                <Button Content="button1" Margin="10" />
            </Expander>
    
            <Expander Header="expander2" IsExpanded="True" Margin="10" 
                      BorderBrush="Blue" Background="AliceBlue"
                      Grid.Row="1">
                <Button Content="button2" Margin="10" />
            </Expander>
    
        </Grid>
        
    </Window>
    

  •  Button の時は Content に表示文字列をセットしましたが、Expander の場合は Header に表示文字列をセットします。 コントロールによってプロパティ名が違うのは戸惑ってしまいますよね。慣れが必要です。

  •  IsExpanded は、初期状態が開いているか閉じているかをセットします。 デフォルト値は閉じている状態なので、True をセットして初期状態を開いた状態に変えています。

  •  BorderBrush で枠の色を、Background で内部背景色をセットします。

  • スポンサーリンク


  •  ヘッダー位置が上部、配置したコントロールが下部に表示されますが、ExpandDirection を設定することで上下左右に変更することができます。 開閉領域をどの方向にするかの設定です。 以下サンプルです。

  • <Window x:Class="ExpanderWindow2"
            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:w03_ContainerControls"
            mc:Ignorable="d"
            Title="ExpanderWindow2" Height="300" Width="300">
        
        <Grid>
    
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
    
            <Expander Header="expander1" Margin="10"
                      BorderBrush="Blue" Background="AliceBlue"
                      Grid.Row="0" Grid.Column="0"
                      ExpandDirection="Down">
                <Button Content="button1" Margin="10" />
            </Expander>
    
            <Expander Header="expander2" Margin="10"
                      BorderBrush="Blue" Background="AliceBlue"
                      Grid.Row="1" Grid.Column="0"
                      ExpandDirection="Up">
                <Button Content="button2" Margin="10" />
            </Expander>
    
            <Expander Header="expander3" Margin="10"
                      BorderBrush="Blue" Background="AliceBlue"
                      Grid.Row="0" Grid.Column="1"
                      ExpandDirection="Left">
                <Button Content="button3" Margin="10" />
            </Expander>
    
            <Expander Header="expander4" Margin="10"
                      BorderBrush="Blue" Background="AliceBlue"
                      Grid.Row="1" Grid.Column="1"
                      ExpandDirection="Right">
                <Button Content="button4" Margin="10" />
            </Expander>
            
        </Grid>
        
    </Window>
    
  •  上記の例だと、閉じた時に空白領域が残ってしまい、ちょっと気になりますね。 閉じられた時に空白領域を詰めたい場合は、StackPanel や WrapPanel を親コントロールに配置することで調整できます。 また、Expander 内にはコントロールを1つしか配置できないので、複数のコントロールを配置したい場合は、レイアウト系コントロールを敷いてこの中に複数コントロールを配置します。

  • <Window x:Class="ExpanderWindow3"
            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:w03_ContainerControls"
            mc:Ignorable="d"
            Title="ExpanderWindow3" Height="300" Width="300">
    
        <Grid>
    
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
    
            <StackPanel Grid.Row="0" Grid.Column="0">
                <Expander Header="expander1" Margin="10"
                      BorderBrush="Blue" Background="AliceBlue"
                      ExpandDirection="Down">
                    
                    <WrapPanel>
                        <Button Content="button1a" Margin="2" />
                        <Button Content="button1b" Margin="2" />
                        <Button Content="button1c" Margin="2" />
                    </WrapPanel>
                    
                </Expander>
                <Button Content="button1d" Margin="10" />
            </StackPanel>
    
            <StackPanel Grid.Row="1" Grid.Column="0">
                <Expander Header="expander2" Margin="10"
                      BorderBrush="Blue" Background="AliceBlue"
                      ExpandDirection="Up">
    
                    <WrapPanel>
                        <Button Content="button2a" Margin="2" />
                        <Button Content="button2b" Margin="2" />
                        <Button Content="button2c" Margin="2" />
                    </WrapPanel>
    
                </Expander>
                <Button Content="button2d" Margin="10" />
            </StackPanel>
    
    
            <StackPanel Grid.Row="0" Grid.Column="1">
                <Expander Header="expander3" Margin="10"
                      BorderBrush="Blue" Background="AliceBlue"
                      ExpandDirection="Left">
    
                    <WrapPanel>
                        <Button Content="button3a" Margin="2" />
                        <Button Content="button3b" Margin="2" />
                        <Button Content="button3c" Margin="2" />
                    </WrapPanel>
    
                </Expander>
                <Button Content="button3d" Margin="10" />
            </StackPanel>
    
    
            <StackPanel Grid.Row="1" Grid.Column="1">
                <Expander Header="expander4" Margin="10"
                      BorderBrush="Blue" Background="AliceBlue"
                      ExpandDirection="Right">
    
                    <WrapPanel>
                        <Button Content="button4a" Margin="2" />
                        <Button Content="button4b" Margin="2" />
                        <Button Content="button4c" Margin="2" />
                    </WrapPanel>
    
                </Expander>
                <Button Content="button4d" Margin="10" />
            </StackPanel>
    
        </Grid>
    
    </Window>