<UserControl.Resources> <!-- TODO: DataTemplateを追加します --> </UserControl.Resources>
xamDialogWindow コントロールのもうひとつの主要な機能はダイアログ ウィンドウのヘッダーに画像を表示する機能です。
前提
このトピックは、ページ上に xamDialogWindow コントロールがすでにあることを前提とします。詳細は、 xamDialogWindow をページに追加のトピックを参照してください。
xamDialogWindow コントロールの HeaderIconTemplate プロパティをカスタムのデータ テンプレートに設定することによって、ヘッダーに表示されるデフォルトの画像をオーバーライドします。
ページでリソース ディクショナリを作成します。
XAML の場合:
<UserControl.Resources> <!-- TODO: DataTemplateを追加します --> </UserControl.Resources>
データ テンプレートを作成します。x:Key プロパティを HeaderIconImg を設定します。
XAML の場合:
<DataTemplate x:Key="HeaderIconImg"> <!-- TODO: グリッド パネルを追加します --> </DataTemplate>
Grid パネルを DataTemplate に追加します。Ellipse を Grid パネルに追加します。以下のプロパティを設定します。
Width - 16
Height - 16
XAML の場合:
<Grid>
<Ellipse Width="16" Height="16">
<!--TODO: Ellipse プロパティを追加します -->
</Ellipse>
</Grid>
Ellipse 要素の Fill 属性を設定します。RadialGradientBrush 要素を追加し、GradientOrigin プロパティを .1,.1 に設定します。
XAML の場合:
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin=".1,.1">
<!--TODO: GradientStops を追加します -->
</RadialGradientBrush>
</Ellipse.Fill>
2 つの GradientStop 要素を追加します。以下のプロパティを設定します。
Offset - 0.3, Color - White
Offset - 1, Color - Purple
XAML の場合:
<GradientStop Offset="0.3" Color="White"/> <GradientStop Offset="1" Color="Purple"/>
TextBlock コントロールを Grid パネルに追加します。以下のプロパティを設定します。
Text - IG
FontSize - 9
HorizontalAlignment - Center
VerticalAlignment - Center
XAML の場合:
<TextBlock Text="IG" FontSize="9" HorizontalAlignment="Center" VerticalAlignment="Center"/>
xamDialogWindow コントロールの HeaderIconTemplate プロパティを作成したデータ テンプレートに設定します。
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>
アプリケーションを保存して実行します。
