WPF - Expanderとレイアウト

エッセンシャルWPF:Windows Presentation Foundation (Programmer's SELECTION)

Expanderとレイアウト

Expanderを使用したレイアウトについて、次のことを確認。

• Expanderを行のように複数並べる
• 内部のコントロールにより表示する高さを自動的に設定する
• 画面より表示サイズが大きい場合にスクロールバーを表示する
• Expanderの中にExpanderを入れて表示する

【初期状態】

【高さの自動設定、スクロールバー、Expanderの中のExpander】

【全体表示】

Window1.xaml

<Window x:Class="WpfGrid.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ScrollViewer Name="scrollViewer1" VerticalScrollBarVisibility="Auto"  VerticalAlignment="Top">
            <Grid Name="expanderGrid" >
                <Grid.RowDefinitions>
                    <RowDefinition MinHeight="24" Height="Auto" ></RowDefinition>
                    <RowDefinition MinHeight="24" Height="Auto"></RowDefinition>
                    <RowDefinition MinHeight="24" Height="Auto" ></RowDefinition>
                </Grid.RowDefinitions>

                <Expander Name="expander1" IsExpanded="False" Grid.Row="0">
                    <Grid Height="Auto">
                        <Border Name="border1" Margin="4,4,4,4" BorderBrush="Black" BorderThickness="1"></Border>
                        <Label Background="AliceBlue" Margin="8,8,8,8" Name="label1" Width="Auto" Height="50" >Label</Label>
                    </Grid>
                </Expander>

                <Expander Name="expander2" IsExpanded="False" Grid.Row="1">
                    <Grid Height="Auto" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        
                        <Border Name="border2" Margin="4,4,4,4" BorderBrush="Black" BorderThickness="1"></Border>
                        <Label Grid.Row="0" Margin="8,8,8,8" Background="AntiqueWhite" Height="70" Width="Auto" Name="label2">Label</Label>
                        <Expander Name="expander4" IsExpanded="False" Grid.Row="1" Margin="20,0,0,0" >
                            <Grid>
                                <Border Name="border3" Margin="4,4,4,4" BorderBrush="Black" BorderThickness="1"></Border>
                                <Label Background="Blue" Margin="8,8,8,8" Height="50" Width="Auto"></Label>
                            </Grid>
                        </Expander>
                    </Grid>
                </Expander>

                <Expander Name="expander3" IsExpanded="False" Grid.Row="2">
                    <Grid Height="Auto">
                        <Border Name="border4" Margin="4,4,4,4" BorderBrush="Black" BorderThickness="1"></Border>
                        <Label Background="Aqua" Margin="8,8,8,8" Name="label3" Width="Auto" Height="50" >Label</Label>
                    </Grid>
                </Expander>
            </Grid>
        </ScrollViewer>
    </Grid>
</Window>

XAMLプログラミング WPFアプリケーションの概要と開発