[UWPアプリ][Rectangle] 正方形や長方形を描画する

Rectangleコントロールを使用すると、ページ上に簡単に正方形や長方形を配置することが可能です。

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

正方形を描画する

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

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

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

正方形を描画する例

長方形を描画する

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

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

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

長方形を描画する例

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

枠線の色や塗りつぶしの設定についてはEllipseコントロールと同様です。
[UWPアプリ][Ellipse] 円や楕円を描画する」を参照して下さい。

コメントを残す

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