Generally in developing business application with Silverlight 3 or 4 we require to display item listing. Normally we display items in a List Box control. There may be certain scenarios where you require switching the way items displayed in ListBox. If you have visited any shopping site, you will find that products are displayed in multiple views like GridView(TilesView) or ListView. For example have a look at this web page: http://shopping.indiatimes.com/Electronics/LCD-Plasma-TVs/LCDs-TVs/ctl/20376651/pc/960067/cat/960377
I have developed a similar kind of experience in Silverlight 3.
This sample depicts the way to implement listing of items in ListBox control. Here, you will see that user can switch the views from GridView(TilesView) to ListsView and vice versa.
Technically, when you heard of such requirement you may find a bit difficult. But the idea which used to implement this requirement is so simple. You just need to create DataTemplate and ItemsPanelTemplate for ListBox. These templates should be separate for each TilesView and ListView. In case of ListView the ItemsPanel diplaying the items will be StackPanel with vertical orientation and for TilesView it will be WrapPanel.
In the sample application I have created templates as given below:
1. Tiles View:
DataTemplate
<DataTemplate x:Key="TilesDataTemplate">
<local:TilesView Margin="5"/>
DataTemplate>
ItemsPanelTemplate
<ItemsPanelTemplate x:Key="TilesItemsPanelTemplate">
<Toolkit:WrapPanel/>
ItemsPanelTemplate>
2. Tiles View:
DataTemplate
<DataTemplate x:Key="ListDataTemplate">
<local:ListsView Margin="5"/>
DataTemplate>
ItemsPanelTemplate
<ItemsPanelTemplate x:Key="ListItemsPanelTemplate">
<StackPanel/>
ItemsPanelTemplate>
You need to add above four templates in Resources. In order to switch the views programmatically, I have two buttons on the Silverlight page. On click of each button I switch the DataTemplate and ItemsPanelTemplate of the list box control.
This is how ListBox will be added in xaml:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="2" x:Name="ProductsList" Width="{Binding Value, ElementName=WidthSlider}" Height="{Binding Value, ElementName=HeightSlider}" ItemTemplate="{StaticResource TilesDataTemplate}" ItemsPanel="{StaticResource TilesItemsPanelTemplate}"/>
By default the ListBox will display TilesView. You need to switch the relevant template for ListBox control on Button Click event as show below :
This is how the application will look like with two different views:
