<UserControl.Resources>
<!-- TODO: Add DataTemplate -->
</UserControl.Resources>
Another key feature of the xamDialogWindow™ control is the ability to display an image in the header of the dialog window.
Assumptions
This topic assumes that you already have a xamDialogWindow control on your page. For more information, see the Adding xamDialogWindow to Your Page topic.
You will override the default image displayed in the header by setting the xamDialogWindow control’s HeaderIconTemplate property to a custom data template.
Create a resource dictionary on your page.
In XAML:
<UserControl.Resources>
<!-- TODO: Add DataTemplate -->
</UserControl.Resources>Create a Data Template. Set the x:Key property to HeaderIconImg.
In XAML:
<DataTemplate x:Key="HeaderIconImg">
<!-- TODO: Add Grid Panel -->
</DataTemplate>Add a Grid panel to the DataTemplate. Add an Ellipse to the Grid panel. Set the following properties:
Width – 16
Height – 16
In XAML:
<Grid>
<Ellipse Width="16" Height="16">
<!--TODO: Add Ellipse Properties -->
</Ellipse>
</Grid>Set the Ellipse element’s Fill attribute. Add a RadialGradientBrush element and set the GradientOrigin property to .1,.1.
In XAML:
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin=".1,.1">
<!--TODO: Add GradientStops -->
</RadialGradientBrush>
</Ellipse.Fill>Add two GradientStop elements. Set the following properties:
Offset – 0.3, Color – White
Offset – 1, Color – Purple
In XAML:
<GradientStop Offset="0.3" Color="White"/>
<GradientStop Offset="1" Color="Purple"/>Add a TextBlock control to the Grid panel. Set the following properties:
Text – IG
FontSize – 9
HorizontalAlignment – Center
VerticalAlignment – Center
In XAML:
<TextBlock Text="IG" FontSize="9" HorizontalAlignment="Center" VerticalAlignment="Center"/>Set the xamDialogWindow control’s HeaderIconTemplate property to the data template you created.
In XAML:
<Grid x:Name="LayoutRoot" Width="600" Height="400">
<ig:XamDialogWindow x:Name="DialogWindow" Width="200"
Height="200" Content="Sample Dialog Window" IsModal="True"
HeaderIconTemplate="{StaticResource HeaderIconImg}">
</ig:XamDialogWindow>
</Grid>Save and run your application.
