&http%3A%2F%2Fmakoto3.cocolog-nifty.com%2Fmakoto3%2F2008%2F02%2Fxamlrectangle_389e.html){kind=small}
XAMLによる描画～Rectangle(四角形)
ここからしばらくは、JavaScriptからは少し離れて、XAMLによる描画についてまとめようと思います。基本的な図形を描きたいときのリファレンス的な扱いです。ソースもXAMLファイルだけを示します。まずは、Rectangleによる四角形の描画から。サンプルは↓です。
http://www.makoto3.net/xaml/silverlight0029/index.html
以下、XAMLのソースです。
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="80" Width="80"
Canvas.Left="15" Canvas.Top="15"
Stroke="crimson" StrokeThickness="10" Fill="navy"
RadiusX="0" RadiusY="0" />
<Rectangle Height="80" Width="80"
Canvas.Left="110" Canvas.Top="15"
Stroke="blue" StrokeThickness="10" Fill="Transparent"
RadiusX="10" RadiusY="10" />
<Rectangle Height="80" Width="80"
Canvas.Left="205" Canvas.Top="15"
Stroke="red" StrokeThickness="10" Fill="pink"
RadiusX="20" RadiusY="20" />
<Rectangle Height="80" Width="80"
Canvas.Left="15" Canvas.Top="110"
Stroke="black" StrokeThickness="10" Fill="slateblue"
RadiusX="20" RadiusY="20" Opacity="0.5"/>
<Rectangle Height="80" Width="80"
Canvas.Left="110" Canvas.Top="110"
Fill="green" RadiusX="10" RadiusY="10" />
<Rectangle Height="80" Width="80"
Canvas.Left="205" Canvas.Top="110"
Fill="orange" RadiusX="10" RadiusY="30" />
<Rectangle Height="80" Width="80"
Canvas.Left="15" Canvas.Top="205"
Stroke="green" StrokeThickness="10" Fill="lime"
RadiusX="0" RadiusY="0" />
<Rectangle Height="80" Width="80"
Canvas.Left="110" Canvas.Top="205"
Stroke="#8888ff" StrokeThickness="10" Fill="#ff2288"
RadiusX="10" RadiusY="10" />
<Rectangle Height="80" Width="80"
Canvas.Left="205" Canvas.Top="205"
Stroke="crimson" StrokeThickness="10" Fill="#440000ff"
RadiusX="5" RadiusY="5" />
</Canvas>
サンプルで使用した属性は次のとおりです。
|
Width |
四角形の幅 |
|
Height |
四角形の高さ |
|
Canvas.Left |
キャンバス左端からの距離 |
|
Canvas.Top |
キャンバス上端からの距離 |
|
Stroke |
四角形の線の色 |
|
StrokeThickness |
四角形の線の太さ |
|
Fill |
四角形の塗りの色 |
|
RadiusX |
四角形の角の丸み(X方向) |
|
RadiusY |
四角形の角の丸み(Y方向) |
|
Opacity |
透明度(0.0～1.0) |
|
Canvas.ZIndex |
重なり順(マイナス値だと下、プラス値だと上) |
重ねたときはCanvas.ZIndexによる重なり順も指定できるようです（Z と I は大文字なので注意）。また、色にTransparentを指定すると透明になること、色名の他に6桁の16進数表記（例：#ff88ff）も指定できること、8桁で指定すると、最初の2桁で透明度を指定できること（例：#440000ff）なども覚えておくと便利そうです。
このページは
xfy Blog Editor
を利用して作成されました。
コメント