Fun with XAML, Border Controls are Containers

In Windows Presentation Foundation a Border control is a container and thus can contain other WPF controls. Using Charles Petzold’s XAML Cruncher application, I typed up a little “XAML” to demonstrate the use of WPF borders. Typing up XAML is a great way to learn the structure of the markup for WPF and Silverlight.

The image below is a WPF Canvas control that contains two nested Border controls and a StackPanel control. The first StackPanel contains a ListBox control with 4 list box items. The first three list items have background and foreground attributes and the fourth one contains a border control. The border and background attributes of Border controls can be set to a LinearGradientBrush.

XAML:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Border BorderBrush="Black"
            BorderThickness="4"
            CornerRadius="45"
            Padding="25">
  <Border.Background>
   <LinearGradientBrush>
      <GradientStop Color="Black" Offset="0.3" />
      <GradientStop Color="#FF390E52" Offset="0.5" />
      <GradientStop Color="#FF311256" Offset="0.8" />
   </LinearGradientBrush>
 </Border.Background>
  <Canvas>
   <TextBlock FontSize="25" Foreground="White">Borders in XAML</TextBlock>
  <Border BorderThickness="2"
    CornerRadius="45"
    Padding="25"
    Canvas.Top="50">
  <Border.BorderBrush>
     <LinearGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.5" />
        <GradientStop Color="Red" Offset="1.0" />
     </LinearGradientBrush>
  </Border.BorderBrush>
  <Border.Background>
   <LinearGradientBrush>
     <GradientStop Color="Black" Offset="0.0" />
     <GradientStop Color="Red" Offset="0.5" />
     <GradientStop Color="Gold" Offset="1.0" />
   </LinearGradientBrush>
  </Border.Background>
 <StackPanel Height="120" Width="200">
    <ListBox>
      <ListBoxItem Background="Blue" Foreground="White">Borders</ListBoxItem>
     <ListBoxItem Background="Black" Foreground="White">StackPanels</ListBoxItem>
     <ListBoxItem Background="Orange" Foreground="Black">LinearGradientBrush</ListBoxItem>
     <ListBoxItem><Border BorderThickness="2" Background="blue"
       CornerRadius="45"
       Padding="25"
       Canvas.Top="50">
          <TextBlock Foreground="White">List Item with a border
          </TextBlock>
       </Border>
     </ListBoxItem>
   </ListBox>
  </StackPanel>
 </Border>
 <Border
    BorderThickness="2"
    CornerRadius="45"
    Padding="25"
    Canvas.Top="230">
 <Border.BorderBrush>
  <LinearGradientBrush>
    <GradientStop Color="Yellow" Offset="0.0" />
    <GradientStop Color="Orange" Offset="0.5" />
    <GradientStop Color="Red" Offset="1.0" />
  </LinearGradientBrush>
  </Border.BorderBrush>
  <Border.Background>
    <LinearGradientBrush>
       <GradientStop Color="Black" Offset="0.0" />
       <GradientStop Color="Red" Offset="0.5" />
       <GradientStop Color="Gold" Offset="1.0" />
      </LinearGradientBrush>
    </Border.Background>
    <StackPanel Height="120" Width="200">
       <CheckBox Foreground="White">Check box Control</CheckBox>
    </StackPanel>
   </Border>
  </Canvas>
 </Border>
</Page> 

REFERENCES:

I’ve enjoyed reading the following WPF book:
“Applications = Code + Markup A Guide to the Microsoft Windows Presentation Foundation”, Charles Petzold

http://www.charlespetzold.com/wpf/

XAML Cruncher Application
http://www.charlespetzold.com/wpf/XamlCruncher/XamlCruncher.application

Web Resources:

Controls and XAML:

http://msdn.microsoft.com/en-us/library/aa479869.aspx

WinForms and WPF:

http://windowsclient.net/

WPF Controls Gallery Sample:

http://msdn.microsoft.com/en-us/library/ms771466.aspx