The Header Content Control

 

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,

HeaderInFF

Not Just Text

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

ContentPresenters

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

AddExisting

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

BuildAction

 

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,
ContentControlHeaderlWithImage 

 

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


This work is licensed under a Creative Commons Attribution By license.

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen online courses. His latest book, Building APIs with .NET will be released early in 2025. Liberty is a Senior SW Engineer for CNH and he was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Microsoft MVP.
This entry was posted in z Silverlight Archives and tagged . Bookmark the permalink.