Элемент управления HeaderContentControl в Silverlight

Данная статья представляет собой обзор элемента управления HeaderContent из Silverlight Toolkit. Для того, чтобы увидеть HeaderContentControl в действии создайте новое приложение Silverlight, а также новую ссылку на Microsoft.Windows.Controls.dll из toolkit.

Page.xaml

Начните с добавления ссылки на Microsoft.Windows.Controls.dll в ваше приложение, и затем объявите пространство имен XML Name Space в самом верху вашей Page.xaml страницы,

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

HeaderControl состоит из двух частей: заголовка (header) и содержимого (contents),

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

В указанном выше коде мы используем текст для частей заголовка и содержимого,

Не просто текст

Вы получите интересный результат, если добавите страницу с HeaderContentControl в Expression Blend, и затем создадите шаблон их элемента (при помощи template)…

Элемент управления состоит из пары объектов ContentPresenter в пределах StackPanel. Тем не менее, если Header является ContentPresenter, то не будет существовать никаких ограничений по тексту.

(Закройте Blend и не сохраняйте изменения)

Давайте добавим изображение к каталогу Page.xaml и затем добавим его в проект

Убедитесь в том, что действие Build , находящееся в окошке свойств (Properties), установлено в Resource,

Теперь мы можем возвратиться к Page.xaml и убрать текст, заменив его изображением,

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

А вот что вы получите в качестве результата,

HeaderContentControl является одним из мощных кирпичей, особенно в комбинации, к примеру, с Expander.