YKSoftware - for WPF Developers

Standard Controls - Border

　子要素に枠線を付けるためのコントロールです。

ページ内リンク

枠線の設定方法
角を丸くする

枠線の設定方法

　Border コントロールは Child プロパティを持っており、あるオブジェクトをひとつだけ子要素として持つことができます。 ContentPropertyAttribute にこの Child プロパティが指定されているため、 XAML 上では <Border> ～ </Border> で挟むことで子要素を Border に指定できます。

<Window x:Class="WpfApplication2.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainView" Height="150" Width="250">
    <Grid>
        <Border Margin="10">
            <TextBlock Text="私は Border の子要素です。" />
        </Border>
    </Grid>
</Window>

Code 1 : TextBlock コントロールを Border の子要素にする

ただし、Border コントロールに特に何も指定しない場合、見た目にはただ TextBlock コントロールが配置されているようにしか見えません。

枠線を表示するには、BorderBrush プロパティで枠線のためのブラシを、BorderThickness プロパティで枠線の太さを指定する必要があります。

<Border Margin="10" BorderBrush="Black" BorderThickness="1">

Code 2 : 太さ 1 で黒色の枠線を指定している

枠線の指定には Thickness 構造体を使用しているため、次のように 3 通りの指定方法があります。

<Border Margin="10" BorderBrush="Black" BorderThickness="left">
- or -
<Border Margin="10" BorderBrush="Black" BorderThickness="left_and_right,top_and_bottom">
- or -
<Border Margin="10" BorderBrush="Black" BorderThickness="left,top,right,bottom">

Code 3 : BorderThickness の指定方法

つまり、すべて同じ太さなら数値 1 つ、上下と左右でそれぞれ同じ太さなら数値を 2 つ、すべて別々の太さなら数値を 4 つ記述します。次のコードは上下と左右で異なる太さを持つ枠線の指定方法の一例です。

<Border Margin="10" BorderBrush="Black" BorderThickness="4,10">

Code 4 : 上下と左右それぞれに異なる太さを指定する

角を丸くする

　CornerRadius プロパティを使用することで、角丸の枠線にすることができます。

<Border Margin="10" BorderBrush="Black" BorderThickness="4" CornerRadius="6">

Code 5 : CornerRadius プロパティの指定

CornerRadius プロパティは CornerRadius 構造体で、上記のようにすべての角に対して丸みを指定することもできますが、それぞれの丸みを指定することもできます。その場合、左上、右上、右下、左下の順に指定します。

<Border Margin="10" BorderBrush="Black" BorderThickness="4" CornerRadius="0,5,10,20">

Code 6 : それぞれの角に対して丸みを指定する