Border Border Border Class

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

Syntax

Declaration

public sealed class Borderpublic sealed class BorderPublic NotInheritable Class Border
<Border>
  singleChild
</Border>

Inheritance Hierarchy

Inherited Members

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Tag
Tag
Tag
, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

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.

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>

Constructors summary

Initializes a new instance of the Border class.

Properties summary

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

Identifies the Background dependency property.

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

Identifies the BorderBrush dependency property.

Gets or sets the thickness of the border.

Identifies the BorderThickness dependency property.

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

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

Identifies the ChildTransitions dependency property.

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

Identifies the CornerRadius dependency property.

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

Identifies the Padding dependency property.

Constructors

  • Border()
    Border()
    Border()
    Border()

    Initializes a new instance of the Border class.

    public Border()public Border()Public Function Border() As

Properties

  • Background
    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}"/>
    
    

    Property Value

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

    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.

    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 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>
    
  • BackgroundProperty
    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

    Property Value

  • BorderBrush
    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}"/>
    
    

    Property Value

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

    Remarks

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

    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 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>
    
  • BorderBrushProperty
    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

    Property Value

  • BorderThickness
    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"/>
    
    

    Property Value

  • BorderThicknessProperty
    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

    Property Value

  • Child
    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>
    
    

    Property Value

  • ChildTransitions
    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>
    

    Property Value

    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.

  • ChildTransitionsProperty
    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

    Property Value

  • CornerRadius
    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"/>
    
    

    Property Value

    Remarks

    Member components of a CornerRadius value cannot be negative.

  • CornerRadiusProperty
    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

    Property Value

  • Padding
    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

    Property Value

    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.

  • PaddingProperty
    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

    Property Value

Device family

Windows 10 (introduced v10.0.10240.0)

API contract

Windows.Foundation.UniversalApiContract (introduced v1)

Attributes

Windows.Foundation.Metadata.WebHostHiddenAttribute
Windows.Foundation.Metadata.ActivatableAttribute
Windows.UI.Xaml.Markup.ContentPropertyAttribute
Windows.Foundation.Metadata.ContractVersionAttribute
Windows.Foundation.Metadata.MarshalingBehaviorAttribute
Windows.Foundation.Metadata.ThreadingAttribute
Windows.Foundation.Metadata.StaticAttribute

Details

Assembly

Windows.UI.Xaml.Controls.dll