Step 2 of 3: Customizing C1HeaderedContentControl

In This Topic

In the last step, you created a Silverlight project containing C1HeaderedContentControl. In this step, you will customize C1HeaderedContentControl by setting a few of its properties and adding content to its content panel.

Complete the following steps:

Select the C1HeaderedContentControl and navigate to the Properties window to set the following properties::

Set the BorderBrush property’s hex value to “#FF198315”.
Set the HeaderForeground property’s hex value to “#FF198315”.
Set the BorderThickness property to “4, 4, 4, 4”.
Set the Header property to “Map of the World”.
Set the HeaderFontFamily to Arial.
Set the HeaderFontSize to “15”.
Set the HeaderHorizontalContentAlignment property to Left.

The XAML will appear similar to the following:

XAML	Copy Code
<c1:C1HeaderedContentControl Header="Map of the World" BorderBrush="#FF198315" HeaderForeground="#FF198315" BorderThickness="4, 4, 4, 4" HeaderFontFamily="Arial" HeaderFontSize="15" HorizontalHeaderAlignment="Left"> <c1:C1HeaderedContentControl.Content> <c1:C1Maps x:Name="c1Maps1" Height="200" Width="300"></c1:C1Maps> </c1:C1HeaderedContentControl.Content> </c1:C1HeaderedContentControl>

XAML

Copy Code

<c1:C1HeaderedContentControl Header="Map of the World" BorderBrush="#FF198315" 
                             HeaderForeground="#FF198315"
                             BorderThickness="4, 4, 4, 4" HeaderFontFamily="Arial" HeaderFontSize="15" HorizontalHeaderAlignment="Left">
    <c1:C1HeaderedContentControl.Content>
        <c1:C1Maps x:Name="c1Maps1" Height="200" Width="300"></c1:C1Maps>
    </c1:C1HeaderedContentControl.Content>
</c1:C1HeaderedContentControl>

Double click on C1Maps to add it to the content area.

In this step, you customized C1HeaderedContentControl. In the next step, you’ll run the project and see the results of the quick start.