円や楕円を作成する

Ellipseコントロールを貼り付けると、既定で正円が表示されます。

正円が表示されるのは幅と高さが同じ値になっているからです。

幅はWidthプロパティ、高さはHeightプロパティで設定します。

よって、この幅と高さの比率を変更することで楕円を作成することができます。

以下は、幅と高さが200の正円を作成する例です。

XAMLの例

<Ellipse HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Fill="White"
         Width="200" Height="200" />

次に楕円を作成してみましょう。

1つは横長の楕円、もう1つは縦長の楕円です。

横長の方は幅を200、高さを100にしています。縦長の方は幅を100、高さを200にしています。

塗りつぶしの色を変更する

Ellipseの内側は、単色やグラデーション、画像などで塗りつぶすことが可能です。

詳しい手法は以前紹介した「[ストアアプリ][入門] Step9. Buttonコントロールを使用する　～背景色の設定～」を参照してください。

以下は背景色を青にする例とグラデーションを使用した例です。

XAMLの例

<!-- 青で塗りつぶす例 -->
<Ellipse HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Fill="Lime"
         Width="200" Height="100" />

<!-- グラデーションで塗りつぶす例 -->
<Ellipse HorizontalAlignment="Left" Margin="215,10,0,0" VerticalAlignment="Top"
         Width="100" Height="200" >
    <Ellipse.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF125C8F" Offset="1"/>
            <GradientStop Color="#FFE0E9F0"/>
        </LinearGradientBrush>
    </Ellipse.Fill>
</Ellipse>

枠線の色と太さを変更する

枠線の色はStrokeプロパティで、枠線の太さはStrokeThicknessで変更できます。

以下は、枠線の色をLimeに、太さを10にする例です。

XAMLの例

<Ellipse HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" 
         Width="200" Height="100"
         Fill="SkyBlue"
         Stroke="Lime" StrokeThickness="10" />

Please follow and like us: