C1OutlookItem への画像の追加

C1OutlookBar は ItemsControl なので、項目のビジュアル表現を作成するために、データテンプレートを使用して任意のデータ型のオブジェクトのリストに連結できます。この例では、DataTemplate を使用した連結によってC1OutlookItem に簡単に画像を追加する方法について説明します。

Header = メール としたC1OutlookItem を含む C1OutlookBar1 という名前のC1OutlookBar があるとします。このC1OutlookItem の画像も必要です。この例では、Resources フォルダにプロジェクトの画像が含まれるとします。XAML は次のようになります。

XAML	コードのコピー
<c1:C1OutlookBar Height="274" HorizontalAlignment="Left" Margin="56,12,0,0" Name="c1OutlookBar1" VerticalAlignment="Top" Width="274"> <c1:C1OutlookItem Header="メール"/> </c1:C1OutlookBar>

折りたたみ項目パネルおよび項目ボタンに表示される画像にそれぞれ対応するSmallIconTemplate およびLargeIconTemplate の XAML を追加します。このマークアップは、C1OutlookBar タグ内に配置します。

XAML	コードのコピー
<c1:C1OutlookBar.LargeIconTemplate> <DataTemplate> <Image Source="{Binding}" Width="24" Height="24" /> </DataTemplate> </c1:C1OutlookBar.LargeIconTemplate> <c1:C1OutlookBar.SmallIconTemplate> <DataTemplate> <Grid Height="24"> <Image Source="{Binding}" Width="16" Height="16" /> </Grid> </DataTemplate> </c1:C1OutlookBar.SmallIconTemplate>

XAML

コードのコピー

<c1:C1OutlookBar.LargeIconTemplate>
      <DataTemplate>
           <Image Source="{Binding}" Width="24" Height="24" />
      </DataTemplate>
</c1:C1OutlookBar.LargeIconTemplate>
<c1:C1OutlookBar.SmallIconTemplate>
      <DataTemplate>
           <Grid Height="24">
                <Image Source="{Binding}" Width="16" Height="16" />
           </Grid>
      </DataTemplate>
</c1:C1OutlookBar.SmallIconTemplate>

データテンプレートに連結するSmallIcon およびLargeIcon を指定する XAML をC1OutlookItem に追加します。マークアップは次のようになります。

<c1:C1OutlookItem LargeIcon="Resources/Inbox24.png" SmallIcon="Resources/Inbox.png" Header="メール"/>
3.プロジェクトを実行します。C1OutlookBar を折りたたむと、折りたたみ項目パネルに小さなアイコンが表示されます。C1OutlookBar を展開すると、項目ボタン（展開）領域に大きなアイコンが表示されます。

展開された状態

折りたたまれた状態