[Windows ストア アプリ] Borderコントロールの角を丸くする

Borderコントロールの角を丸くすることで、角丸四角形を作成することができます。

角を変更するには CornerRadiusプロパティを使用します。

CornerRadiusプロパティはCornerRadius型のプロパティで、すべての角を同じ半径に設定したり、各角それぞれの半径を指定することも可能です。

下記はBorderコントロールの角の半径を指定する例です。

border1はすべての角の半径を10に指定し、border2は左上と右上の角半径を20、右下と左下の角半径を10に指定しています(左上、右上、左下、右下の順で指定します)。

XAMLの例

<Border x:Name="border1" CornerRadius="10" BorderBrush="Red">
<Border x:Name="border2" CornerRadius="20,20,10,10" BorderBrush="Blue">

コードから指定する場合には SolidColorBrushの値を指定します。

VBの例

'4辺の角半径を10に指定
border1.CornerRadius = New CornerRadius(10.0F)
'左上と右上上の角半径を20, 右下と左下の角半径を10に設定する
border2.CornerRadius = New CornerRadius(20.0F, 20.0F, 10.0F, 10.0F)

C#の例

//4辺の角半径を10に指定
border1.CornerRadius = new CornerRadius(10.0f);
//左上と右上上の角半径を20, 右下と左下の角半径を10に設定する
border2.CornerRadius = new CornerRadius(20.0f, 20.0f, 10.0f, 10.0f);

[Windows ストア アプリ] Borderコントロールの幅を変更する

Borderコントロールの幅を変更するには BorderThicknessプロパティを使用します。

BorderThicknessプロパティはThickness型のプロパティで、4辺すべてを同じ幅に設定したり、各辺それぞれの幅を指定することも可能です。

下記はBorderコントロールの幅を指定する例です。

border1はすべての辺の幅を2に指定し、border2は各辺の幅をそれぞれ指定しています。

XAMLの例

<Border x:Name="border1" BorderThickness="2" BorderBrush="#FFFF0000"/>
<Border x:Name="border2" BorderThickness="2,4,6,8" BorderBrush="#FF00FF00"/>

コードから指定する場合には SolidColorBrushの値を指定します。

VBの例

'4辺の幅を5に指定
border1.BorderThickness = New Thickness(5)
'左2,上4,右6,下8に設定
border2.BorderThickness = New Thickness(2.0F, 4.0F, 6.0F, 8.0F)

C#の例

// 4辺の幅を5に指定
border1.BorderThickness = new Thickness(5);
// 左2,上4,右6,下8に設定
border2.BorderThickness = new Thickness(2.0f, 4.0f, 6.0f, 8.0f);

[Windows ストア アプリ] Borderコントロールの背景色を変更する

Borderコントロールの背景色を変更するには Backgroundプロパティを使用します。

BackgroundプロパティはBrush型のプロパティで、Brushクラスから派生した、LinearGFradientBrush, ImageBrush, SolidColorBrushなどを指定することができます。

純色を指定するには SolidColorBrush を使用します。

XAMLでは、直接色名を指定をしていすることもできますし、6桁の16進数や、アルファ値を含めた8桁の16進数を指定することも可能です。

下記はSolidBrushColorを指定する例です。

XAMLの例

<Border x:Name="border1" Background="#FFFF0000"/>
<Border x:Name="border2" Background="#FF00FF00"/>
<Border x:Name="border3" Background="#FF0000FF"/>

コードから指定する場合には SolidColorBrushの値を指定します。

VBの例

'赤を指定
border1.Background = New SolidColorBrush(Windows.UI.Colors.Red)
'青を指定
border2.Background = New SolidColorBrush(Windows.UI.Color.FromArgb(&HFF, &H0, &HFF, &H0))
'緑を指定
border3.Background = New SolidColorBrush(Windows.UI.Color.FromArgb(&HFF, &H0, &H0, &HFF))

C#の例

// 赤を指定
border1.Background = new SolidColorBrush(Windows.UI.Colors.Red);
// 青を指定
border2.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 0x00, 0xFF, 0x00));
// 緑を指定
border3.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 0x00, 0x00, 0xFF));