Infragistics(R) NetAdvantage(R) : WPF 2012.1
Customize the Window Header Icon
E-mail your feedback on this topic.
Shared XAML > Interactions > xamDialogWindow > Using xamDialogWindow > Customize the Window Header Icon

Glossary Item Box

Before You Begin

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 Application topics.

What You Will Accomplish

You will override the default image displayed in the header by setting the xamDialogWindow control’s HeaderIconTemplate property to a custom data template.

Follow these Steps

  1. Create a resource dictionary on your page.

    In XAML:

    <UserControl.Resources>
       <!-- TODO: Add DataTemplate -->
    </UserControl.Resources>
    
    
  2. Create a Data Template. Set the x:Name property to HeaderIconImg.

    In XAML:

    <DataTemplate x:Name="HeaderIconImg">
       <!-- TODO: Add Grid Panel -->
    </DataTemplate>
    
    
  3. 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>
    
    
  4. 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>
    
  5. 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"/>
    
    
  6. 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"/>
  7. 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>
    
    
  8. Save and run your application.

 

Customize the Window Header Icon

Related Topics

Custom Cursors

Customize Modal Dialog Window Background

Handle Moving Events

Handle Window State Changing Events

Keyboard Settings

Modal and Modeless Dialog Windows

Position Minimized Dialog Window

Set the Dialog Window's Height and Width When Minimized

Start Up Position of xamDialogWindow

The xamDialogWindow Control's Behavior

Window Header Controls