Version

Working with the ItemTemplate

With xamCarouselListBox™, you can lay out items with DataTemplates and then assign the DataTemplate to the ItemTemplate property. By using the DataTemplate, you can specify how you want your data to display.

Note
Note

This topic assumes you have completed the tasks in Adding xamCarouselListBox to Your Application.

  1. Create a DataTemplate in the Resources area. The following code causes each item to display three elements from the underlying data. Place a Label above each element. Give the DataTemplate a Key. You will use this Key in the next step to assign the DataTemplate to xamCarouselListBox.

Warning: Be sure to assign a Key to the DataTemplate to prevent compile-time errors.

Specify a Background and Foreground color for each of the Labels to differentiate the Labels from the content.

In XAML:

<DataTemplate x:Key="SimpleDataTemplate">
        <StackPanel>
                <Label Content="Product Name:" Background="Black" Foreground="White"/>
                <ContentPresenter Content="{Binding XPath=ProductName}" />
                <Label Content="Cost Per Unit:" Background="Black" Foreground="White"/>
                <ContentPresenter Content="{Binding XPath=CostPerUnit}" />
                <Label Content="Shipping and Handling Costs:" Background="Black"
                  Foreground="White"/>
                <ContentPresenter Content="{Binding XPath=ShipAndHandle}" />
        </StackPanel>
</DataTemplate>

  1. Set the ItemTemplate property of the xamCarouselListBox to a StaticResource, the DataTemplate created in the previous step.

In XAML:

<igWindows:XamCarouselListBox
  ItemsSource="{Binding Source={StaticResource OrderData}, XPath=Order}"
  ItemTemplate="{StaticResource SimpleDataTemplate}"/>

  1. Build and run the project. You will see each item in xamCarouselListBox displaying black labels similar to the image below.

modifying xamcarousellistbox's itemtemplate