Silverlight-dynamic-layout
Silverlight-動的レイアウト
*Canvas* は、Silverlightのすべてのレイアウトパネルの中で最も面白くありません。 他のパネルでは、*ダイナミックレイアウト*が有効になります。つまり、表示されるアイテムの数が変化したり、表示される情報のサイズが変わったり、ユーザーがブラウザーのサイズを変更したためにアプリケーションで使用できるスペースの量が変化したりすると、レイアウトが適応します。Silverlightは、動的レイアウト戦略を備えた2つのパネルを提供します。
- StackPanel -要素を垂直または水平スタックに配置します。
- Grid -柔軟なグリッドのような、またはテーブルのようなレイアウトシステムを提供します。
スタックパネル
スタックパネルは、XAMLのシンプルで便利なレイアウトパネルです。 Stack Panel では、子要素は、方向プロパティに基づいて水平または垂直に1行に配置できます。 あらゆる種類のリストを作成する必要がある場合によく使用されます。 ItemsControlはスタックパネルを使用します。 Menu、ListBox および ComboBox は、デフォルトの内部レイアウトパネルです。
以下に、 StackPanel で一般的に使用される properties を示します。
StackPanelの最も一般的に使用されるプロパティを以下に示します。
| Sr. No. | Property & Description |
|---|---|
| 1 |
Background パネルのコンテンツ領域を塗りつぶすブラシを取得または設定します。 （Panelから継承） |
| 2 |
Children このPanelの子要素のUIElementCollectionを取得します。 （Panelから継承されます。） |
| 3 |
Height 要素の推奨される高さを取得または設定します。 （FrameworkElementから継承されます。） |
| 4 |
ItemHeight WrapPanelに含まれるすべての項目の高さを指定する値を取得または設定します。 |
| 5 |
ItemWidth WrapPanelに含まれるすべての項目の幅を指定する値を取得または設定します。 |
| 6 |
LogicalChildren このPanel要素の論理子要素を反復処理できる列挙子を取得します。 （Panelから継承されます。） |
| 7 |
LogicalOrientation パネルが1次元のみのレイアウトをサポートする場合、パネルの方向。 （Panelから継承されます。） |
| 8 |
Margin 要素の外側の余白を取得または設定します。 （FrameworkElementから継承されます。） |
| 9 |
Name 要素の識別名を取得または設定します。 この名前は、イベントハンドラコードなどの分離コードがXAMLプロセッサによる処理中に構築された後にマークアップ要素を参照できるように、参照を提供します。 （FrameworkElementから継承されます。） |
| 10 |
Orientation 子コンテンツが配置される次元を指定する値を取得または設定します。 |
| 11 |
Parent この要素の論理的な親要素を取得します。 （FrameworkElementから継承されます。） |
| 12 |
Resources ローカルに定義されたリソースディクショナリを取得または設定します。 （FrameworkElementから継承されます。） |
| 13 |
Style この要素がレンダリングされるときに使用されるスタイルを取得または設定します。 （FrameworkElementから継承されます。） |
| 14 |
Width 要素の幅を取得または設定します。 （FrameworkElementから継承されます。） |
次の例は、子要素を StackPanel に追加する方法を示しています。 以下に、いくつかのプロパティを持つStackPanel内に*ボタン*が作成されるXAML実装を示します。
<UserControl x:Class = "DynamicLayout.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<StackPanel>
<Button x:Name = "button" Content = "Button" Margin = "10"/>
<Button x:Name = "button1" Content = "Button" Margin = "10"/>
<Button x:Name = "button2" Content = "Button" Margin = "10"/>
<Button x:Name = "button3" Content = "Button" Margin = "10"/>
</StackPanel>
</Grid>
</UserControl>上記のコードをコンパイルして実行すると、次の出力が表示されます。
StackPanelは、各要素がスタックの方向に必要なだけのスペースを持つように配置しようとします。
ブラウザのサイズを変更すると、ボタンの幅も変更されていることがわかります。
Grid
グリッドパネルは、行と列で構成される柔軟な領域を提供します。 Grid では、子要素を表形式で配置できます。 Grid.Row および Grid.Column プロパティを使用して、特定の行および列に要素を追加できます。 デフォルトでは、 Grid パネルは1行1列で作成されます。 複数の行と列は、 RowDefinitions および ColumnDefinitions プロパティによって作成されます。 行の高さと列の幅は、次の3つの方法で定義することができます-
- 固定値-固定サイズの論理ユニット（1/96インチ）を割り当てます。
- 自動-特定の行/列のコントロールに必要なスペースが必要です。
- スター（）*-*自動*および*固定サイズ*がいっぱいになると、残りのスペースが使用されます。
以下に、 Grid クラスで一般的に使用される properties を示します。
以下に、グリッドの最も一般的に使用されるプロパティを示します。
| Sr. No. | Property & Description |
|---|---|
| 1 |
Background パネルのコンテンツ領域を塗りつぶすブラシを取得または設定します。 （Panelから継承） |
| 2 |
Children このPanelの子要素のUIElementCollectionを取得します。 （Panelから継承されます。） |
| 3 |
ColumnDefinitions Gridのこのインスタンスで定義されたColumnDefinitionオブジェクトのリストを取得します。 |
| 4 |
Height 要素の推奨される高さを取得または設定します。 （FrameworkElementから継承されます。） |
| 5 |
ItemHeight WrapPanelに含まれるすべての項目の高さを指定する値を取得または設定します。 |
| 6 |
ItemWidth WrapPanelに含まれるすべての項目の幅を指定する値を取得または設定します。 |
| 7 |
Margin 要素の外側の余白を取得または設定します。 （FrameworkElementから継承されます。） |
| 8 |
Name 要素の識別名を取得または設定します。 この名前は、イベントハンドラコードなどの分離コードがXAMLプロセッサによる処理中に構築された後にマークアップ要素を参照できるように、参照を提供します。 （FrameworkElementから継承されます。） |
| 9 |
Orientation 子コンテンツが配置される次元を指定する値を取得または設定します。 |
| 10 |
Parent この要素の論理的な親要素を取得します。 （FrameworkElementから継承されます。） |
| 11 |
Resources ローカルに定義されたリソースディクショナリを取得または設定します。 （FrameworkElementから継承されます。） |
| 12 |
RowDefinitions Gridのこのインスタンスで定義されたRowDefinitionオブジェクトのリストを取得します。 |
| 13 |
Style この要素がレンダリングされるときに使用されるスタイルを取得または設定します。 （FrameworkElementから継承されます。） |
| 14 |
Width 要素の幅を取得または設定します。 （FrameworkElementから継承されます。） |
以下に、 Grid クラスで一般的に使用される methods を示します。
以下に、グリッドで最も一般的に使用される方法を示します。
| Sr. No. | Method & Description |
|---|---|
| 1 |
GetColumn 指定されたFrameworkElementからGrid.Column XAML添付プロパティの値を取得します。 |
| 2 |
GetColumnSpan 指定されたFrameworkElementからGrid.ColumnSpan XAML添付プロパティの値を取得します。 |
| 3 |
GetRow 指定されたFrameworkElementからGrid.Row XAML添付プロパティの値を取得します。 |
| 4 |
SetColumn 指定されたFrameworkElementのGrid.Column XAML添付プロパティの値を設定します。 |
| 5 |
SetRow 指定されたFrameworkElementのGrid.Row XAML添付プロパティの値を設定します。 |
| 6 |
SetRowSpan 指定されたFrameworkElementのGrid.RowSpan XAML添付プロパティの値を設定します。 |
次の例は、子要素をグリッドに追加して表形式で指定する方法を示しています。 以下に、いくつかのUI要素が追加されたXAML実装を示します。
<UserControl x:Class = "DynamicLayout.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "130"/>
<ColumnDefinition Width = "1*"/>
<ColumnDefinition Width = "2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height = "Auto"/>
<RowDefinition Height = "50"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column = "0" Grid.Row = "0"
Text = "Content that no longer fits, not even close here"
TextWrapping = "Wrap"/>
<Button Grid.Column = "1" Grid.Row = "0" Content = "OK"/>
<Ellipse Grid.Column = "1" Grid.Row = "1" Fill = "Aqua"/>
<Rectangle Grid.Column = "2" Grid.Row = "1" Fill = "Orchid" RadiusX = "20" RadiusY = "20"/>
</Grid>
</UserControl>最初の列は固定サイズに設定されます。 この列の要素にはその幅があります。 Grid.Column および Grid.Row プロパティは、これらのアイテムが含まれる行と列を指定します。これらは0ベースのプロパティです。
2列目または3列目の幅は 1 および *2 です。 これは、固定幅および自動幅の列がスペースを取った後に残ったスペースを共有することを意味します。 ここでの *1 と 2 の重要性は、 2 列が *1 *列の2倍のスペースを取得することです。
上記のコードを実行すると、次の出力が表示されます。
アプリケーションのサイズを変更すると、これらの2つの列のコンテンツのサイズが一致するように変更されます。 ちなみに、星形の行や列の絶対値は重要ではありません。重要なのは比率だけです。
