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.



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,


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

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

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,

   <!--   <TextBlock x:Name="HeaderContentControlHeader"
             Text="Header for simple Header Content Control"
             FontWeight="Bold" /> -->
  <Image Source="LogoSmall.jpg"
         MaxWidth="100" /> 
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

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 Pluralsight & LinkedIn Learning courses. 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 Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in z Silverlight Archives and tagged . Bookmark the permalink.

One Response to The Header Content Control

  1. Pingback: An Objective Appraisal of Link Dozer « Ebay Wholesale and Internet Marketing Tips

Comments are closed.