back
グラフィックの描画 (2/5)
■図形コントロールの主なプロパティ
では、実際に図形コントロールを使ってみましょう。まずはツールボックスにあるEllipseやRectangleから配置してみるとよいでしょう。そして表示の設定などがわかってきたら、<Line />や<Polygon />などのタグも書いてみる、という形で作成するとわかりやすいでしょう。
これらのコントロールは、配置後（またはタグ記述後）、プロパティを設定して図形の表示を設定していきます。ということは、プロパティの設定について理解しないといけません。以下に主なものを整理しておきましょう。
●大きさに関するもの
Width――横幅です。
Height――高さです。これらは説明は要りませんね。
●位置に関するもの
Margin――既にコントロールの配置について説明をしましたが、Windows Phoneのコントロール類の位置決めは独特です。Marginにより、コントロールの上下左右の余白？幅を指定することで位置を指定します。
HorizontalAlignment――これも重要。横方向の並び位置を指定します。通常はLeft。
VerticalAlignment――こちらは縦方向の並び位置を指定します。通常はTop。
●位置に関するもの（Line用）
X1,Y1――直線の開始点の横・縦位置を指定するものです。
X2,Y2――直線の終了点の横・縦位置を指定するものです。
なお、Lineの場合、WidthとHeightはAutoにします。これらを設定してしまうと、こちらの設定が優先され正しい位置に表示されません。
●位置に関するもの（Polyline/Polygon）
Points――多角形関係は、位置の設定がちょっと特殊です。「Points」というプロパティがあり、これの値を設定しようとすると別ウインドウが開いて、点の位置（Point）を追加して登録するようになっています。これで必要なだけ点の位置を追加して形を作成します。
●色に関するもの
Fill――内部の塗りつぶしの色を設定します。
Stroke――線分の色を設定します。
●線の太さ
StrokeThickness――これで線の太さを設定できます。
――とりあえず、これらの設定だけわかれば、図形を作成し表示させることはできるようになるでしょう。下に簡単な利用例を挙げておきました。ContentPanelの<Grid>タグ部分のみ掲載してあります。
これらのコントロールは、配置後（またはタグ記述後）、プロパティを設定して図形の表示を設定していきます。ということは、プロパティの設定について理解しないといけません。以下に主なものを整理しておきましょう。
●大きさに関するもの
Width――横幅です。
Height――高さです。これらは説明は要りませんね。
●位置に関するもの
Margin――既にコントロールの配置について説明をしましたが、Windows Phoneのコントロール類の位置決めは独特です。Marginにより、コントロールの上下左右の余白？幅を指定することで位置を指定します。
HorizontalAlignment――これも重要。横方向の並び位置を指定します。通常はLeft。
VerticalAlignment――こちらは縦方向の並び位置を指定します。通常はTop。
●位置に関するもの（Line用）
X1,Y1――直線の開始点の横・縦位置を指定するものです。
X2,Y2――直線の終了点の横・縦位置を指定するものです。
なお、Lineの場合、WidthとHeightはAutoにします。これらを設定してしまうと、こちらの設定が優先され正しい位置に表示されません。
●位置に関するもの（Polyline/Polygon）
Points――多角形関係は、位置の設定がちょっと特殊です。「Points」というプロパティがあり、これの値を設定しようとすると別ウインドウが開いて、点の位置（Point）を追加して登録するようになっています。これで必要なだけ点の位置を追加して形を作成します。
●色に関するもの
Fill――内部の塗りつぶしの色を設定します。
Stroke――線分の色を設定します。
●線の太さ
StrokeThickness――これで線の太さを設定できます。
――とりあえず、これらの設定だけわかれば、図形を作成し表示させることはできるようになるでしょう。下に簡単な利用例を挙げておきました。ContentPanelの<Grid>タグ部分のみ掲載してあります。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!--ContentPanel - 追加コンテンツをここに入力します--> <Grid x:Name="ContentPanel" Margin="12,0,0,12" ShowGridLines="True" Grid.RowSpan="2" Grid.Row="1"> <Ellipse Height="119" HorizontalAlignment="Left" Margin="35,127,0,0" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="Red" /> <Rectangle Height="114" HorizontalAlignment="Left" Margin="164,187,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="Blue" /> <Line X1="50" Y1="300" X2="350" Y2="100" Fill="Lime" Stroke="Lime" StrokeThickness="10" /> <Polygon StrokeThickness="5" Fill="#70FF8700"> <Polygon.Points> <Point X="200" Y="400" /> <Point X="300" Y="300" /> <Point X="100" Y="200" /> </Polygon.Points> </Polygon> </Grid>
| << 前へ | 次へ >> |