« XAMLによる描画~Ellipse(円) | トップページ | XAMLによる描画~Polyline(折れ線) »

2008/02/06

XAMLによる描画~Line(直線)

直線を描画するのが<Line>です。<Line>では、始点をX1とY1、終点をX2とY2で指定します。原点はキャンバス左上で、右方向がX、下方向がYとなります。以下に<Line>のサンプルを示します。

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

XAMLのソースは次のとおりです。

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Line X1="10" Y1="10" X2="100" Y2="100"
      Stroke="black" StrokeThickness="5"/>
<Line X1="110" Y1="10" X2="200" Y2="100"
      Stroke="red" StrokeThickness="10" Opacity="0.5"/>
<Line X1="210" Y1="10" X2="300" Y2="100"
      Stroke="blue" StrokeThickness="1"/>

<Line X1="10" Y1="110" X2="100" Y2="200"
      Stroke="crimson" StrokeThickness="15"/>
<Line X1="110" Y1="110" X2="200" Y2="200"
      Stroke="navy" StrokeThickness="30"/>
<Line X1="210" Y1="110" X2="300" Y2="200"
      Stroke="purple" StrokeThickness="8"/>

<Line X1="10" Y1="210" X2="100" Y2="300"
      Stroke="silver" StrokeThickness="10"/>
<Line X1="210" Y1="250" X2="100" Y2="280"
      Stroke="lime" StrokeThickness="10"/>
<Line X1="210" Y1="210" X2="300" Y2="300"
      Stroke="cyan" StrokeThickness="5"/>

<Line X1="280" Y1="10" X2="10" Y2="280"
      Stroke="gold" StrokeThickness="30" Opacity="0.3"/>
</Canvas>

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

X1

始点のX座標

Y1

始点のY座標

X2

終点のX座標

Y2

終点のY座標

Stroke

線の色

StrokeThickness

線の太さ

Opacity

透明度(0.0~1.0)

Canvas.ZIndex

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

JavaScriptでSilverlight 目次


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

« XAMLによる描画~Ellipse(円) | トップページ | XAMLによる描画~Polyline(折れ線) »

コメント

先日来、掲載なさっていますSilverlightに関する記事を興味を持って拝見しています。
ところでSilverlight ver.1.0 では、IMEを使って入力した全角文字が使えませんが、このあたりの情報をご存知でしょうか?全てのファイルをUTF-8で保存してもダメでした。
おそらくSilverlight.jsの問題ではないかと想像していますが・・・。

Y.Kuma さん

コメント、ありがとうございます。
以下のマイクロソフトのエバンジェリストの方のブログを見ると、1.0では日本語は未サポートということみたいです。

http://blogs.msdn.com/mohno/archive/2007/12/18/Japanese-in-Silverlight-1.0.aspx

1.1で対応すると思いますので楽しみです。私も、Silverlightは勉強し始めたばかりですので、何か情報がありましたら、よろしくお願いします。happy01

早速お返事を有難うございました。
ご紹介いただいた develop.net の記事を拝見しました。なるほどこのような手段があったのか!と私の頭の固さに恥じ入っています。
近々発表が予定されている新しいバージョンを楽しみにしています。
 今後ともよろしくお願いします。

コメントを書く

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

トラックバック

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

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

« XAMLによる描画~Ellipse(円) | トップページ | XAMLによる描画~Polyline(折れ線) »

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  

最近のトラックバック