WPF4.5入門その13 「簡単なレイアウトを行うコントロール」

過去記事

WPFのコントロール

WPFには、アプリケーションを構築するために必要な様々なコントロールが定義されています。MSDNのカテゴリ別のコントロールのページには以下のように分類されています。

カテゴリ別のコントロール
- http://msdn.microsoft.com/ja-jp/library/ms754204.aspx

レイアウト
ボタン
データ表示
日付表示および選択
メニュー
Selection
Navigation
ダイアログボックス
ユーザー情報
ドキュメント
入力
メディア
デジタルインク

ここでは、カテゴリごとにコントロールの簡単な使用方法について紹介します。各コントロールの完全なプロパティやメソッドのリストについてはMSDNライブラリを参照してください。

レイアウト

レイアウトは、配下にコントロールを1つ以上持ちコントロールのレイアウトを決めるコントロールのことです。代表的なものとしてStackPanelやDockPanel、Gridなどがあります。

Borderコントロール

Borderコントロールは、子の周囲に境界線や背景を表示するコントロールです。主に以下のプロパティを設定して利用します。

プロパティ	説明
Thickness BorderThickness { get; set; }	境界の上下左右の幅を指定します。XAMLでは”左, 上, 右, 下”のカンマ区切りの文字列で指定できます。省略時には”10”のように1つ指定するだけで上下左右を全て10に設定できます。
Brush BorderBrush { get; set; }	境界を塗りつぶすためのブラシを指定します。XAMLでは単色の場合はRedやBlueなどの色の名前で指定できます。
CornerRadius CornerRadius { get; set; }	角の丸みを指定できます。XAMLでは”左上, 右上, 右下, 左下”のカンマ区切りの文字列で指定します。
Brush Background { get; set; }	背景を塗りつぶすためのブラシを指定します。
Thickness Padding { get; set; }	境界の中と境界の間の余白を指定します。
UIElement Child { get; set; }	子要素を指定します。UIElementは、WPFの画面における要素の先祖のクラスになります。このプロパティはコンテンツプロパティになります。

Borderを置いたWindowのXAMLの例を以下に示します。

<Window x:Class="BorderSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Border 
        Padding="5, 10, 15, 20"
        BorderThickness="5,10,15,20" 
        BorderBrush="Red" 
        CornerRadius="5, 10, 15, 20" 
        Background="Blue">
        <TextBlock Text="中身" Background="Black" Foreground="White" />
    </Border>
</Window>

Border内の余白とBorderの線と角の丸みに5, 10, 15, 20という値を設定しています。そしてBorderの色を赤に、背景を青に設定しています。Borderの中には、黒背景に白文字のテキストを配置しています。このWindowを表示すると以下のようになります。

枠線の太さやBorder内の余白のとられ方などを確認することで、どのようにプロパティの設定が実際の表示に反映されているか確認できます。実際に、これらのプロパティの値をいじってみて、見た目にどのように反映されるのか試してみてください。Borderコントロールは、実際のアプリケーションでもコントロールを分類するための枠を作るためによく使うコントロールなので、しっかり挙動を押さえておきましょう。

BulletDecoratorコントロール

BulletDecoratorコントロールは、行頭の要素と、子要素を表示するコントロールです。正直あまり使うことはないと思います。主に以下のコントロールを設定します。

プロパティ	説明
Brush Background { get; set; }	背景色を指定します。
UIElement Bullet { get; set; }	行頭に表示する要素を指定します。
UIElement Child { get; set; }	子要素を指定します。このプロパティはコンテンツプロパティです。

このコントロールを使用したXAMLを以下に示します。

<Window x:Class="BulletDecoratorSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <BulletDecorator Background="Cyan">
        <BulletDecorator.Bullet>
            <TextBlock Text="行頭" Foreground="White" Background="Black" />
        </BulletDecorator.Bullet>
        <TextBlock Text="子要素" Foreground="White" Background="Red" />
    </BulletDecorator>
</Window>