Border Border Border Border Class

Initializes a new instance of the Border class.

public : Border()public Border()Public Sub New()// This API is not available in Javascript.

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// This API is not available in Javascript.

<Border Background="{StaticResource resourceName}"/>

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

ChildChildChildChild

Use brushes

Identifies the Background dependency property.

public : static DependencyProperty BackgroundProperty { get; }public static DependencyProperty BackgroundProperty { get; }Public Static ReadOnly Property BackgroundProperty As DependencyProperty// This API is not available in Javascript.

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// This API is not available in Javascript.

<Border BorderBrush="{StaticResource resourceName}"/>

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

Use brushes

Identifies the BorderBrush dependency property.

public : static DependencyProperty BorderBrushProperty { get; }public static DependencyProperty BorderBrushProperty { get; }Public Static ReadOnly Property BorderBrushProperty As DependencyProperty// This API is not available in Javascript.

Gets or sets the thickness of the border.

public : Thickness BorderThickness { get; set; }public Thickness BorderThickness { get; set; }Public ReadWrite Property BorderThickness As Thickness// This API is not available in Javascript.

<Border BorderThickness="uniform"/>
- or -
<Border BorderThickness="left&right,top&bottom"/>
- or -
<Border BorderThickness="left,top,right,bottom"/>

See Also

ThicknessThicknessThicknessThickness

Identifies the BorderThickness dependency property.

public : static DependencyProperty BorderThicknessProperty { get; }public static DependencyProperty BorderThicknessProperty { get; }Public Static ReadOnly Property BorderThicknessProperty As DependencyProperty// This API is not available in Javascript.

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// This API is not available in Javascript.

<Border>
  singleChild
</Border>

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// This API is not available in Javascript.

<Border>
  <Border.ChildTransitions>
    <TransitionCollection>
      oneOrMoreTransitions
    </TransitionCollection>
  </Border.ChildTransitions>
</Border>

Remarks

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

TransitionCollectionTransitionCollectionTransitionCollectionTransitionCollection

Identifies the ChildTransitions dependency property.

public : static DependencyProperty ChildTransitionsProperty { get; }public static DependencyProperty ChildTransitionsProperty { get; }Public Static ReadOnly Property ChildTransitionsProperty As DependencyProperty// This API is not available in Javascript.

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// This API is not available in Javascript.

<Border CornerRadius="uniformRadius"/>
- or -
<Border CornerRadius="topLeft,topRight,bottomRight,bottomLeft"/>

Remarks

Member components of a CornerRadius value cannot be negative.

Identifies the CornerRadius dependency property.

public : static DependencyProperty CornerRadiusProperty { get; }public static DependencyProperty CornerRadiusProperty { get; }Public Static ReadOnly Property CornerRadiusProperty As DependencyProperty// This API is not available in Javascript.

See Also

BorderBorderBorderBorder

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// This API is not available in Javascript.

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

ThicknessThicknessThicknessThickness

Alignment, margin, and padding

Identifies the Padding dependency property.

public : static DependencyProperty PaddingProperty { get; }public static DependencyProperty PaddingProperty { get; }Public Static ReadOnly Property PaddingProperty As DependencyProperty// This API is not available in Javascript.