Sunday, January 18, 2009

The Header Content Control

by jesseliberty via Jesse Liberty - Silverlight Geek on 1/18/2009 3:17:19 AM

This quick introduction to the HeaderContentControl of the Silverlight Toolkit will lay the ground work for future entries on the Expander control.

To see the HeaderContentControl with as little fuss as possible, create a new Silverlight application and add a reference to the Microsoft.Windows.Controls.dll from the toolkit.

Page.xaml

Begin by adding a reference to the Microsoft.Windows.Controls.dll to your application and then declare an XML Name Space at the top of Page.xaml,

xmlns:control="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls" 

The HeaderControl consists of two parts: the header part and the contents part,

<Grid x:Name="LayoutRoot" Background="White">

<control:HeaderedContentControl 
   x:Name="SimpleHeaderContent"
   Grid.Row="0">
  <control:HeaderedContentControl.Header>
    <TextBlock x:Name="HeaderContentControlHeader"
               Text="Header for simple Header Content Control"
               FontSize="16"
               FontFamily="Georgia"
               FontWeight="Bold" /> 
  </control:HeaderedContentControl.Header>
  <control:HeaderedContentControl.Content>
    <TextBlock x:Name="Message"
               Text="Content for the content control."
               TextWrapping="Wrap"
               FontFamily="Comic Sans MS"
               FontSize="24"
               Margin="10" />
  </control:HeaderedContentControl.Content>
</control:HeaderedContentControl>

</Grid>

In the code shown above we are using text for both the header and the content portions,

Not Just Text

An interesting thing happens if you put a page with a  HeaderContentControl into Expression Blend, and then template the control…

The control consists of a pair of ContentPresenter objects within a stack panel.  If, however, the Header (e.g.,) is a ContentPresenter, then it is in no way restricted to text. 

(Close Blend and don't save the changes)

Let's add an image to Page.xaml's directory and then make that image a compiled resource by adding it to the project

Make sure the Build Action (in the properties window) is set to Resource,

Now we can return to Page.xaml and remove the text and substitute the Image,

<control:HeaderedContentControl.Header>
   <!--   <TextBlock x:Name="HeaderContentControlHeader"
             Text="Header for simple Header Content Control"
             FontSize="16"
             FontFamily="Georgia"
             FontWeight="Bold" /> -->
  
  <Image Source="LogoSmall.jpg"
         Stretch="UniformToFill"
         VerticalAlignment="Stretch"
         HorizontalAlignment="Stretch"
         MaxHeight="100"
         MaxWidth="100" /> 
</control:HeaderedContentControl.Header>

The result is immediately obvious,

The HeaderContentControl makes a powerful building block, especially when combined with, e.g., the Expander, as we'll see very soon.

MORE Header Controls Video