[UWPアプリ][Border] 角を丸くする

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

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

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

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

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

        <!-- 4辺の幅をすべて5に設定 -->
        <Border x:Name="border1" 
                CornerRadius="5"
                HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="1"
                Height="100" Margin="10,10,0,0" VerticalAlignment="Top" Width="100"/>

        <!-- 左上5, 右上10, 右下15, 左下20 -->
        <Border x:Name="border2" 
                CornerRadius="5,10,15,20"
        	HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="1"
        	Height="100" Margin="115,10,0,0" VerticalAlignment="Top" Width="100"/>

角を丸くする例

C#での例を以下に示します。

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

 

 

 

[UWPアプリ][Border] 線の幅を設定する

線の幅を変更するには BorderThicknessプロパティを使用します。

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

下記は線の幅を指定する例です。

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

        <!-- 4辺の幅をすべて2に設定 -->
        <Border x:Name="border1" 
                BorderThickness="2" 
                HorizontalAlignment="Left" BorderBrush="Black"
                Height="100" Margin="10,10,0,0" VerticalAlignment="Top" Width="100"/>

        <!-- 左2, 上4, 右6, 下8に設定 -->
        <Border x:Name="border2" 
            BorderThickness="2,4,6,8" 
        	HorizontalAlignment="Left" BorderBrush="Black"
        	Height="100" Margin="115,10,0,0" VerticalAlignment="Top" Width="100"/>

線の幅を設定する例

C#での設定例を以下に示します。

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

 

[UWPアプリ][Border] 背景色を変更する

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

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

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

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

以下にXAMLでの例を示します。

<!--背景の色を黒にする-->
<Border x:Name="border1" Background="Black"
        BorderThickness="1" HorizontalAlignment="Left" Height="100"
        Margin="10,10,0,0"  VerticalAlignment="Top" Width="100" />
<!--は背景色を赤(#FFFF0000)にする-->
<Border x:Name="border2" Background="#FFFF0000" 
	BorderThickness="1" HorizontalAlignment="Left" Height="100"
	Margin="115,10,0,0"  VerticalAlignment="Top" Width="100" />
<!-- 線の色をグラデーションにする-->
<Border 
	BorderThickness="1" HorizontalAlignment="Left" Height="100"
	Margin="220,10,0,0"  VerticalAlignment="Top" Width="100" >
    <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#FF4E95AB" Offset="1"/>
        </LinearGradientBrush>
    </Border.Background>
</Border>

背景色の設定例

C#での設定例を以下に示します

// 背景色を赤にする
border1.Background = new SolidColorBrush(Windows.UI.Colors.Red);
// 背景色を緑にする
border2.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 0x00, 0xFF, 0x00));

[UWPアプリ][Border] 線の色を変更する

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

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

以下は線の色を設定するXAMLの例です。

<!--線の色を黒にする-->
<Border BorderBrush="Black" 
        BorderThickness="1" HorizontalAlignment="Left" Height="100"
        Margin="10,10,0,0"  VerticalAlignment="Top" Width="100"
        />
<!--線の色を赤(#FFFF0000)にする-->
<Border BorderBrush="#FFFF0000" 
	BorderThickness="1" HorizontalAlignment="Left" Height="100"
	Margin="115,10,0,0"  VerticalAlignment="Top" Width="100" />
<!-- 線の色をグラデーションにする-->
<Border 
	BorderThickness="1" HorizontalAlignment="Left" Height="100"
	Margin="220,10,0,0"  VerticalAlignment="Top" Width="100" >
    <Border.BorderBrush>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#FF4E95AB" Offset="1"/>
        </LinearGradientBrush>
    </Border.BorderBrush>
</Border>

線の色を変更する例

C#での設定例を以下に示します

// 線の色を赤にする
border1.BorderBrush = new SolidColorBrush(Windows.UI.Colors.Red);
// 線の色を緑にする
border2.BorderBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 0x00, 0xFF, 0x00));