WPF チュートリアル WPF デザイナでの簡単な WPF アプリケーションの作成 此のチュートリアルでは WPF デザイナで簡単な WPF(Windows Presentation Foundation) アプリケーションを作成する方法を示す 此のチュートリアルでは下記のタスクを行う プロジェクトを作成する レイアウトを作成する レイアウトにコントロールを追加する レイアウト関連のプロパティを設定する データソースを作成する データソースに接続する コントロールのプロパティをバインドする ファイルシステムを検索出来る簡単なアプリケーションを作成する アプリケーションのユーザーインターフェイスは XAML(Extensible Application Markup Language) で実装する 詳細に付いては WPF XAML を参照され度い 最終的なアプリケーションを 下図に示す プロジェクトの作成 最初にアプリケーションのプロジェクトを作成する プロジェクトを作成するには 1.Visual Basic 又は Visual C# で FolderExplorer と謂う名前の新しい WPF アプリケーションプロジェクトを作成する -1-
1 Visual Studio 2012 RC を起動する 2 [ ファイル ] メニューの [ 新規作成 ] をポイントし [ プロジェクト ] をクリックする [ 新しいプロジェクト ] ダイアログボックスが表示される 3 [ インストールされたテンプレート ] ペインで Visual Basic 又は Visual C# を展開し [Windows] を選択する 4 中央のペインの上で ドロップダウンリストからターゲットフレームワークを選択する 5 中央のペインで [WPF アプリケーション ] テンプレートをクリックする 6 [ 名前 ] ボックスにプロジェクトの名前を指定する 7 [ 場所 ] ボックスに プロジェクトを保存するフォルダーを指定する 8 [OK] をクリックする WPF Designer for Visual Studio が開き プロジェクトの MainWindow が表示される 2. デザインビューでウィンドウを選択する WPF Designer for Visual Studio では マウスジェスチャやキーボードショートカットを使用して 要素を選択したり移動したり出来る 要素を選択する方法は複数有る 例えば Tab キーを使ってコントロール間を移動する カーソルを XAML ビューのコントロールタグ上に置く デザイナーの下部に有るタグナビゲーターを使用する [ ドキュメントアウトライン ] ウィンドウを使用する -2-
等の方法で個々のコントロールを選択出来る 選択されて居るコントロールの位置は マウス又は矢印キーで調整出来る デザイン画面上で要素を選択するには デザインビューでデザイン画面にフォーカスが有る状態で 目的の要素が選択される迄 Tab キーを押す Shift キーを押し乍 Tab キーを押すと 逆方向に進む XAML ビューで カーソルを要素の開始タグ 又は 終了タグの上へ移動する 要素がタグナビゲーターに表示されて居れば 其れをクリックする [ ドキュメントアウトライン ] ウィンドウで要素をクリックする デザイナー内で現在選択されて居る要素の親を選択するには Esc キーを押す 操作の精度を上げるには 領域を拡大してクリック可能な領域を追加する デザイン画面上で複数のコントロールを選択するには デザインビューで 目的の総てのコントロールが囲まれる様にマウスをドラッグして四角形の選択範囲を作成する デザインビューで Ctrl キー又は Shift キーを押し乍 目的のコントロールを 1 個宛クリックする キーボード丈を使ってデザイン画面上の複数のコントロールを選択する方法は無い [ ドキュメントアウトライン ] ウィンドウで Ctrl キーを押し乍 目的のコントロールをクリックする Ctrl キーを押し乍 Space キーを押して 複数のコントロールを選択する事も出来る Esc キーを押すと 複数の選択項目が 1 個の選択項目に縮小される 選択されて居るコントロールをデザイナー内で移動するには マウスの左ボタンを押した儘 選択されて居るコントロールを目的の位置迄ドラッグする 選択されて居るコントロールが Grid DockPanel StackPanel 等のパネルの場合は 左上に表示される移動ハンドルを使用してパネルを移動する 矢印キーを押して 選択されて居るコントロールの位置を調整する 移動ではなく切り取りと貼り付けが必要な場合も有る 3.[ プロパティ ] ウィンドウで Title プロパティの値を Folder Explorer に設定する レイアウトの作成 レイアウトは アプリケーションのメインウィンドウでのコントロールの配置を定義する 此処では アプリケーションのコントロールが含まれるレイアウト要素を作成する方法を示す -3-
レイアウトを作成するには 1. ウィンドウ上のルート Grid コントロールを選択する 2. グリッドに 2 個目の行を追加する 詳細に付いては 方法 : グリッドに行と列を追加する ( ドキュメント内 ) を参照され度い 3. グリッドに 2 個目の列を追加する レイアウトへのコントロールの追加 レイアウトを定義すれば 此処にコントロールを配置出来る レイアウトにコントロールを追加するには 1.[ ツールボックス ] から TreeView コントロールをグリッドの最初のセルにドラッグする 2.[ ツールボックス ] から ListView コントロールを グリッドの最初の行と 2 個目の列を占めるセルにドラッグする 3.[ ツールボックス ] から ListView コントロールを グリッドの 2 個目の行と 2 個目の列を占めるセルにドラッグする レイアウト関連のプロパティの設定 此処では コントロールのレイアウト関連のプロパティを設定する方法を示す 各コントロールのプロパティを設定すれば レイアウトは最終的なアプリケーションの図と粗同じに成る レイアウト関連のプロパティを設定するには 1.TreeView コントロールを選択する 2. 以下に示す様に [ プロパティ ] ウィンドウで 次のプロパティを設定する プロパティ Grid.ColumnSpan 1 Grid.RowSpan 2 Height Auto HorizontalAlignment Stretch Margin 0,0,0,0 VerticalAlignment Stretch Width Auto TreeView コントロールは 最初のグリッド列に収まり 2 つのグリッド行を占めるサイズに成る 値 3. 両方の ListView コントロールを選択する 4. 以下に示す様に [ プロパティ ] ウィンドウで 次のプロパティを設定する -4-
プロパティ Grid.ColumnSpan 1 Grid.RowSpan 1 Height Auto HorizontalAlignment Stretch Margin 0,0,0,0 VerticalAlignment Stretch Width Auto ListView コントロールは 各グリッドセルに収まるサイズに成る 値 5.[ ドキュメントアウトライン ] ウィンドウを開く [ ドキュメントアウトライン ] ウィンドウは XAML ドキュメントを階層形式で参照する場合に役立つ [ ドキュメントアウトライン ] ウィンドウでは XAML 要素のプレビューや削除を行う事が出来る ドキュメントアウトラインウィンドウを開くには [ 表示 ] メニューの [ 其の他のウィンドウ ] をポイントし [ ドキュメントアウトライン ] をクリックする ( ショートカットキーの Ctrl + Alt + T でも可能 ) 6. グリッドの ColumnDefinitions ノードを展開する 7. 最初の ColumnDefinition 項目を選択する -5-
8.[ プロパティ ] ウィンドウで Width プロパティを * に設定する 9.[ ドキュメントアウトライン ] ウィンドウで 2 番目の ColumnDefinition を選択する A.[ プロパティ ] ウィンドウで Width プロパティを 2* に設定する 列のサイズが変更され 1 番目の列はウィンドウ幅の 3 分の 1 2 番目の列はウィンドウ幅の 3 分の 2 を占める様に成る B.[ ドキュメントアウトライン ] ウィンドウで グリッドの RowDefinitions ノードを展開する C. 最初の RowDefinition 項目を選択する D.[ プロパティ ] ウィンドウで Height プロパティを * に設定する E.[ ドキュメントアウトライン ] ウィンドウで 2 番目の RowDefinition を選択する F.[ プロパティ ] ウィンドウで Height プロパティを * に設定する 行のサイズが変更され 各行がウィンドウの高さの半分を占める様に成る G. ソリューションをビルドして実行する H. ウィンドウのサイズを変更して TreeView コントロール及び ListView コントロールのサイズが動的に変わる事を確認する データソースの作成 FolderExplorer アプリケーションのデータソースは Folder と謂う名前のクラスで有る 此のクラスは シンプルなモデルのファイルシステムを提供する 各 Folder インスタンスが SubFolders コレクションと Files コレクションを持つ データソースを作成するには 1.Folder と謂う名前の新しいクラスを FolderExplorer プロジェクトに追加する プロジェクトに追加出来るファイルの種類は プロジェクトの作成に使用されたプロジェクトテン -6-
プレート及びプロジェクトが対象とする.NET Framework のバージョンに依り決まる 例えば Visual Basic プロジェクトテンプレートを使用して作成したプロジェクトには 新しい.vb ファイルを追加出来るが Visual C++ プロジェクトテンプレートを使用して作成したプロジェクトには 新しい.vb ファイルは追加出来ない 亦.NET Framework の新しいバージョン用に設計された項目テンプレートは 以前のバージョンを対象とするプロジェクト用のテンプレートの一覧には表示されない 1. ソリューションエクスプローラーで 項目を追加するプロジェクトを選択する 2.[ プロジェクト ] メニューの [ 新しい項目の追加 ] をクリックする 3.[ カテゴリ ] ペインで カテゴリを選択する 4.[ テンプレート ] ペインで項目テンプレートを選択する ( 此処では クラス ) 5.[ 開く ] をクリックする (Folder と謂う名前を付ける ) 2. 此の Folder ソースコードファイルの内容を 次のコードに置き換える Visual Basic Imports System Imports System.IO Imports System.Linq Imports System.Collections.Generic Imports System.Collections.ObjectModel Imports System.Text Public Class Folder Private _folder As DirectoryInfo Private _subfolders As ObservableCollection(Of Folder) Private _files As ObservableCollection(Of FileInfo) Public Sub New() Me.FullPath = "c: " End Sub 'New Public ReadOnly Property Name() As String Get Return Me._folder.Name End Get End Property Public Property FullPath() As String Get Return Me._folder.FullName End Get Set If Directory.Exists(value) Then Me._folder = New DirectoryInfo(value) -7-
Else Throw New ArgumentException("must exist", "fullpath") End If End Set End Property ReadOnly Property Files() As ObservableCollection(Of FileInfo) Get If Me._files Is Nothing Then Me._files = New ObservableCollection(Of FileInfo) Dim fi As FileInfo() = Me._folder.GetFiles() Dim i As Integer For i = 0 To fi.length - 1 Me._files.Add(fi(i)) Next i End If Return Me._files End Get End Property ReadOnly Property SubFolders() As ObservableCollection(Of Folder) Get If Me._subFolders Is Nothing Then Try Me._subFolders = New ObservableCollection(Of Folder) Dim di As DirectoryInfo() = Me._folder.GetDirectories() Dim i As Integer For i = 0 To di.length - 1 Dim newfolder As New Folder() newfolder.fullpath = di(i).fullname Me._subFolders.Add(newFolder) Next i Catch ex As Exception System.Diagnostics.Trace.WriteLine(ex.Message) End Try End If Return Me._subFolders End Get End Property End Class Visual C# using System; using System.IO; using System.Linq; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Text; -8-
namespace FolderExplorer public class Folder private DirectoryInfo _folder; private ObservableCollection<Folder> _subfolders; private ObservableCollection<FileInfo> _files; public Folder() this.fullpath = @"c: "; public string Name get return this._folder.name; public string FullPath get return this._folder.fullname; set if (Directory.Exists(value)) this._folder = new DirectoryInfo(value); else throw new ArgumentException("must exist", "fullpath"); public ObservableCollection<FileInfo> Files get if (this._files == null) this._files = new ObservableCollection<FileInfo>(); FileInfo[] fi = this._folder.getfiles(); -9-
for (int i = 0; i < fi.length; i++) this._files.add(fi[i]); return this._files; public ObservableCollection<Folder> SubFolders get if (this._subfolders == null) this._subfolders = new ObservableCollection<Folder>(); DirectoryInfo[] di = this._folder.getdirectories(); for (int i = 0; i < di.length; i++) Folder newfolder = new Folder(); newfolder.fullpath = di[i].fullname; this._subfolders.add(newfolder); return this._subfolders; コードの入力が終われば アセンブリを生成する為に ビルドして置く データソースへの接続 WPF コントロールは データバインディングに依りデータソースと接続する 此処では ObjectDataProvider を宣言し バインドする方法を示す データソースに接続するには 1.WPF デザイナで MainWindow.xaml を開く 2.XAML ビューで 別の xmlns 割り当てに依り 次の XAML を <Window> タグに挿入する 詳細に付いては 方法 : 名前空間を XAML にインポートする を参照され度い xmlns:my="clr-namespace:folderexplorer" 3. 次の XAML を開始 <Window> タグの後で開始 <Grid> タグの前に挿入する -10-
XAML <Window.Resources> <ObjectDataProvider x:key="rootfolderdataprovider" > <ObjectDataProvider.ObjectInstance> <my:folder FullPath="c: "/> </ObjectDataProvider.ObjectInstance> </ObjectDataProvider> <HierarchicalDataTemplate DataType = "x:type my:folder" ItemsSource = "Binding Path=SubFolders"> <TextBlock Text="Binding Path=Name" /> </HierarchicalDataTemplate> </Window.Resources> 4.<TreeView> タグを次の XAML に置き換える XAML <TreeView Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="0,0,0,0" Name="treeView1" > <TreeViewItem ItemsSource="Binding Path=SubFolders, Source=StaticResource RootFolderDataProvider" Header="Folders" /> </TreeView> コントロールのプロパティのバインディング コントロールのプロパティを別のコントロールにバインドして 自動プロパティ更新を有効にする コントロールのプロパティをバインドするには 1.XAML ビューで 両方の <ListView> タグを次の XAML に置き換える XAML <ListView Name="listView1" ItemsSource="Binding Path=SelectedItem.SubFolders, ElementName=treeView1, Mode=OneWay" Grid.Column="1" Grid.RowSpan="1" /> <ListView Name="listView2" ItemsSource="Binding Path=SelectedItem.Files, ElementName=treeView1, Mode=OneWay" Grid.Column="1" Grid.Row="1" /> 2. ソリューションをビルドして実行する -11-
3. フォルダーアイテムを展開し C: ドライブのフォルダーを表示する 4. サブフォルダーをクリックし 2 個の ListView コントロールの内容を確認して観て欲しい サブフォルダーは 上の ListView コントロールに表示され ファイルは 下の ListView コントロールに表示される http://msdn.microsoft.com/ja-jp/library/bb546972(v=vs.110).aspx http://msdn.microsoft.com/ja-jp/library/ee649089(v=vs.110).aspx -12-
方法 : グリッドに行と列を追加する Windows Presentation Foundation(WPF) の Grid コントロールでは グリッドベースのレイアウトを作成する事に依り コントロールの位置を素早く簡単に決定したり調整したり出来る デザイン時に WPF Designer で Grid コントロールに行と列を追加出来る 既定では 新しい行と列は Star サイズ変更を使用する 行や列にコンテンツを追加する前に行や行のサイズを Auto に設定すると 此の行や列はデザイナーに表示されない 此の為 正しい行や列にコントロールを配置する事が難しく成る 此れ以降 此の様な動作を回避するには 作業中はスターサイズ変更を使用し 作業の終了時に Auto に変更する 此処では Grid に行と列を追加する 3 つの方法を示す グリッドから行と列を削除する事も出来る 詳細に付いては 方法 : グリッドから行と列を削除する ( ドキュメント内 ) を参照され度い デザイナーの使用 WPF Designer で Grid コントロールを選択すると レールが上側と左側に表示される 此のレールを使用して Grid に直接行と列を追加出来る XAML ビューは 新しい行と列で自動的に更新される FlowDirection プロパティが RightToLeft に設定されて居る場合 行のレールは Grid の右側に表示される デザイナーを使用してグリッドに行を追加するには 1.WPF Designer で Grid コントロールを選択する 2. サイドレールの外側の縁の上にポインターを置く ポインターが十字カーソルに変わり 行が追加される位置を示すグリッド線が表示される 3. レールをクリックして行を設定する グリッド線が其の場所に固定され グリッド線インジケーターがグリッド線の端のレール上に表示される グリッド内のグリッド線 又は レール内のグリッド線インジケーターをドラッグする事に依り 行のサイズを調整出来る 4.( 省略可能 ) 追加する行が複数有る場合は 手順 2 と手順 3 を繰り返す デザイナーを使用してグリッドに列を追加するには 1.WPF Designer で Grid コントロールを選択する 2. 上部レールの上端の上にポインターを置く ポインターが十字カーソルに変わり 列が追加される位置を示すグリッド線が表示される 3. レールをクリックして 列を設定する -13-
グリッド線が其の場所に固定され グリッド線インジケーターがグリッド線の端のレール上に表示される グリッド内のグリッド線 又は レール内のグリッド線インジケーターをドラッグする事に依り 列のサイズを調整出来る 4.( 省略可能 ) 追加する列が複数有る場合は 手順 2 と手順 3 を繰り返す コレクションエディターの使用 コレクションエディターを使用して Grid に行と列を追加する事も出来る コレクションエディターを使用して行と列を構成すると デザインビューと XAML ビューが自動的に更新される コレクションエディターを使用してグリッドに行を追加するには 1.WPF Designer で Grid コントロールを選択する 2.[ プロパティ ] ウィンドウで RowDefinitions プロパティを見付け プロパティの値列の省略記号ボタンをクリックする [ コレクションエディター ] ダイアログボックスが表示される 3.[ 追加 ] をクリックし 新しい行を追加する 4.( 省略可能 ) 行のプロパティを設定する 5.( 省略可能 ) 追加する行が複数有る場合は 手順 3 と手順 4 を繰り返す 6.[OK] をクリックして [ コレクションエディター ] を閉じ WPF Designer に戻る コレクションエディターを使用してグリッドに列を追加するには 1.WPF Designer で Grid コントロールを選択する 2.[ プロパティ ] ウィンドウで ColumnDefinitions プロパティを見付け プロパティの値列の省略記号ボタンをクリックする [ コレクションエディター ] ダイアログボックスが表示される 3.[ 追加 ] をクリックし 新しい列を追加する 4.( 省略可能 ) 列のプロパティを設定する 5.( 省略可能 ) 追加する列が複数有る場合は 手順 3 と手順 4 を繰り返す 6.[OK] をクリックして [ コレクションエディター ] を閉じ WPF Designer に戻る -14-
XAML エディターの使用 XAML に直接入力する事に依り Grid に行と列を追加する事も出来る デザインビューは 新しい行と列で自動的に更新される XAML エディターを使用してグリッドに行を追加するには 1.XAML エディターで Grid 要素を見付ける 2.Grid 要素の子として Grid.RowDefinitions 要素を追加する コードは 次の様に成る XAML <Grid> <Grid.RowDefinitions> </Grid.RowDefinitions> </Grid> 3.RowDefinition 要素を追加する 例を次に示す XAML <Grid.RowDefinitions> <RowDefinition Height="100" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="5*" /> </Grid.RowDefinitions> XAML エディターを使用してグリッドに列を追加するには 1.XAML エディターで Grid 要素を見付ける 2.Grid 要素の子として Grid.ColumnDefinitions 要素を追加する コードは 次の様に成る XAML <Grid> <Grid.ColumnDefinitions> </Grid.ColumnDefinitions> </Grid> 3.ColumnDefinition 要素を追加する 例を次に示す XAML <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="5*" /> </Grid.ColumnDefinitions> -15-
方法 : グリッドから行と列を削除する Windows Presentation Foundation(WPF) の Grid コントロールでは グリッドベースのレイアウトを作成する事に依り コントロールの位置を簡単に決定したり調整したり出来る デザイン時に WPF Designer for Visual Studio で Grid コントロールから行と列を削除出来る 行や列を削除すると 其の行や列に合ったコントロールを再配置する必要が有る 其れには 影響を受けるコントロールの Grid.Row プロパティや Grid.Column プロパティを変更する 此処では Grid から行と列を削除する 3 つの方法に付いて説明する グリッドに行と列を追加する方法の詳細に付いては 方法 : グリッドに行と列を追加する ( 前述 ) を参照され度い デザイナーの使用 デザインビューでは Grid コントロールから既存の行や列を削除出来る デザイナーを使用してグリッドから行と列を削除するには 1.WPF Designer で 少なく共 2 つの列や 2 つの行を持つ Grid コントロールを選択する 2. グリッドレールのグリッド線インジケーター上にポインターを移動する グリッド線インジケーターがオレンジ色に変わり マウスポインターが変わって再配置を示す 3. グリッド線インジケーターをグリッドの外にドラッグする クリックすると グリッド線とグリッド線インジケーターが赤色に変わる グリッドの外にドラッグすると マウスポインターが変わって 削除を示す [X] が表示される 4. マウスのボタンを離す グリッド線と 其れに対応する行や列が削除される 残りの行と列のプロパティは 適切に更新される コレクションエディターの使用 コレクションエディターを使用して Grid から行と列を削除出来る コレクションエディターを使用して行と列を構成すると デザインビューと XAML ビューが自動的に更新される コレクションエディターを使用してグリッドから行を削除するには 1.WPF Designer で Grid コントロールを選択する 2.[ プロパティ ] ウィンドウで RowDefinitions プロパティを見付け プロパティの値列の省略記号ボタンをクリックする [ コレクションエディター ] ダイアログボックスが表示される -16-
3. 左側のペインで 削除する RowDefinition をクリックする 4.[ 項目を削除する ] をクリックし 行を削除する 5.( 省略可能 ) 削除する行が複数有る場合は 手順 3 と手順 4 を繰り返す 6.[OK] をクリックして [ コレクションエディター ] を閉じ WPF Designer に戻る コレクションエディターを使用してグリッドから列を削除するには 1.WPF Designer で Grid コントロールを選択する 2.[ プロパティ ] ウィンドウで ColumnDefinitions プロパティを見付け プロパティの値列の省略記号ボタンをクリックする [ コレクションエディター ] ダイアログボックスが表示される 3. 左側のペインで 削除する ColumnDefinition をクリックする 4.[ 項目を削除する ] をクリックし 列を削除する 5.( 省略可能 ) 削除する列が複数有る場合は 手順 3 と手順 4 を繰り返す 6.[OK] をクリックして [ コレクションエディター ] を閉じ WPF Designer に戻る XAML エディターの使用 XAML エディターで行や列を削除する事に依り 手動で Grid から行と列を削除する事も出来る デザインビューは自動的に更新される XAML エディターを使用してグリッドから行と列を削除するには 1.XAML エディターで 行と列が含まれる Grid 要素を見付ける 例を次に示す XAML <Grid> <Grid.RowDefinitions> <RowDefinition Height="100" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="5*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="5*" /> </Grid.ColumnDefinitions> </Grid> 2. 不要になった行と列を削除する -17-
FrameworkElement.Width(Height) プロパティ (WPF) 要素の幅 ( 高さ ) の値 (Double の値 ) を取得 設定する Double qualifieddouble Auto 0.0 以上の Double 型の値の文字列表現 此の値は device-independent unit (1/96th inch) 単位として解釈される 文字列には 小数点を明示的に含める必要は無い (1.0 は 1 と表記しても良い ) 上記の double 型の値に 単位宣言文字列 px in cm pt の孰れかを後に続けた物 px( 既定値 ) は device-independent units (1/96th inch per unit) で有る in はインチで有る (1in=96px) cm はセンチメートルで有る (1 cm=(96/2.54) px) pt はポイントで有る (1pt=(96/72) px) 自動サイズ変更を有効にする 此のプロパティは 幅情報 ( 高さ情報 ) を指定する FrameworkElement の 3 つの書き込み可能なプロパティの内の 1 つで有る 他の 2 つは MinWidth と MaxWidth(MinHeight と MaxHeight) で有る 此等の値の間に競合が発生した場合は 先ず MinWidth(MinHeight) 次に MaxWidth(MaxHeight) を適用し 此の 2 つが範囲内に有る時は 最後に Width(Height) を適用して実際の幅を決定する 此のプロパティの戻り値は 常に設定値と同じで有る 此れに対し ActualWidth(ActualHeight) の値は異なる場合が有る 先ず 何等かの理由で推奨サイズがレイアウトに依って拒否される場合が有る 亦 レイアウトシステム其の物が プロパティシステムに依る Width(Height) の設定に対して非同期で動作する為 特定のサイズ設定プロパティの変更が未だ処理されて居ない場合も有る Height プロパティは 此の要素が他の要素内の子要素で有る場合は 値を設定しても 実際には推奨値にしか成らない 其の値は レイアウトシステムや親要素の特定のレイアウトロジックに依って 強制力の無い入力としてレイアウトプロセスで使用される 実際問題として FrameworkElement は殆ど常に他の要素の子要素に成って居る 此れは Window で Height を設定する場合でも同じで有る (Window 場合 其の値は 基に成るアプリケーションモデルで アプリケーションをホストする Hwnd を作成する基本的な描画の前提が確立される時に使用される ) Double 型の値を受け入れる事が出来る丈で無く 此のプロパティは Double.NaN にする事も出来る コードで自動サイズ変更動作を指定する場合に此の値を使用する XAML では 値を文字列 "Auto"( 大文字 / 小文字の区別無し ) に設定して自動サイズ変更動作を有効にする 自動サイズ変更動作では 要素の幅 ( 高さ ) は 利用可能な最大の幅 ( 高さ ) に成る 但し 特定のコントロールで既定のテーマスタイルに依って既定値が指定される場合も多く 其の場合は自動サイズ変更動作は ( 改めて有効にしない限り ) 無効に成る Double 型の値に対する値の制約は ValidateValueCallback 機構に依って適用される 無効な値を設定しようとすると 実行時例外がスローされる 検証チェックに加えて レイアウトシステムに依って適用される Width(Height) には非決定性の上限値が有る ( 此れは Single.MaxValue より大きいが Double.MaxValue より小さい 非常に大きな値で有る ) 此の上限値を超えると 要素は描画されず 例外もスローされない 表示可能な最大サイズを大きく超える値を Width(Height) に設定しては成らない 此の非決定性の上限値を超える可能性が有る -18-
FrameworkElement.HorizontalAlignment プロパティ (WPF) 此の要素が親要素 ( パネルコントロールや項目コントロール等 ) の一部と成る場合に適用される水平方向の配置の特性を取得 設定する HorizontalAlignment 列挙体 メンバー名 説明 Left 親要素のレイアウトスロットの左側に配置される様に指定する Center 親要素のレイアウトスロットの中央に配置される様に指定する Right 親要素のレイアウトスロットの右側に配置される様に指定する Stretch 親要素のレイアウトスロット全体に引き伸ばして配置される様に指定する 要素の Height プロパティと Width プロパティを明示的に設定すると レイアウト時に此等の測定値が優先されて HorizontalAlignment を Stretch に設定した場合の通常の効果が取り消される HorizontalAlignment は サブクラス化された要素 ( 特に コントロール ) 内で異なる値に設定される事が良く有る 此れは 一般に 既定値を設定する為の異なるメタデータを持つ場合 又は 此の依存関係プロパティ値を異なる値に設定する既定のスタイルが適用されて居る場合に発生する 例えば Label は FrameworkElement から直接 HorizontalAlignment を継承するが Label コントロールの HorizontalAlignment の見掛け上の既定値は Left で有る 此れは スタイルのコントロールテンプレート内で 此の値が Label の既定のスタイルの範囲にリセットされた為で有る Canvas は絶対配置に基づいて居る為 レイアウトを構成する際に HorizontalAlignment を使用しない 亦 Label は Label や其の派生クラスに依って継承されると 此の依存関係プロパティの既定値を Left に再定義する FrameworkElement.VerticalAlignment プロパティ (WPF) 此の要素が親要素 ( パネルコントロールや項目コントロール等 ) の一部と成る場合に適用される水平方向 ( 垂直方向 ) の配置の特性を取得 設定する VerticalAlignment 列挙体 メンバー名 説明 Top 子要素を 親のレイアウトスロットの上端に揃えて配置する様に指定する Center 子要素を 親のレイアウトスロットの中央に揃えて配置する様に指定する Bottom 子要素を 親のレイアウトスロットの下端に揃えて配置する様に指定する Stretch 子要素を 親のレイアウトスロット全体に引き伸ばす様に指定する 要素の Height プロパティと Width プロパティを明示的に設定すると レイアウト時に此等の測定値が優先されて 此のプロパティを Stretch に設定した場合の通常の効果が取り消される VerticalAlignment は サブクラス化された要素 ( 特に コントロール ) 内で異なる値に設定される事が良く有る 此れは 一般に 既定値を設定する為の異なるメタデータを持つ場合 又は 此の依存関係プロパティ値を異なる値に設定する既定のスタイルが適用されて居る場合に発生する 例えば ComboBoxItem は FrameworkElement から直接 VerticalAlignment を継承するが ComboBoxItem コントロールの VerticalAlignment の見掛け上の既定値は Center で有る 此れは スタイルのコントロールテンプレート内で 此の値が ComboBoxItem の既定のスタイルの範囲にリセットされた為で有る Canvas は絶対配置に基づいて居る為 レイアウトを構成する際に VerticalAlignment を使用しない 亦 ComboBoxItem は ComboBoxItem や其の派生クラスに依って継承されると 此のプロパティの既定値を Center に再定義する -19-
FrameworkElement.Margin プロパティ (WPF) 要素の外側の余白を取得 設定する 此の余白は 此の要素と レイアウトでユーザーインターフェイス (UI) が作成される時に隣接する他の要素との間の領域で有る 共有要素はピア要素 ( 共通の親コントロールのコレクションに含まれる他の要素等 ) の場合も有れば 此の要素の親の場合も有る Margin は 余白を非対称に設定出来る様に 数値ではなく Thickness 構造体として設定される Thickness 構造体自体が文字列の型変換をサポートして居る為 XAML 属性構文でも非対称の Margin を指定出来る ゼロ以外の余白は 要素レイアウトの ActualWidth と ActualHeight の外側の領域に適用される 余白はレイアウトの兄弟要素の間で加算される 例えば 隣接する 2 つの要素の隣接部の余白が孰れも 30 に設定されて居た場合 其の要素間の領域は 60 単位に成る 通常 余白が設定されて居る要素では 割り当てられた四角形の領域が其の要素 ( 余白 + コンテンツ ) に対して小さ過ぎる場合でも 指定されて居る Margin のサイズは制限されない 代わりに要素のコンテンツの領域が レイアウトの計算時に制限される コンテンツの制限が 0 に達しない限り 余白が制限される事は無い Grid.RowSpan 添付プロパティ (WPF) Grid 内で子コンテンツが幾つの行に跨って表示されるかを示す値を取得 設定する Grid 内の行は RowDefinition 要素を使用して定義される プロパティ値の型は System.Int32 で 既定値は 1 で有る Grid.ColumnSpan 添付プロパティ (WPF) Grid 内で子コンテンツが幾つの列に跨って表示されるかを示す値を取得 設定する プロパティ値の型は System.Int32 で 既定値は 1 で有る Grid 内の列は ColumnDefinition 要素を使用して定義される ObservableCollection(Of T) クラス (.NET Framework) 項目が追加 削除された時 又は リスト全体が更新された時に通知を提供する動的なデータコレクションを表す (System.Collections.ObjectModel 名前空間 ) 項目が追加 削除 変更 移動された場合 又は リスト全体が更新された時に CollectionChanged イベントが発生し 亦 プロパティ値が変更された時に PropertyChanged イベントが発生する -20-