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