C1OutlookBar is an ItemsControl that can be bound to any list of objects of any data type using DataTemplates to create a visual representation of the items. In this example, you'll see how easily you can add an image to a C1OutlookItem by binding through a DataTemplate.

Suppose you have a C1OutlookBar named C1OutlookBar1 which contains a C1OutlookItem with the Header = Mail. You will also need an image for the C1OutlookItem. In this example, we'll use a Resources folder containing images in our project. Here's how the XAML might look:

<c1:C1OutlookBar Height="274" HorizontalAlignment="Left" Margin="56,12,0,0" Name="c1OutlookBar1" VerticalAlignment="Top" Width="274">
           <c1:C1OutlookItem Header="Mail"/>
</c1:C1OutlookBar>

1. Add XAML for a SmallIconTemplate and LargeIconTemplate for the images that will be shown in the Collasped Item Panel and for the Item Button, respectively. This markup should be placed within the C1OutlookBar tags.

    

   XAML	Copy Code
   <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>

2. Add XAML to the C1OutlookItem specifying the SmallIcon and LargeIcon bound to the DataTemplates so the markup should now look like this:

   <c1:C1OutlookItem LargeIcon="Resources/Inbox24.png" SmallIcon="Resources/Inbox.png" Header="Mail"/>
   
   

3. Run the project and notice when the C1OutlookBar is collasped, you will see the small icon in the Collapsed Item Panel. When the C1OutlookBar is expanded, the large icon will appear in the Item Buttons (Expanded) area.

   Expanded

    

    

   Collapsed

   

Copyright (c) GrapeCity, inc. All rights reserved.