Share via

チュートリアル : WPF デザイナーによるサイズ変更可能なアプリケーションの作成

  • [アーティクル]

[このドキュメントはプレビューのみを目的としており、以降のリリースで変更される可能性があります。プレースホルダーとして空白のトピックが含まれています。]

Grid コンテナー コントロールと共に GridSplitter コントロールを使用することにより、実行時にユーザーによってサイズを変更できるウィンドウ レイアウトを作成できます。 たとえば、領域に分割されている UI を持つアプリケーションで、ユーザーが分割線をドラッグすることにより、より多くの内容を見る必要がある領域を大きくすることができます。 このチュートリアルでは、メッセンジャー スタイルのアプリケーションのレイアウトを作成します。

このチュートリアルでは次のタスクを行います。

  • WPF アプリケーションを作成する。

  • 既定のグリッド パネルを構成する。

  • 水平 GridSplitter を追加する。

  • ドッキング パネルとコントロールを追加する。

  • グリッド パネルとコントロールを追加する。

  • アプリケーションをテストする。

最終的なアプリケーションを次の図に示します。

サイズ変更可能なアプリケーション

注意

実際に画面に表示されるダイアログ ボックスとメニュー コマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

  • Visual Studio 2012 RC

プロジェクトの作成

まず、アプリケーションのプロジェクトを作成します。

プロジェクトを作成するには

  1. Visual Basic または Visual C# で ResizableApplication という名前の WPF アプリケーション プロジェクトを作成します。 詳細については、「方法 : 新しい WPF アプリケーション プロジェクトを作成する」を参照してください。

    注意

    このチュートリアルではコードは作成しません。プロジェクト用に選択した言語がアプリケーションの分離コード ページで使用される言語となります。

    WPF Designerで MainWindow.xaml が開きます。

  2. [ファイル] メニューの [すべてを保存] をクリックします。

既定のグリッド パネル コントロールの構成

既定では、新しい WPF アプリケーションには Grid パネルが配置された Window が含まれています。 ベスト プラクティスとしては、この Grid を GridSplitter 専用とします。 グリッド プランは次のとおりとします。

行 1: レイアウトの最初の部分になる Dock パネルです。

行 2: GridSplitter です。

行 3: レイアウトの残りの Grid パネルです。

既定のグリッド パネル コントロールを構成するには

  1. デザイン ビューで、Grid を選択します。 詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。

  2. [プロパティ] ウィンドウで RowDefinitions プロパティを見つけ、プロパティの値列の省略記号ボタンをクリックします。

    [コレクション エディター] が表示されます。

  3. 3 つの行について [追加] をクリックして、その 3 つの行を追加します。

  4. 2 つ目の行の Height プロパティを Auto に設定します。

  5. 3 つ目の行の MinHeight プロパティを 70 に設定します。

  6. [OK] をクリックして [コレクション エディター] を閉じ、WPF Designerに戻ります。

    グリッドには 3 つの行がありますが、現在は 2 つしか表示されていません。 Height プロパティを Auto に設定した行は、内容が含まれていないため、一時的に非表示となっています。 このチュートリアルでは、このままで問題ありません。 これ以降、このような動作を回避するには、作業中はスター (アスタリスク) によるサイズ変更を使用し、作業の終了時に Auto に変更します。

  7. [ファイル] メニューの [すべてを保存] をクリックします。

水平の GridSplitter の追加

次に、GridSplitter を追加します。

水平の GridSplitter を追加するには

  1. デザイン ビューで、Grid を選択します。

  2. [ツールボックス] から GridSplitter コントロールを Grid にドラッグします。

  3. [プロパティ] ウィンドウで、GridSplitter に対して次のプロパティを設定します。

    プロパティ

    値

    ResizeDirection

    Rows

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    幅

    Auto

    高さ

    10

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. [ファイル] メニューの [すべてを保存] をクリックします。

ドッキング パネルとコントロールの追加

次に、DockPanel を追加し、アプリケーションの上半分のレイアウトを設定します。 DockPanel には Label と RichTextBox が含まれます。 GridSplitter を移動したときにアプリケーションの上半分のサイズが強調されるように、Label と RichTextBox の色を設定します。

ドッキング パネルとコントロールを追加するには

  1. デザイン ビューで、Grid を選択します。

  2. [ツールボックス] から DockPanel コントロールを Grid にドラッグします。

  3. [プロパティ] ウィンドウで、DockPanel に対して次のプロパティを設定します。

    プロパティ

    値

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    LastChildFill

    True (オン)

    幅

    Auto

    高さ

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. [ツールボックス] から Label コントロールを DockPanel にドラッグします。

  5. [プロパティ] ウィンドウで、Label に対して次のプロパティを設定します。

    プロパティ

    値

    背景

    Blue (#FF0000FF)

    Foreground

    White (#FFFFFFFF)

    Content

    表示

    DockPanel.Dock

    Top

    幅

    Auto

    高さ

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  6. デザイン ビューで、DockPanel を選択します。

    ヒント

    グリッド上には複数のコントロールがあるため、Tab キー、[ドキュメント アウトライン] ウィンドウ、または XAML ビューを使用すると、より簡単に DockPanel を選択できます。詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。

  7. [ツールボックス] から RichTextBox コントロールを DockPanel にドラッグします。

  8. [プロパティ] ウィンドウで、RichTextBox に対して次のプロパティを設定します。

    プロパティ

    値

    背景

    LightBlue (#FFADD8E6)

    DockPanel.Dock

    Bottom

    幅

    Auto

    高さ

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

    IsReadOnly

    True (オン)

  9. [ファイル] メニューの [すべてを保存] をクリックします。

グリッド パネルとコントロールの追加

次に、Grid を追加し、アプリケーションの下半分のレイアウトを設定します。 Grid には Button と RichTextBox が含まれます。 GridSplitter を移動したときにアプリケーションの下半分のサイズが強調されるように、RichTextBox の色を設定します。

グリッド パネルとコントロールを追加するには

  1. デザイン ビューで、Grid を選択します。

  2. [ツールボックス] から Grid コントロールを Grid にドラッグします。

  3. [プロパティ] ウィンドウで、新しい Grid に対して次のプロパティを設定します。

    プロパティ

    値

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    2

    Grid.RowSpan

    1

    幅

    Auto

    高さ

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. [プロパティ] ウィンドウで ColumnDefinitions プロパティを見つけ、プロパティの値列の省略記号ボタンをクリックします。

    [コレクション エディター] が表示されます。

  5. [追加] を 2 回クリックして、列を 2 つ追加します。

  6. 2 つ目の列の Width プロパティを [Auto] に設定します。

  7. [OK] をクリックして [コレクション エディター] を閉じ、WPF Designerに戻ります。

  8. [ツールボックス] から Button コントロールを Grid にドラッグします。

  9. [プロパティ] ウィンドウで、Button に対して次のプロパティを設定します。

    プロパティ

    値

    Content

    [OK]

    Grid.Column

    1

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    幅

    60

    高さ

    60

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    5

  10. [ツールボックス] から RichTextBox コントロールを Grid にドラッグします。

  11. [プロパティ] ウィンドウで、RichTextBox に対して次のプロパティを設定します。

    プロパティ

    値

    背景

    PaleGoldenrod (#FFEEE8AA)

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    幅

    Auto

    高さ

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

    IsReadOnly

    False (オフ)

  12. [ファイル] メニューの [すべてを保存] をクリックします。

アプリケーションのテスト

最後に、アプリケーションをテストします。

アプリケーションをテストするには

  1. [デバッグ] メニューの [デバッグ開始] をクリックします。

    アプリケーションが起動し、MainWindow が表示されます。

  2. ウィンドウのサイズを垂直方向および水平方向に変更します。

    アプリケーションの上半分と下半分が、使用可能なスペースを使用するように大きくなったり小さくなったりします。

  3. 分割線をドラッグして、アプリケーションの上半分と下半分をサイズ変更します。 アプリケーションの片方の部分をもう片方より小さくします。

  4. ウィンドウのサイズをもう一度変更します。

    アプリケーションの上半分と下半分は、分割線の場所によって大きくなったり小さくなったりします。

  5. 分割線をアプリケーションのできるだけ上までドラッグします。

    アプリケーションの上半分が消え、下半分だけが表示されます。

  6. 分割線をアプリケーションのできるだけ下までドラッグします。

    アプリケーションの下半分は画面上から消えません。 これは、3 つ目の行の MinHeight プロパティを 70 に設定しているためです。

注意

70 = 60 (ボタンの高さ) + 5 (ボタンの上部余白) + 5 (ボタンの下部余白)

  1. ウィンドウを閉じます。

チュートリアルの完了

完成した MainWindow.xaml ファイルを次に示します。

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="70" />
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="DockPanel1">
            <Label DockPanel.Dock="Top" Height="23" Width="Auto" Background="Blue" Foreground="White" Name="Label1">Display</Label>
            <RichTextBox DockPanel.Dock="Bottom" Height="Auto" Width="Auto" Background="LightBlue" IsReadOnly="True" Name="RichTextBox1" />
        </DockPanel>
        <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
        <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" Width="60" Height="60" Name="Button1">OK</Button>
            <RichTextBox Grid.Column="0" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="RichTextBox2" />
        </Grid>
    </Grid>
</Window>

次の手順

このチュートリアルで作成したアプリケーションでは水平の分割線が使用されています。 垂直の分割線を使用して同じアプリケーションを作成することもできます。

ここで作成したアプリケーションは、レイアウト テクニックを示すことのみを目的としたものです。 アプリケーションが実際に機能するようにコードを追加することもできます。 たとえば、下のテキスト ボックスから上のテキスト ボックスにテキストをコピーするボタン クリック イベントのコードを追加できます。

参照

処理手順

方法 : ユーザーによるサイズ変更が可能なアプリケーションを GridSplitter で作成する

概念

絶対配置と動的配置によるレイアウト

その他の技術情報

レイアウトのチュートリアル