ボーダー

Border コントロールは、境界線、背景、またはその両方を別の要素の周囲に描画します。 Borderを使用して、コンテンツの周囲に視覚的なフレームを作成したり、UI 要素間の間隔を追加したりできます。

複数の境界線コントロールを示すスクリーンショット。

Title Description
境界線の太さの値をアニメーションさせる 境界線の太さをアニメーション化して動的な視覚効果を作成する方法を示します。
キャンバスの内容を枠で囲む Border コントロールを使用して Canvas コンテンツをフレームに収める方法を示します。

スタイルとテンプレート

Border コントロールは、Decoratorから継承され、境界線と背景のプロパティを通じて視覚的なスタイル機能を提供します。

コンテンツ プロパティ

このコントロールの content プロパティは Child。 このプロパティを使用すると、境界線内に 1 つの子要素を配置できます。

部品

このコントロールでは、テンプレート パーツは定義されません。

ビジュアル状態

このコントロールでは、ビジュアル状態は使用されません。

重要な概念

WPF レイアウト システム内での Border のしくみを理解すると、効果的なビジュアルデザインを作成するのに役立ちます。

デコレーターとしてのボーダー

Border コントロールはDecoratorです。つまり、子要素を 1 つだけ含めることができます。 複数の要素を枠の中に配置する必要がある場合は、StackPanel や Grid などのパネルで囲んでください。

境界のプロパティー

Border には、ビジュアルのカスタマイズに関するいくつかの重要なプロパティが用意されています。

  • BorderBrush - 境界線の色またはパターンを設定します。
  • BorderThickness - 境界線が両側にどのように太く表示されるかを定義します。
  • Background - 境界線内の領域を色またはパターンで塗りつぶします。
  • CornerRadius - 丸い角を作成して、より柔らかい外観を実現します。
  • Padding - 罫線とその子コンテンツの間にスペースを追加します。

レイアウトに関する考慮事項

Border は、その単一の子要素を測定して配置することで、WPF レイアウト システムに参加します。 罫線の太さとパディングは、最終的なサイズの計算に影響するため、レイアウトを設計するときは、これらの値を考慮してください。

例示

次の例は、一般的な Border の使用シナリオを示しています。

基本的な罫線の使用

次の XAML では、TextBox の周囲に単純な境界線が作成されます。

<Border BorderBrush="Black" BorderThickness="2" CornerRadius="5" Padding="5">
    <TextBox Text="Enter text here" />
</Border>

ブラシを使用したスタイル設定

グラデーションやその他のブラシを使用して、より洗練された境界線効果を作成できます。

<Border BorderThickness="3" CornerRadius="10" Padding="10">
    <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Blue" Offset="0" />
            <GradientStop Color="LightBlue" Offset="1" />
        </LinearGradientBrush>
    </Border.BorderBrush>
    <Border.Background>
        <SolidColorBrush Color="LightGray" />
    </Border.Background>
    <TextBlock Text="Styled content" />
</Border>

複数の要素を含む

Border には子を 1 つだけ含めることができるため、パネルを使用して複数の要素をグループ化します。

<Border BorderBrush="Gray" BorderThickness="1" CornerRadius="3" Padding="8">
    <StackPanel>
        <TextBlock Text="Title" FontWeight="Bold" />
        <TextBlock Text="Description text goes here." />
        <Button Content="Action" />
    </StackPanel>
</Border>

こちらも参照ください

  • Last updated on