Silverlight-fixed-layouts

Silverlight-固定レイアウト

コントロールのレイアウトは、アプリケーションの操作性にとって非常に重要かつ重要です。 アプリケーションでGUI要素のグループを配置するために使用されます。 レイアウトパネルを選択する際に考慮すべき重要な事項がいくつかあります。 彼らは-

• 子要素の位置。
• 子要素のサイズ。
• 重なり合っている子要素を互いの上に重ねます。

アプリケーションが異なる画面解像度で使用されている場合、コントロールの固定ピクセル配置は機能しません。 XAMLは、GUI要素を適切な方法で配置するための豊富な組み込みレイアウトパネルセットを提供します。

まず、*単純な固定*レイアウトを見てみましょう。 次に、Silverlightがサポートするように設計した*動的*レイアウトシナリオを見ていきます。 すべてのユーザーインターフェイス要素に浸透するレイアウト関連のプロパティと概念が表示されます。

固定レイアウト

最も簡単な種類のレイアウトは、 Canvas 要素によって提供されます。 Canvas パネルは、左、右、上、下など、Canvasの任意の辺に相対的な座標を使用して子要素を明示的に配置できる基本レイアウトパネルです。

固定レイアウト

通常、 Canvas は2Dグラフィック要素（楕円、長方形など）に使用されます。 XAMLアプリケーションのサイズ変更、ローカライズ、またはスケーリングを行う際に絶対座標を指定すると問題が発生するため、UI要素には使用されません。

以下に、 Canvas クラスで一般的に使用される properties を示します。

以下に、Canvasの最も一般的に使用されるプロパティを示します。

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	LeftProperty Canvas.Left XAML添付プロパティを識別します。
9	Margin 要素の外側の余白を取得または設定します。 （FrameworkElementから継承されます。）
10	Name 要素の識別名を取得または設定します。 この名前は、イベントハンドラコードなどの分離コードがXAMLプロセッサによる処理中に構築された後にマークアップ要素を参照できるように、参照を提供します。 （FrameworkElementから継承されます。）
11	Orientation 子コンテンツが配置される次元を指定する値を取得または設定します。
12	Parent この要素の論理的な親要素を取得します。 （FrameworkElementから継承されます。）
13	Resources ローカルに定義されたリソースディクショナリを取得または設定します。 （FrameworkElementから継承されます。）
14	Style この要素がレンダリングされるときに使用されるスタイルを取得または設定します。 （FrameworkElementから継承されます。）
15	TopProperty Canvas.Top XAML添付プロパティを識別します。
16	Width 要素の幅を取得または設定します。 （FrameworkElementから継承されます。）
17	ZIndexProperty Canvas.ZIndex XAML添付プロパティを識別します。

以下に、 Canvas で一般的に使用される methods を示します。

Sr. No.	Method & Description
1	GetLeft ターゲット要素のCanvas.Left XAML添付プロパティの値を取得します。
2	GetTop ターゲット要素のCanvas.Top XAML添付プロパティの値を取得します。
3	GetZIndex ターゲット要素のCanvas.ZIndex XAML添付プロパティの値を取得します。
4	SetLeft ターゲット要素のCanvas.Left XAML添付プロパティの値を設定します。
5	SetTop ターゲット要素のCanvas.Top XAML添付プロパティの値を設定します。
6	SetZIndex ターゲット要素のCanvas.ZIndex XAML添付プロパティの値を設定します。

次の例は、子要素を Canvas に追加する方法を示しています。 以下は、異なるオフセットプロパティでCanvas内にEllipseが作成されるXAML実装です。

<UserControl x:Class = "FirstExample.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">
      <Canvas Width = "380" Height = "280" >
         <Ellipse Canvas.Left = "30" Canvas.Top = "30"
            Fill = "Gray" Width = "200" Height = "120"/>
      </Canvas>
   </Grid>

</UserControl>

上記のコードをコンパイルして実行すると、次の出力が表示されます。

子要素キャンバスの追加