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 is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been 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, Microsoft MVP and Telerik 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

Leave a Reply

Your email address will not be published. Required fields are marked *