💻

ButtonやTextは置けるけど画面が作れない理由ー WPFレイアウト入門② (DockPanel/WrapPanel)

に公開
C#
初心者
WPF
XAML
デスクトップアプリ
tech

1.導入

前回はWPFのレイアウトの基本であるGridとStackPanelについて紹介しました。
まだ見てない方は是非そちらから読んでくれると嬉しいです。下にURLを貼っときます。
https://zenn.dev/syunkun_1973/articles/6c8fa536187eb5

2.記事の目的

この記事では、前回に引き続きWPFを学び始めた時に特に躓きやすいレイアウト周り（DockPanelとWrapPanel）について整理し最後にDockPanelとWrapPanelを使い簡単なWPFアプリを作成してみようかなと思います。

3.DockPanelとWrapPanelについて

まず、DockPanelとWrapPanelの役割を簡単に表で整理すると以下のようになります。

  1. DockPanelとは
    　DockPanelとは画面の上下左右に要素を「貼り付ける（ドックする）」レイアウトパネルです。
    　主にアプリケーションの「画面構成（骨組み）」を作る時に使われます。
    　子要素にDockPanel.Dockと指定することで「上（Top）」「下（Bottom）」「左（Left）」「右（Right）」を配置し、最後に書いた要素が残り領域をすべて埋めるという特徴があります。
    　そのため、メニュー、サイドバー、メイン画面、ステータスバーといった「アプリ全体の画面構成（骨組み）」を作るのに向いています

  2. WrapPanelとは
    　WrapPanelは要素を横または縦に並べ、領域が足りなくなると自動で折り返すレイアウトパネルです。
    　規定では横方向に並び、画面サイズに応じて自然に再配置されます。
    　ボタン一覧や画像サムネイルなど数が増減する要素を一覧表示したい場合に適しています。

使い分けの考え方

・画面の構成を作る → DockPanel
・要素を一覧で並べる → WrapPanel

4.演習例

ここでは、WPFを用いてDockPanelで画面構成を作り、WrapPanelでボタン一覧を表示する簡易アプリを作成します。

アプリの完成イメージ（構成図）

レイアウト設計の考え方

・画面全体の「枠組み」はDockPanel
・中央に表示する「ボタン一覧」はWrapPanel

実際に作成したコードは下のコードです。

<Window x:Class="WpfApp6.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:WpfApp6"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>

        <!-- 上部メニュー -->
        <TextBlock
            DockPanel.Dock="Top"
            Text="簡易アプリ例"
            FontSize="20"
            Padding="10"
            Background="LightGray"
            HorizontalAlignment="Center" />

        <!-- 下部ステータスバー -->
        <TextBlock
            DockPanel.Dock="Bottom"
            Text="Status : Ready"
            Padding="8"
            Background="LightGray" />

        <!-- 中央コンテンツ -->
        <ScrollViewer>
            <WrapPanel Margin="10">
                <Button Content="Button 1" Width="100" Height="40" Margin="5" />
                <Button Content="Button 2" Width="100" Height="40" Margin="5" />
                <Button Content="Button 3" Width="100" Height="40" Margin="5" />
                <Button Content="Button 4" Width="100" Height="40" Margin="5" />
                <Button Content="Button 5" Width="100" Height="40" Margin="5" />
                <Button Content="Button 6" Width="100" Height="40" Margin="5" />
                <Button Content="Button 7" Width="100" Height="40" Margin="5" />
                <Button Content="Button 8" Width="100" Height="40" Margin="5" />
                
            </WrapPanel>
        </ScrollViewer>
    </DockPanel>
</Window>

実行結果

DockPnaleでは
・DockPanel.Dock="Top / Bottom" で画面の枠を作れる
・最後の要素（WrapPanel）が中央の残り領域を占有する

WrapPanelでは
・ボタンを横に並べるだけで自動折り返し
・ウィンドウサイズを変えてもレイアウトが崩れにくい
となっています

5.まとめ

ここでは
・DockPanel＝画面構成
・WrapPanel＝一覧表示
という役割分担を実際に体験できます。
WPFレイアウトの基本として、最初に触れる組み合わせとして非常にオススメです。

次回のCanvasでいったんWPFレイアウトは終了となりますが、引き続きWPF開発初心者に向けての記事やUnity関連の記事もだしたいと思います。

Discussion