[UWPアプリ][Ellipse] 円や楕円を描画する

Ellipseコントロールを使用すると、ページ上に簡単に円や楕円を配置することが可能です。

まずは、MainPage.xaml上にEllipseコントロールを1つ配置します。

円を描画する

円を描画したい場合はHeight(高さ)プロパティとWidthプロパティ(幅)に同じ値を設定するだけです。

高さ100, 幅100の円を描画したい場合のXamlは以下の通りです。

<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left"
         Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" 
         Height="100" Width="100"/>

円の描画

楕円を描画する

楕円を描画したい場合は、HeightとWidthに任意の値を設定します。

以下は縦長の楕円を描画するXamlの例です。幅50、高さ100の楕円を描画します。

<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left"
         Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" 
         Height="100" Width="50"/>

楕円の描画

枠線の色や塗りつぶしの色を設定する

枠線の色を設定するにはStrokeプロパティを、塗りつぶしはFillプロパティを設定します。

枠線の色を赤に、塗りつぶしの色をピンクにする場合は以下のようにします(プロパティウィンドウの設定例です)。

プロパティウィンドウからの設定

Xamlでの設定例は以下の通りです。

<Ellipse Fill="#FFEFABF0" HorizontalAlignment="Left"
         Margin="10,10,0,0" Stroke="Red" VerticalAlignment="Top" 
         Height="100" Width="50"/>

実行例は以下の通りです。

枠線と塗りつぶしの例

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.