« XAMLによる描画~Rectangle(四角形) | トップページ | XAMLによる描画~Line(直線) »

2008/02/05

XAMLによる描画~Ellipse(円)

円を描くには<Ellipse>を使います。使用できる属性は、四角形の<Rectangle>からRadiusXとRadiusYをのぞいたものと考えるとよさそうです(<Ellipse>でRadiusXとRadiusYを指定するとエラーになります)。以下は、<Ellipse>のサンプルです。

http://www.makoto3.net/xaml/silverlight0030/index.html

以下、XAMLのソースです。

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Height="80" Width="80"
 Canvas.Left="15" Canvas.Top="15"
 Stroke="red" StrokeThickness="10" Fill="blue"/>
<Ellipse Height="80" Width="80"
 Canvas.Left="110" Canvas.Top="15"
 Stroke="yellow" StrokeThickness="10" Fill="transparent"/>
<Ellipse Height="80" Width="80"
 Canvas.Left="205" Canvas.Top="15"
 Stroke="purple" StrokeThickness="5" Fill="pink"/>

<Ellipse Height="80" Width="80"
 Canvas.Left="15" Canvas.Top="110"
 Stroke="black" StrokeThickness="20" Fill="slateblue" />
<Ellipse Height="80" Width="80"
 Canvas.Left="110" Canvas.Top="110"
 Fill="skyblue" />
<Ellipse Height="80" Width="80"
 Canvas.Left="205" Canvas.Top="110"
 Fill="red" />

<Ellipse Height="80" Width="80"
 Canvas.Left="15" Canvas.Top="205"
 Stroke="green" StrokeThickness="10" Fill="lime" Opacity="0.1"/>
<Ellipse Height="80" Width="80"
 Canvas.Left="110" Canvas.Top="205"
 Stroke="#8888ff" StrokeThickness="3" Fill="#99ff99" />
<Ellipse Height="80" Width="80"
 Canvas.Left="205" Canvas.Top="205" Fill="#44ff0000" />
</Canvas>

主な属性は次のとおりです。

Width

円の幅

Height

円の高さ

Canvas.Left

キャンバス左端からの距離

Canvas.Top

キャンバス上端からの距離

Stroke

円の線の色

StrokeThickness

円の線の太さ

Fill

円の塗りの色

Opacity

透明度(0.0~1.0)

Canvas.ZIndex

重なり順(マイナス値だと下、プラス値だと上)

なお、サンプルでは正円だけ描いていますが、WidthとHeightの値を変えれば、もちろん楕円も描けます。

JavaScriptでSilverlight 目次


このページは xfy Blog Editor  を利用して作成されました。

« XAMLによる描画~Rectangle(四角形) | トップページ | XAMLによる描画~Line(直線) »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/39246/40000805

この記事へのトラックバック一覧です: XAMLによる描画~Ellipse(円):

« XAMLによる描画~Rectangle(四角形) | トップページ | XAMLによる描画~Line(直線) »

2009年7月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

最近のトラックバック