Border Border Border Class

Definition

Draws a border, background, or both, around another object.

public : sealed class Border : FrameworkElement, IBorderpublic sealed class Border : FrameworkElement, IBorderPublic NotInheritable Class Border Inherits FrameworkElement Implements IBorder
<Border>
  singleChild
</Border>

Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods

Examples

This example shows how to put a Border around several Rectangle objects contained in a StackPanel.

<Border BorderBrush="Gray" BorderThickness="4" 
        Height="108" Width="64">
    <StackPanel>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Green"/>
    </StackPanel>
</Border>
<Border Background="Coral" Width="300" Padding="10" CornerRadius="20">
    <TextBlock FontSize="16">Text Surrounded by a Border</TextBlock>
</Border>

Remarks

Border is a container control that draws a border, background, or both, around another object. Here's a gray border around two rectangles.

A border around 2 rectangles

You can specify basic properties of a Border by setting its Width, Height, BorderBrush, BorderThickness, and Background color. In addition, you can round the border corners by setting the CornerRadius property, and you can position the object inside the Border by setting the Padding property.

A Border can contain only one child object. If you want to put a border around multiple objects, wrap them in a container object such as StackPanel.

Constructors

Border() Border() Border()

Initializes a new instance of the Border class.

public : Border()public Border()Public Sub New()
Attributes

Properties

Background Background Background

Gets or sets the Brush that fills the background (inner area) of the border.

public : Brush Background { get; set; }public Brush Background { get; set; }Public ReadWrite Property Background As Brush
<Border Background="{StaticResource resourceName}"/>

Value
Brush Brush Brush

The brush that fills the background. The default is null, (a null brush) which is evaluated as Transparent for rendering.

Attributes

Examples

The following example shows how to set the background of a Border to a solid color using an inline-defined attribute value "Cyan". The XAML parser uses this "Cyan" value to refer to the named color Colors.Cyan, and to create the SolidColorBrush instance that supplies the runtime value.

<Border Background="Cyan" CornerRadius="20" Grid.Column="2" Grid.Row="2">
    <TextBlock Text="Background Brush" TextWrapping="Wrap" VerticalAlignment="Center" />
</Border>

Remarks

The Background value for a Border is visible underneath the inner area if the element that is the Child element has transparency or null value brushes for any of its defining area. It is also visible between the border edge and the Child content if nonzero values are applied for a Padding value.

See Also

BackgroundProperty BackgroundProperty BackgroundProperty

Identifies the Background dependency property.

public : static DependencyProperty BackgroundProperty { get; }public static DependencyProperty BackgroundProperty { get; }Public Static ReadOnly Property BackgroundProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the Background dependency property.

Attributes

BorderBrush BorderBrush BorderBrush

Gets or sets the Brush that is applied to the edge area of the Border.

public : Brush BorderBrush { get; set; }public Brush BorderBrush { get; set; }Public ReadWrite Property BorderBrush As Brush
<Border BorderBrush="{StaticResource resourceName}"/>

Value
Brush Brush Brush

The brush that fills the border. The default is null, (a null brush) which is evaluated as Transparent for rendering.

Attributes

Examples

This example shows how to set the BorderBrush value to a solid color using an inline-defined attribute value "Blue". The XAML parser uses this "Blue" value to refer to the named color Colors.Blue, and to create the SolidColorBrush instance that supplies the runtime value.

<Border BorderThickness="5" BorderBrush="Blue" >
    <StackPanel Grid.Column="0" Grid.Row="0">
        <TextBlock Text="One"/>
        <TextBlock Text="Two"/>
        <TextBlock Text="Three"/>
    </StackPanel>
</Border>

Remarks

The BorderThickness value must be greater than 0 in order to see the BorderBrush value take effect.

See Also

BorderBrushProperty BorderBrushProperty BorderBrushProperty

Identifies the BorderBrush dependency property.

public : static DependencyProperty BorderBrushProperty { get; }public static DependencyProperty BorderBrushProperty { get; }Public Static ReadOnly Property BorderBrushProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the BorderBrush dependency property.

Attributes

BorderThickness BorderThickness BorderThickness

Gets or sets the thickness of the border.

public : Thickness BorderThickness { get; set; }public Thickness BorderThickness { get; set; }Public ReadWrite Property BorderThickness As Thickness
<Border BorderThickness="uniform"/>
- or -
<Border BorderThickness="left&right,top&bottom"/>
- or -
<Border BorderThickness="left,top,right,bottom"/>

Value
Thickness Thickness Thickness

The thickness of the border, in pixels. The default is 0 on all four sides.

Attributes
See Also

BorderThicknessProperty BorderThicknessProperty BorderThicknessProperty

Identifies the BorderThickness dependency property.

public : static DependencyProperty BorderThicknessProperty { get; }public static DependencyProperty BorderThicknessProperty { get; }Public Static ReadOnly Property BorderThicknessProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the BorderThickness dependency property.

Attributes

Child Child Child

Gets or sets the child element to draw the border around.

public : UIElement Child { get; set; }public UIElement Child { get; set; }Public ReadWrite Property Child As UIElement
<Border>
  singleChild
</Border>

Value
UIElement UIElement UIElement

The UIElement to apply the border to.

Attributes

ChildTransitions ChildTransitions ChildTransitions

Gets or sets the collection of Transition style elements that apply to child content of a Border.

public : TransitionCollection ChildTransitions { get; set; }public TransitionCollection ChildTransitions { get; set; }Public ReadWrite Property ChildTransitions As TransitionCollection
<Border>
  <Border.ChildTransitions>
    <TransitionCollection>
      oneOrMoreTransitions
    </TransitionCollection>
  </Border.ChildTransitions>
</Border>
Value
TransitionCollection TransitionCollection TransitionCollection

The strongly typed collection of Transition style elements.

Attributes

Remarks

Important

The XAML syntax for all properties that use a TransitionCollection value is unusual in that you must declare an explicit TransitionCollection object element as the value, and then provide object elements as child elements of TransitionCollection for each of the transition animations you want to use. For most other XAML collection properties you could omit the collection object element because it can be implicit, but properties that use TransitionCollection don't support the implicit collection usage. For more info on implicit collections and XAML, see XAML syntax guide.

Transition animations play a particular role in UI design of your app. The basic idea is that when there is a change or transition, the animation draws the attention of the user to the change.

It's not common to set the value of the ChildTransitions property directly on a Border that is a direct element of app UI. It's more common to have a transitions collection be a part of a visual state, template or style. In this case you use mechanisms such as Setter of a Style to specify the ChildTransitions property. Styles are typically stored as a XAML resource.

See Also

ChildTransitionsProperty ChildTransitionsProperty ChildTransitionsProperty

Identifies the ChildTransitions dependency property.

public : static DependencyProperty ChildTransitionsProperty { get; }public static DependencyProperty ChildTransitionsProperty { get; }Public Static ReadOnly Property ChildTransitionsProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the ChildTransitions dependency property.

Attributes

CornerRadius CornerRadius CornerRadius

Gets or sets the radius for the corners of the border.

public : CornerRadius CornerRadius { get; set; }public CornerRadius CornerRadius { get; set; }Public ReadWrite Property CornerRadius As CornerRadius
<Border CornerRadius="uniformRadius"/>
- or -
<Border CornerRadius="topLeft,topRight,bottomRight,bottomLeft"/>

Value
CornerRadius CornerRadius CornerRadius

The degree to which the corners are rounded, expressed as values of the CornerRadius structure.

Attributes

Remarks

Member components of a CornerRadius value cannot be negative.

CornerRadiusProperty CornerRadiusProperty CornerRadiusProperty

Identifies the CornerRadius dependency property.

public : static DependencyProperty CornerRadiusProperty { get; }public static DependencyProperty CornerRadiusProperty { get; }Public Static ReadOnly Property CornerRadiusProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the CornerRadius dependency property.

Attributes
See Also

Padding Padding Padding

Gets or sets the distance between the border and its child object.

public : Thickness Padding { get; set; }public Thickness Padding { get; set; }Public ReadWrite Property Padding As Thickness
Value
Thickness Thickness Thickness

The dimensions of the space between the border and its child as a Thickness value. Thickness is a structure that stores dimension values using pixel measures.

Attributes

Remarks

A related property is Margin (a property of FrameworkElement ). For more info about the relationship between margin and padding, see Alignment, margin, and padding or Define layouts with XAML.

See Also

PaddingProperty PaddingProperty PaddingProperty

Identifies the Padding dependency property.

public : static DependencyProperty PaddingProperty { get; }public static DependencyProperty PaddingProperty { get; }Public Static ReadOnly Property PaddingProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the Padding dependency property.

Attributes

See Also