■ WPF デザイナーに依るサイズ変更可能なアプリケーションの作成 ■ Grid コンテナーコントロールと共に GridSplitter コントロールを使用する事に依り、実行時にユーザ ーに依ってサイズを変更出来るウィンドウレイアウトを作成出来る。例えば、領域に分割されて居る UI を持つアプリケーションで、ユーザーが分割線をドラッグする事に依り、より多くの内容を見る必 要が有る領域を大きくする事が出来る。此のチュートリアルでは、メッセンジャースタイルのアプリケ ーションのレイアウトを作成する。 此のチュートリアルでは次のタスクを行う。 ・WPF アプリケーションを作成する。 ・既定のグリッドパネルを構成する。 ・水平GridSplitter を追加する。 ・ドッキングパネルとコントロールを追加する。 ・グリッドパネルとコントロールを追加する。 ・アプリケーションをテストする。 最終的なアプリケーションを次の図に示す。 ■ プロジェクトの作成 先ず、アプリケーションのプロジェクトを作成する。 プロジェクトを作成するには
１．Visual Basic 又は Visual C#で ResizableApplication と謂う名前の WPF アプリケーションプロジ ェクトを作成する。
W
※ 此のチュートリアルではコードは作成しない。プロジェクト用に選択した言語がアプリケーシ ョンの分離コードページで使用される言語と成る。 WPF Designer で MainWindow.xaml が開く。 ２．[ファイル] メニューの [総てを保存] をクリックする。 ■ 既定のグリッドパネルコントロールの構成 既定では、新しいWPF アプリケーションには Grid パネルが配置された Window が含まれて居る。ベ ストプラクティスとしては、此のGrid を GridSplitter 専用とする。グリッドプランは次の通りとする。 行1：レイアウトの最初の部分に成る Dock パネルで有る。 行2：GridSplitter で有る。 行3：レイアウトの残りの Grid パネルで有る。 既定のグリッドパネルコントロールを構成するには １．デザインビューで、Grid を選択する。詳細に付いては、「方法 : デザイン画面上で要素を選択して 移動する」を参照され度い。 ２．[プロパティ] ウィンドウで RowDefinitions プロパティを見付け、プロパティの値列の省略記号ボ タンをクリックする。 [コレクションエディター] が表示される。 ３．3 つの行に付いて [追加] をクリックして、其の 3 つの行を追加する。 ４．2 つ目の行の Height プロパティを Auto に設定する。 ５．3 つ目の行の MinHeight プロパティを 70 に設定する。 ６．[OK] をクリックして [コレクションエディター] を閉じ、WPF Designer に戻る。 グリッドには3 つの行が有るが、現在は 2 つしか表示されて居ない。Height プロパティを Auto に 設定した行は、内容が含まれて居ない為、一時的に非表示と成って居る。此のチュートリアルでは、 此の儘で問題無い。此れ以降、此の様な動作を回避するには、作業中はアスタリスク（ * ）に依 るサイズ変更を使用し、作業の終了時にAuto に変更する。 ７．[ファイル] メニューの [総てを保存] をクリックする。 ■ 水平の GridSplitter の追加 次に、GridSplitter を追加する。 水平のGridSplitter を追加するには １．デザインビューで、Grid を選択する。
２．[ツールボックス] から GridSplitter コントロールを Grid にドラッグする。 ３．[プロパティ] ウィンドウで、GridSplitter に対して次のプロパティを設定する。 プロパティ 値 ResizeDirection Rows Grid.Column 0 Grid.ColumnSpan 1 Grid.Row 1 Grid.RowSpan 1 Width auto Height 10 HorizontalAlignment Stretch VerticalAlignment Stretch Margin 0 ４．[ファイル] メニューの [総てを保存] をクリックする。 ■ ドッキングパネルとコントロールの追加
次に、DockPanel を追加し、アプリケーションの上半分のレイアウトを設定する。DockPanel には Label とRichTextBox が含まれる。GridSplitter を移動した時にアプリケーションの上半分のサイズが強調さ れる様に、Label と RichTextBox の色を設定する。 ドッキングパネルとコントロールを追加するには １．デザインビューで、Grid を選択する。 ２．[ツールボックス] から DockPanel コントロールを Grid にドラッグする。 ３．[プロパティ] ウィンドウで、DockPanel に対して次のプロパティを設定する。 プロパティ 値 Grid.Column 0 Grid.ColumnSpan 1 Grid.Row 0 Grid.RowSpan 1 LastChildFill True (オン) Width auto Height auto HorizontalAlignment Stretch VerticalAlignment Stretch Margin 0 ４．[ツールボックス] から Label コントロールを DockPanel にドラッグする。 ５．[プロパティ] ウィンドウで、Label に対して次のプロパティを設定する。
プロパティ 値 背景 Blue (#FF0000FF) Foreground White (#FFFFFFFF) Content 表示 DockPanel.Dock Top Width auto Height 23 HorizontalAlignment Stretch VerticalAlignment Stretch Margin 0 ６．デザインビューで、DockPanel を選択する。 ※ グリッド上には複数のコントロールが有る為、Tab キー、[ドキュメントアウトライン] ウィン ドウ、又は、XAML ビューを使用すると、より簡単に DockPanel を選択出来る。 ７．[ツールボックス] から RichTextBox コントロールを DockPanel にドラッグする。 ８．[プロパティ] ウィンドウで、RichTextBox に対して次のプロパティを設定する。 プロパティ 値
Background LightBlue (#FFADD8E6) DockPanel.Dock Bottom Width auto Height auto HorizontalAlignment Stretch VerticalAlignment Stretch Margin 0 IsReadOnly True (オン) ９．[ファイル] メニューの [総てを保存] をクリックする。 ■ グリッドパネルとコントロールの追加
次に、Grid を追加し、アプリケーションの下半分のレイアウトを設定する。Grid には Button と RichTextBox が含まれる。GridSplitter を移動した時にアプリケーションの下半分のサイズが強調され る様に、RichTextBox の色を設定する。 グリッドパネルとコントロールを追加するには １．デザインビューで、Grid を選択する。 ２．[ツールボックス] から Grid コントロールを Grid にドラッグする。 ３．[プロパティ] ウィンドウで、新しい Grid に対して次のプロパティを設定する。
プロパティ 値 Grid.Column 0 Grid.ColumnSpan 1 Grid.Row 2 Grid.RowSpan 1 Width auto Height auto HorizontalAlignment Stretch VerticalAlignment Stretch Margin 0 ４．[プロパティ] ウィンドウで ColumnDefinitions プロパティを見付け、プロパティの値列の省略記 号ボタンをクリックする。 [コレクションエディター] が表示される。 ５．[追加] を 2 回クリックして、列を 2 つ追加する。 ６．2 つ目の列の Width プロパティを Auto に設定する。 ７．[OK] をクリックして [コレクションエディター] を閉じ、WPF Designer に戻る。 ８．[ツールボックス] から Button コントロールを Grid にドラッグする。 ９．[プロパティ] ウィンドウで、Button に対して次のプロパティを設定する。 プロパティ 値 Content [OK] Grid.Column 1 Grid.ColumnSpan 1 Grid.Row 0 Grid.RowSpan 1 Width 60 Height 60 HorizontalAlignment Stretch VerticalAlignment Stretch Margin 5 Ａ．[ツールボックス] から RichTextBox コントロールを Grid にドラッグする。 Ｂ．[プロパティ] ウィンドウで、RichTextBox に対して次のプロパティを設定する。 プロパティ 値
Background PaleGoldenrod (#FFEEE8AA)
Grid.Column 0
Grid.RowSpan 1 Width auto Height auto HorizontalAlignment Stretch VerticalAlignment Stretch Margin 0 IsReadOnly False (オフ) Ｃ．[ファイル] メニューの [総てを保存] をクリックする。 ■ アプリケーションのテスト 最後に、アプリケーションをテストする。 アプリケーションをテストするには １．[デバッグ] メニューの [デバッグ開始] をクリックする。 アプリケーションが起動し、MainWindow が表示される。 ２．ウィンドウのサイズを垂直方向と水平方向に変更する。 アプリケーションの上半分と下半分が、使用可能なスペースを使用する様に大きく成ったり小さく 成ったりする。 ３．分割線をドラッグして、アプリケーションの上半分と下半分をサイズ変更する。アプリケーション の片方の部分をもう片方より小さくする。 ４．ウィンドウのサイズを今一度変更する。 アプリケーションの上半分と下半分は、分割線の場所に依って大きく成ったり小さく成ったりする。 ５．分割線をアプリケーションの出来る丈上迄ドラッグする。 アプリケーションの上半分が消え、下半分丈が表示される。 ６．分割線をアプリケーションの出来る丈下迄ドラッグする。 アプリケーションの下半分は画面上から消えない。此れは、3 つ目の行の MinHeight プロパティを 70 に設定して居る為で有る。 ※ 70 = 60（ボタンの高さ）+ 5（ボタンの上部余白）+ 5（ボタンの下部余白） ７．ウィンドウを閉じる。
■ チュートリアルの完了 完成した MainWindow.xaml ファイルを次に示します。 XAML <Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://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>
http://msdn.microsoft.com/ja-jp/library/bb546954(v=vs.110).aspx
GridSplitter.ResizeDirection プロパティ （WPF） GridSplitter コントロールが行と列の孰れのサイズを変更するかを示す値を取得・設定する。 プ ロ パ テ ィ 値 の 型 は 、 System.Windows.Controls.GridResizeDirection で 、 既 定 値 は 、 GridResizeDirection.Auto で有る。 GridResizeDirection 列挙体 メンバー名 説明
Auto 領 域 は 、GridSplitter の HorizontalAlignment 、 VerticalAlignment 、 ActualWidth、ActualHeight の各プロパティの値に基づいて再配分される。 ・HorizontalAlignment が Stretch に設定されて居ない場合、領域は列間で
再配分される。
・HorizontalAlignment が Stretch で、VerticalAlignment が Stretch に設 定されて居ない場合、領域は行間で再配分される。 ・以下の条件に該当する場合、領域は列間で再配分される。 ・HorizontalAlignment に Stretch が設定されて居る。 ・VerticalAlignment に Stretch が設定されて居る。 ・ActualWidth が、ActualHeight 以下の値で有る。 ・以下の条件に該当する場合、領域は行間で再配分される。 ・HorizontalAlignment が Stretch に設定される。 ・VerticalAlignment が Stretch に設定される。 ・ActualWidth が ActualHeight より大きい値で有る。 Columns 領域が列間で再配分される。 Rows 領域が行間で再配分される。 行 や 列 の サ イ ズ を 変 更す る GridSplitter を指定するには、HorizontalAlignment プロパティと VerticalAlignment プ ロ パ テ ィ を 設 定 す る 。 併 し 、 HorizontalAlignment プ ロ パ テ ィ や VerticalAlignment プロパティを設定しても必要な動作を実現出来ない場合は、 ResizeDirection や ResizeBehavior の既定値を変更する。 DockPanel.LastChildFill プロパティ （WPF） DockPanel 内の最後の子要素を使用可能な残りの領域全体に引き伸ばすか何うかを示す値を取得・設定 する。 プロパティ値の型は、System.Boolean で、既定値は true で有る。 LastChildFill プロパティを true（既定値）に設定すると、DockPanel の最終の子要素は、最終の子要 素に設定されて居る他のドッキング値は関係無く、常に残りの領域を満たす。 子要素を別の方向にドッキングするには、LastChildFill プロパティを false に設定して、最後の子要素 でドッキング方向を明示的に指定する必要が有る。
DockPanel.Dock 添付プロパティ （WPF） 親DockPanel 内の子要素の位置を示す値を取得・設定する。 プロパティ値の型は、System.Windows.Controls.Dock で、既定値は Left で有る。 Dock 列挙体 メンバー名 説明 Left DockPanel の左側に配置される子要素。 Top DockPanel の上部に配置される子要素。 Right DockPanel の右側に配置される子要素。 Bottom DockPanel の下部に配置される子要素。 LastChildFill プロパティを true（既定値）に設定すると、DockPanel の最終の子要素は、最終の子要 素に設定されて居る他のドッキング値は関係無く、常に残りの領域を満たす。 子要素を別の方向にドッキングするには、LastChildFill プロパティを false に設定して、最後の子要素 でドッキング方向を明示的に指定する必要が有る。
※ DockPanel の子要素の画面上での位置は、夫々の子要素の Dock プロパティと DockPanel の下の子 要素の相対順序に依って決まる。 従って、DockPanel の下の子要素の順序に依って、同じ Dock プロパティ値を持つ一連の子要素が 画面上の異なる位置に配置される可能性が有る。 DockPanel は子要素を順に反復処理し、残りの領域に依って各要素の位置を設定する為、子の順序 は配置に影響を及ぼす。 TextBoxBase.IsReadOnly プロパティ （WPF） テキスト編集コントロールが現在操作中のユーザーに対して読み取り専用か何うかを示す値を取得・設 定する。 プロパティ値の型は、System.Boolean で、既定値は false で有る。 此の値は、現在コントロールを操作して居るユーザー以外には影響しない。テキスト編集コントロール の内容は、プログラムで常に修正する事が出来る。 ContentControl.Content プロパティ （WPF） ContentControl のコンテンツを取得・設定する。 プロパティ値の型は、System.Object で。既定値は Nothing で有る。
Content プロパティは Object 型で有る為、ContentControl に格納出来る項目に制限は無い。Content は、ContentControl の ControlTemplate に有る ContentPresenter に依って表示される。
WPF の総ての ContentControl 型では、其の既定の ControlTemplate 内に ContentPresenter が存在す る。
