- Silverlight Tutorial
- Silverlight - Home
- Silverlight - Overview
- Silverlight - Environment Setup
- Silverlight - Getting Started
- Silverlight - XAML Overview
- Silverlight - Project Types
- Silverlight - Fixed Layouts
- Silverlight - Dynamic Layout
- Constrained vs. Unconstrained
- Silverlight - CSS
- Silverlight - Controls
- Silverlight - Buttons
- Silverlight - Content Model
- Silverlight - ListBox
- Silverlight - Templates
- Silverlight - Visual State
- Silverlight - Data Binding
- Silverlight - Browser Integration
- Silverlight - Out-of-Browser
- Silverlight - Applications, Resources
- Silverlight - File Access
- Silverlight - View Model
- Silverlight - Input Handling
- Silverlight - Isolated Storage
- Silverlight - Text
- Silverlight - Animation
- Silverlight - Video and Audio
- Silverlight - Printing
- Silverlight Useful Resources
- Silverlight - Quick Guide
- Silverlight - Useful Resources
- Silverlight - Discussion
Silverlight - Border
One more useful element to bear in mind when laying out the user interface is Border. This is not a panel, as it can only contain a single child, but it is often useful for introducing some extra space into the layout.
It lets you add Margin around the outside of the Border, and Padding around the content.
As the name suggests, it can also draw a border around its content.
This is a rectangular border with optional rounded corners. For example, suppose I want a bit of space and an outline around the shape in my ScrollViewer.
Given below are the commonly used properties of Border class.
| Sr. No. | Property & Description |
|---|---|
| 1 | ActualHeight Gets the rendered height of a FrameworkElement. See Remarks. (Inherited from FrameworkElement) |
| 2 | ActualWidth Gets the rendered width of a FrameworkElement. See Remarks. (Inherited from FrameworkElement) |
| 3 | AllowDrop Gets or sets a value that determines whether this UIElement can be a drop target for purposes of drag-and-drop operations. (Inherited from UIElement) |
| 4 | Background Gets or sets the Brush that fills the background (inner area) of the border. |
| 5 | BackgroundProperty Identifies the Background dependency property. |
| 6 | CanDrag Gets or sets a value that indicates whether the element can be dragged as data in a drag-and-drop operation. (Inherited from UIElement) |
| 7 | Child Gets or sets the child element to draw the border around. |
| 8 | Height Gets or sets the suggested height of a FrameworkElement. (Inherited from FrameworkElement) |
| 9 | HorizontalAlignment Gets or sets the horizontal alignment characteristics that are applied to a FrameworkElement when it is composed in a layout parent, such as a panel or items control. (Inherited from FrameworkElement) |
| 10 | Margin Gets or sets the outer margin of a FrameworkElement. (Inherited from FrameworkElement) |
| 11 | MaxHeight Gets or sets the maximum height constraint of a FrameworkElement. (Inherited from FrameworkElement) |
| 12 | MaxWidth Gets or sets the maximum width constraint of a FrameworkElement. (Inherited from FrameworkElement) |
| 13 | MinHeight Gets or sets the minimum height constraint of a FrameworkElement. (Inherited from FrameworkElement) |
| 14 | MinWidth Gets or sets the minimum width constraint of a FrameworkElement. (Inherited from FrameworkElement) |
| 15 | Name Gets or sets the identifying name of the object. When a XAML processor creates the object tree from XAML markup, run-time code can refer to the XAML-declared object by this name. (Inherited from FrameworkElement) |
| 16 | Opacity Gets or sets the degree of the object's opacity. (Inherited from UIElement) |
| 17 | Padding Gets or sets the distance between the border and its child object. |
| 18 | Resources Gets the locally defined resource dictionary. In XAML, you can establish resource items as child object elements of a frameworkElement.Resources property element, through XAML implicit collection syntax. (Inherited from FrameworkElement) |
| 19 | Style Gets or sets an instance Style that is applied for this object during layout and rendering. (Inherited from FrameworkElement) |
| 20 | VerticalAlignment Gets or sets the vertical alignment characteristics that are applied to a FrameworkElement when it is composed in a parent object such as a panel or items control. (Inherited from FrameworkElement) |
| 21 | Visibility Gets or sets the visibility of a UIElement. A UIElement that is not visible is not rendered and does not communicate its desired size to layout. (Inherited from UIElement) |
| 22 | Width Gets or sets the width of a FrameworkElement. (Inherited from FrameworkElement) |
The Border class has these methods. It also inherits methods from the Object class.
| Sr. No. | Method & Description |
|---|---|
| 1 | Arrange Positions the child objects and determines a size for UIElement. Parent objects that implement custom layout for their child elements should call this method from their layout override implementations to form a recursive layout update. (Inherited from UIElement) |
| 2 | ArrangeOverride Provides the behavior for the Arrange pass of layout. Classes can override this method to define their own Arrange pass behavior. (Inherited from FrameworkElement) |
| 3 | FindName Retrieves an object that has the specified identifier name. (Inherited from FrameworkElement) |
| 4 | GetValue Returns the current effective value of a dependency property from a DependencyObject. (Inherited from DependencyObject) |
| 5 | SetBinding Attaches a binding to a FrameworkElement, using the provided binding object. (Inherited from FrameworkElement) |
| 6 | SetValue Sets the local value of a dependency property on a DependencyObject. (Inherited from DependencyObject) |
| 7 | StartDragAsync Initiates a drag-and-drop operation. (Inherited from UIElement) |
| 8 | UpdateLayout Ensures that all positions of child objects of a UIElement are properly updated for layout. (Inherited from UIElement) |
The Border class has the following events −
| Sr. No. | Event & Description |
|---|---|
| 1 | DragEnter Occurs when the input system reports an underlying drag event with this element as the target. (Inherited from UIElement) |
| 2 | DragLeave Occurs when the input system reports an underlying drag event with this element as the origin. (Inherited from UIElement) |
| 3 | DragOver Occurs when the input system reports an underlying drag event with this element as the potential drop target. (Inherited from UIElement) |
| 4 | DragStarting Occurs when a drag operation is initiated. (Inherited from UIElement) |
| 5 | Drop Occurs when the input system reports an underlying drop event with this element as the drop target. (Inherited from UIElement) |
| 6 | DropCompleted Occurs when a drag-and-drop operation is ended. (Inherited from UIElement) |
| 7 | KeyDown Occurs when a keyboard key is pressed while the UIElement has focus. (Inherited from UIElement) |
| 8 | KeyUp Occurs when a keyboard key is released while the UIElement has focus. (Inherited from UIElement) |
| 9 | LayoutUpdated Occurs when the layout of the visual tree changes, due to layout-relevant properties changing value or some other action that refreshes the layout. (Inherited from FrameworkElement) |
| 10 | Loaded Occurs when a FrameworkElement has been constructed and added to the object tree, and is ready for interaction. (Inherited from FrameworkElement) |
| 11 | Loading Occurs when a FrameworkElement begins to load. (Inherited from FrameworkElement) |
| 12 | ManipulationCompleted Occurs when a manipulation on the UIElement is complete. (Inherited from UIElement) |
Example
Let us look at a simple example in which border and inside border rectangle is added.
<UserControl x:Class = "ScrollViewerExample.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Border BorderBrush = "Blue" BorderThickness = "10"
Margin = "5" CornerRadius = "80" Padding = "80">
<Rectangle Fill = "Gray" Width = "116" Height = "75" />
</Border>
</Grid>
</UserControl>
When the above code is compiled and executed, you will see the following output.
The Border supports the rounded edges with a CornerRadius property.