Xaml-canvaspanel

XAML-CanvasPanel

キャンバスパネルは、左、右、上、下などの Canvas を基準にした座標を使用して子要素を明示的に配置できる基本レイアウトパネルです。

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

Canvasクラスの階層継承は次のとおりです-

キャンバス階層

プロパティ

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

方法

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

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

例

次の例は、子要素をCanvasに追加する方法を示しています。 以下に、XAML実装を示します。この実装では、異なるオフセットプロパティを使用して、長方形をキャンバス内に作成します。

<Window x:Class = "XAMLCanvas.Window1"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "400" Width = "604">

   <Grid>
      <Canvas Width = "580" Height = "360" >
         <Rectangle Canvas.Left = "30" Canvas.Top = "30" Fill = "Red" Width = "70" Height = "40"/>
         <Rectangle Canvas.Right = "30" Canvas.Top = "30" Fill = "Blue" Width = "70" Height = "40"/>
         <Rectangle Canvas.Left = "30" Canvas.Bottom = "30" Fill = "Gainsboro" Width = "70" Height = "40"/>
         <Rectangle Canvas.Right = "30" Canvas.Bottom = "30" Fill = "SaddleBrown" Width = "70" Height = "40"/>
      </Canvas>
   </Grid>

</Window>

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

キャンバス出力

上記のサンプルコードを実行し、他のプロパティも試してみることをお勧めします。