WPF

WPF Border Tutorial

Apply a Border to WPF Control
 
Borders in WPF works little differently. Border in XAML is its own control that can be applied to other controls or XAML elememts. To place a border around an element, WPF provides the Border element. Similar to other WPF elements, the Border has Width, Height, Background, and HorizontalAlignment and VerticalAlignment properties.
 
Besides these common properties, Border has two properties that make Border a border. These two properties are BorderThickness and BorderBrush. The BorderBrush property represents the brush that is used to draw the border. The BorderThickness property represents the thickness of the border.
 
Code example of a simple border.  
  1. <Border    
  2.    BorderThickness="5"    
  3.    BorderBrush="Green"    
  4.    CornerRadius="10"    
  5.    Background="LightGray"    
  6.    HorizontalAlignment="Left"    
  7.    VerticalAlignment="Top"    
  8.    Width="270"    
  9.    Height="250" />    
The CornerRadius property represents the degree to which the corners of a Border are rounded.
 
The following code snippet creates a Border element and sets its properties.
  1. <Border BorderThickness="5" BorderBrush="Green" CornerRadius="10" Background="LightGray" HorizontalAlignment="Left" VerticalAlignment="Top" Width="270" Height="250" /> The code snippet in Listing 1 creates a Border around a Canvas element and sets its properties. The output looks like Figure 1 where all child controls are wrapped horizontally. <Border BorderThickness="5" BorderBrush="Green" CornerRadius="10" Background="LightGray" HorizontalAlignment="Left" VerticalAlignment="Top" Width="270" Height="250">  
  2.     <Canvas Background="LightCyan">  
  3.         <Rectangle Canvas.Left="30" Canvas.Top="20" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Red" />  
  4.     </Canvas>  
  5. </Border>  
Listing 1
 
The output looks like Figure 1 where you can see the green border with rounded corners.
 
BorderImg1.gif
Figure 1
 
The Border class in WPF represents a Border element. The code snippet listed in Listing 2 is C# code that creates a Border, sets its properties, and places it around a Canvas element.
  1. private void CreateDynamicBorder()   
  2. {  
  3.     Border border = new Border();  
  4.     border.Background = new SolidColorBrush(Colors.LightGray);  
  5.     border.BorderThickness = new Thickness(5);  
  6.     border.BorderBrush = new SolidColorBrush(Colors.Green);  
  7.     border.CornerRadius = new CornerRadius(15);  
  8.     border.Width = 270;  
  9.     border.Height = 250;  
  10.     Canvas cnvas = new Canvas();  
  11.     Rectangle rect = new Rectangle();  
  12.     rect.Width = 200;  
  13.     rect.Height = 200;  
  14.     rect.Fill = new SolidColorBrush(Colors.Black);  
  15.     rect.StrokeThickness = 10 d;  
  16.     cnvas.Children.Add(rect);  
  17.     border.Child = cnvas;  
  18.     RootLayout.Content = border;  
  19. }  
Listing 2
 
Note. Border can have only one child element. If you need to place border around multiple elements, you must place a border around each element.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.
    Membership not found