C#

【WPF】Border の使い方を紹介(枠線のスタイルや太さをカスタマイズ)

WPFで使われる「Borderコントロール」はアプリケーションの画面に枠線を作るためのコントロールです。

Border は文章を枠線で囲む画面のコントロールを用途毎に区切るUIのコントロールの枠線として使用する、などなどさまざまな場面で使用します。

Border コントロールのプロパティを利用することで枠線の色や太さなど、デザインを自由自在にカスタマイズすることができます。

この記事では Border コントロールの使い方についてまとめていますので、ぜひ参考にしてみてください。

 他のUIコントロールの使い方も知りたい方はここをクリック!!

画面作成で使う「コントロール」一覧
(種類別に紹介)

\ WPFのコントロールについて詳しくみる /

Border の使い方

WPFの Border は枠線の種類、太さ、色を指定して表示することができるコントロールです。

Border を使用するには、各プロパティの値を設定することで自由にデザインをカスタマイズすることができます。

ここからは、Border で使うプロパティの説明と簡単な例を紹介します。

枠線の幅・高さを設定する

Borderである枠線の幅と高さを調整するプロパティは次の通りです。

プロパティ名説明
WidthBorder の幅を取得または設定する。
HeightBorder の高さを取得または設定する。

例として、幅が180 高さが120の枠線を作成してみましょう。Width と Height だけだと透明な枠線ができてしまうので、黄色の背景色を指定します。

XAMLの記述例と実行結果
<Border
    Width="180"
    Height="120"
    Background="#fff000" />

 

枠線の太さ・色を設定する

Borderである枠線の太さと色を調整するプロパティは次の通りです。

プロパティ名説明
BorderThicknessBorder の太さを取得または設定する。
BorderBrush外側の境界線の色(Brush)を取得または設定する。

例として、太さが1 色が黒、太さが5 色が青、太さが10 色が赤、上下の太さが10 左右の太さが5 色が紫の枠を作成してみましょう。

XAMLの記述例と実行結果
<Border
    Width="180"
    Height="120"
    BorderBrush="Black"
    BorderThickness="1" />
<Border
    Width="180"
    Height="120"
    BorderBrush="Blue"
    BorderThickness="5" />
<Border
    Width="180"
    Height="120"
    BorderBrush="Red"
    BorderThickness="10" />
<Border
    Width="180"
    Height="120"
    BorderBrush="Purple"
    BorderThickness="5,10,5,10" />

他にもBorderを上だけ線を表示したり、Borderを下だけ線を表示することも可能です。

<Border
    Width="180"
    Height="120"
    BorderBrush="Orange"
    BorderThickness="0,10,0,0" />
<Border
    Width="180"
    Height="120"
    BorderBrush="Green"
    BorderThickness="0,0,0,10" />

 

枠線を丸角に設定する

Borderである枠線の角を調整するプロパティは次の通りです。

プロパティ名説明
CornerRadius角の丸みの程度を表す値を取得または設定する。

例として、丸角の径が5、丸角の径が10、丸角の左上の径が5 右上の径が10 右下の径が15 左下の径が20の枠を作成してみましょう。

XAMLの記述例と実行結果
<Border
    Width="180"
    Height="120"
    BorderBrush="Black"
    BorderThickness="1"
    CornerRadius="5" />
<Border
    Width="180"
    Height="120"
    BorderBrush="Black"
    BorderThickness="1"
    CornerRadius="10" />
<Border
    Width="180"
    Height="120"
    BorderBrush="Black"
    BorderThickness="1"
    CornerRadius="5,10,15,20" />

 

枠線を点線に設定する

Border には枠線を点線にするプロパティはないので、Rectangle をつかって点線の枠でつくられた要素を割り当てることで点線を実現します。Rectangle で使うプロパティは次の通りです。

プロパティ名説明
Stroke図形の輪郭の色(Brush)を取得または設定する。
StrokeDashArray図形の輪郭の破線パターンを取得または設定する。
StrokeThickness図形の輪郭の幅を取得または設定する。
RadiusX図形の角を丸めるのに使用される x 軸の半径を取得または設定する。
RadiusY図形の角を丸めるのに使用される y 軸の半径を取得または設定する。

例として、幅が180 高さが120の点線の枠を作成してみましょう。

XAMLの記述例と実行結果
<Border
    Width="180"
    Height="120"
    BorderThickness="2"
    CornerRadius="0">
    <Border.BorderBrush>
        <VisualBrush>
            <VisualBrush.Visual>
                <Rectangle
                    Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualWidth}"
                    Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualHeight}"
                    RadiusX="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.TopRight}"
                    RadiusY="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.BottomLeft}"
                    Stroke="Black"
                    StrokeDashArray="2"
                    StrokeThickness="2" />
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.BorderBrush>
</Border>

 

枠線に影を設定する

枠線に影を付ける為には、DropShadowEffect を利用して枠線の周りに影を出現させます。DropShadowEffect のプロパティの値で影の方向や濃さを調整することができます。

プロパティ名説明
BlurRadiusシャドウのぼかし効果の半径を示す値を取得または設定する。
RenderingBias影を描画する種類を取得または設定する。速度(Performance)または品質(Quality)の2種類がある。
ShadowDepth対象物と影の距離を取得または設定する。
Color影の色を取得または設定する。

例として、幅が180 高さが120の枠に影を作成してみましょう。

XAMLの記述例と実行結果
<Border
    Width="180"
    Height="120"
    Background="White"
    BorderBrush="Black"
    BorderThickness="1">
    <Border.Effect>
        <DropShadowEffect
            BlurRadius="10"
            RenderingBias="Quality"
            ShadowDepth="2.5"
            Color="Gray" />
    </Border.Effect>
</Border>

 

枠線にグラデーションを設定する

枠線の背景をグラデーションにするには、LinearGradientBrush を利用して枠線の領域をグラデーションで塗りつぶします。LinearGradientBrush のプロパティの値でグラデーションの方向や色を調整することができます。

GradientStop でグラデーションの色とオフセット(グラデーションの終了位置)を指定します。

プロパティ名説明
StartPoint線形グラデーションの起点の 2 次元座標を取得または設定する。
EndPoint線状グラデーションの終点の 2 次元座標を取得または設定する。

例として、幅が180 高さが120の枠の背景にグラデーションを設定してみましょう。

XAMLの記述例と実行結果
<Border
    Width="180"
    Height="120"
    BorderBrush="Black"
    BorderThickness="1"
    CornerRadius="5">
    <Border.Background>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5, 1.2">
            <GradientStop Color="AliceBlue" />
            <GradientStop Offset="1" Color="Blue" />
        </LinearGradientBrush>
    </Border.Background>
</Border>

 

枠線をコントロールに装飾する

Border はUIのコントロールの枠線として割り当てることができます。

Label、Button、DataGrid などは枠線を追加するための「BorderThickness」や「BorderBrush」などのプロパティがありますが、TextBlockにはこれらのプロパティがありません。

TextBlockに枠線を追加したい場合には、Border を使えば簡単に枠線を追加することができます。

XAMLの記述例と実行結果
<Border
    Width="180"
    Height="120"
    BorderBrush="Black"
    BorderThickness="1"
    CornerRadius="5">
    <TextBlock Text="Sample" TextAlignment="Center" />
</Border>

 

最後に

いかがでしょうか。

この記事では Border コントロールの基本的な使い方について紹介をしました。

アプリケーションの画面作成で文章を囲んだり、コントロールを用途毎に区切る場合に利用でき、よく利用するUIコントロールの1つです。

他にもこんな使い方があるという場合は、コメント欄で教えていただけると幸いです。

以上、最後まで読んで頂きありがとうございました。

プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA