CarouselListBoxItem is a selectable container for items contained within the xamCarouselListBox™ control. The CarouselListBoxItem derives from CarouselPanelItem which derives from ListBoxItem. The xamCarouselListBox contains a collection of CarouseListBoxItems. You can create these items manually, or xamCarouselListBox will create them if it is data bound.
Templates can be very complex. A control’s template contains all the settings necessary to render that particular control.
Follow these steps to modify the CarouselListBoxItem template. You will place a border around each item in the xamCarouselListBox. This topic assumes you have completed the tasks in the Adding xamCarouselListBox to Your Application and Working with the ItemTemplate topics.
Make a few modifications to the code in the Working with the ItemTemplate topic. Remove the Label’s Background and Foreground settings in the DataTemplate. The modified DataTemplate should look similar to the code below.
In XAML:
<DataTemplate x:Key="SimpleDataTemplate">
<StackPanel>
<Label Content="Product Name:"/>
<ContentPresenter Content="{Binding XPath=ProductName}" />
<Label Content="Cost Per Unit:"/>
<ContentPresenter Content="{Binding XPath=CostPerUnit}" />
<Label Content="Shipping and Handling Costs:"/>
<ContentPresenter Content="{Binding XPath=ShipAndHandle}" />
</StackPanel>
</DataTemplate>
Create a Border and set the BorderBrush to Tomato and the BorderThickness to 10. For your convenience, you can copy the entire Style Template into your project.
In XAML:
<Style TargetType="{x:Type igWindows:CarouselListBoxItem}">
...
<ScrollViewer ...>
...
<Border x:Name="itemContentHolderBackground"
Background="#000FF000" CornerRadius="4,4,4,4"
BorderBrush="Tomato" BorderThickness="10"/>
...
</ScrollViewer ...>
...
</Style>
Build and run the project. You will see a reddish border around each item of the xamCarouselListBox similar to the image below.
