ももの知恵の樹

WPF_レイアウトコントロール

StackPanelコントロール

StackPanelコントロールは、子要素を縦方向または横方向に一列に並べるコントロールです。

StackPanelを入れ子にすることで、レイアウトを細かく指定できます。

なお、子要素が外にはみ出したときには自動制御的な表示はされません。 


<Window x:Class="WpfDevelop.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="240" Width="360">
    <StackPanel Name="stackPanel1" Orientation="Vertical">
        <Button Name="button1" MinHeight="30">Button1</Button>
        <Button Name="button2" MinHeight="30" FontSize="16">Button2</Button>
        <Button Name="button3" MinHeight="30" FontSize="24">Button3</Button>
        <StackPanel Name="stackPanel2" Orientation="Horizontal">
            <Button Name="button4" MinHeight="90">Button1</Button>
            <Button Name="button5" MinHeight="90" FontSize="16">Button2</Button>
            <Button Name="button6" MinHeight="90" FontSize="24">Button3</Button>
        </StackPanel>
    </StackPanel>
</Window>

WrapPanelコントロール

WrapPanelコントロールは、子要素が外にはみ出したときに折り返して表示するコントロールです。

TextBox コントロールで長いテキストを折り返すことを "wrap" といいますが、WrapPanelは子要素を wrap 可能にします。

基本的にはStackPanelコントロールと同じ挙動です。 


<Window x:Class="WpfDevelop.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="500">
    <WrapPanel>
        <Button Content="Button" Width="80" Margin="5"/>
        <Button Content="Button" Width="80" Margin="5"/>
        <Button Content="Button" Width="80" Margin="5"/>
        <Button Content="Button" Width="80" Margin="5"/>
        <Button Content="Button" Width="80" Margin="5"/>
        <Button Content="Button" Width="80" Margin="5"/>
        <Button Content="Button" Width="80" Margin="5"/>
        <Button Content="Button" Width="80" Margin="5"/>
    </WrapPanel>
</Window>

DockPanelコントロール

DockPanelコントロールは、コントロールを上下左右と残りの部分にわけて配置するコントロールです。 


<Window x:Class="WpfDevelop.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <!-- メニューバー -->
        <Menu Name="menu1" DockPanel.Dock="Top">
            <MenuItem Header="メニュー１(_F)" Width="Auto"></MenuItem>
            <MenuItem Header="メニュー２(_E)" Width="Auto"></MenuItem>
        </Menu>
        <!-- ツールバー -->
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar Name="toolbar1" Height="30">
                <Button Command="Open" Width="22" Height="22" ToolTip="ファイルを開く">
                    <Button.Content>
                        <Image Source="OpenFile.png" Width="16" Height="16" Stretch="Uniform"/>
                    </Button.Content>
                </Button>
            </ToolBar>
        </ToolBarTray>
        <!-- ステータスバー -->
        <StatusBar DockPanel.Dock="Bottom" Height="30">
            <StatusBarItem>
                <TextBlock>ステータスバー１</TextBlock>
            </StatusBarItem>
            <StatusBarItem>
                <TextBlock>ステータスバー２</TextBlock>
            </StatusBarItem>
        </StatusBar>

        <!-- 残りの領域が描写の中央部分に位置します。 -->
        <!-- 左ペイン -->
        <Button DockPanel.Dock="Left" Content="Tree" MinWidth="150" />
        <!-- メインペイン -->
        <Button Content="Content" />
    </DockPanel>
</Window>

Gridコントロール

Gridコントロールは、表形式（列位置と行位置の指定）レイアウトを作成するコントロールです。

行と列を定義して、子要素を任意の行と列に配置できます。

GridSplitter という Grid コントロール用スプリッタコントロールも用意されています。 


<Window x:Class="WpfDevelop.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="240" Width="360">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <!-- 子要素の配置 -->
        <StackPanel Grid.Row="1" Grid.Column="1">
            <Button Content="Button"/>
        </StackPanel>
        <GridSplitter Grid.Column ="0" Grid.RowSpan="3" Width="2" HorizontalAlignment="Right" VerticalAlignment="Stretch" Background="Red"/>
        <GridSplitter Grid.Column ="1" Grid.RowSpan="3" Width="2" HorizontalAlignment="Right" VerticalAlignment="Stretch" Background="Red"/>
    </Grid>
</Window>

ScrollViewer コントロール

ScrollViewer コントロールは、子要素がScrollViewerより大きな場合にスクロールバーを出して要素を閲覧できるようにするコントロールです。

要素がレイアウトをはみ出ないようにスクロールバーを表示するためのコントロールです。 


<Window x:Class="WpfDevelop.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="240" Width="500">
    <DockPanel>
        <ScrollViewer x:Name="scrollViewer">
            <StackPanel>
                <Button Content="Button1" />
                <Button Content="Button2" />
                <Button Content="Button3" />
                <Button Content="Button4" />
                <Button Content="Button5" />
                <Button Content="Button6" />
                <Button Content="Button7" />
                <Button Content="Button8" />
                <Button Content="Button9" />
                <Button Content="Button10" />
                <Button Content="Button11" />
                <Button Content="Button12" />
                <Button Content="Button13" />
                <Button Content="Button14" />
                <Button Content="Button15" />
            </StackPanel>
        </ScrollViewer>
    </DockPanel>
</Window>

Canvasコントロール

Canvasは、コントロール内の子要素を絶対的な座標値で位置を決定するパネルコントロールです。

これは図形コントロールをレイアウトするためのものであり、子要素の UI コントロールを設定する利用法は推奨されていません。


絶対座標指定

Canvasコントロールは、子要素をCanvasの中に絶対座標指定で配置できるコントロールです。 


<Window x:Class="WpfDevelop.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="240" Width="360">
    <Canvas>
        <Button Canvas.Top="10" Canvas.Left="10" Content="左上ボタン" />
        <Button Canvas.Top="20" Canvas.Right="20" Content="右上ボタン" />
        <Button Canvas.Bottom="30" Canvas.Left="30" Content="左下ボタン" />
        <Button Canvas.Bottom="40" Canvas.Right="40" Content="右下ボタン" />
    </Canvas>
</Window>

ZIndex プロパティ

CanvasコントロールのZIndex プロパティはいわゆる Z オーダーを指定するものです。

値の小さいもの（負数可能）要素ほど上に表示されます。

なお、ZIndex プロパティの設定がない場合は、要素を配置した順番で上に表示されます。 


<Window x:Class="WpfDevelop.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="240" Width="360">
    <Canvas>
        <Rectangle Fill="Blue" Width="100" Height="100" Canvas.Left="50" Canvas.Top="40" Canvas.ZIndex="1"/>
        <Ellipse Fill="Green" Width="100" Height="100" Canvas.Left="100" Canvas.Top="60"/>
        <Polygon Fill="Red" Points="50,50 150,150 50,150" Canvas.Left="100" Canvas.Top="40"/>
    </Canvas>
</Window>

関連ページ