BandCloudView is the last of four view components for Silverlight that are used in the Bing component.
The purpose of CloudView is to provide a dual axis display metaphor, in which one axis is Relevance and the other axis is customizable, depending on the data type. BandCloudView provides a configurable vertical and horizontal axis and an extensible model using flexible data binding and sorting.
The difference between CloudView and BandCloudView is that in CloudView, items are arranged free form across a fluid Cartesian surface. In BandCloudView, items are arranged in vertical bands based on granular division. Items in each band are arranged horizontally within each band as if each band were a horizontal list.
Like all the other Bing toolkit views, BandCloudView provides an optional item animation, which animates the items from the center of the view at data binding time.

-
Declare the Control in Xaml
The following Xaml fragment is a simple declaration of a BandCloudView. This fragment is actually taken from the Bing component supplied with this SDK.
Example
CopyC#
<views:BandCloudView x:Name="BandView" Width="Auto" Height="Auto" HorizontalSortField="Date" HorizontalSortDirection="Descending" VerticalSortField="Relevancy" VerticalSortDirection="Descending"> </views:BandCloudView>
-
Style the Item Template (optional)
You will need to supply an item template for your particular data binding scenario. To keep the discussion focused on Microsoft Bing, we'll show an ItemTemplate for a SearchResult object.
Example
CopyC#
<views:BandCloudView x:Name="BandView" Width="Auto" Height="Auto" HorizontalSortField="Date" HorizontalSortDirection="Descending" VerticalSortField="Relevancy" VerticalSortDirection="Descending"> <views:BandCloudView.ItemTemplate> <DataTemplate> <Grid Margin="2"> <Grid.RowDefinitions> <RowDefinition Height="48"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Image x:Name="Icon" Source="{Binding IconUrl}" Grid.Row="0" Width="48" Height="48" Margin="0" Stretch="Uniform"/> <views:LinkLabel Text="{Binding Title}" NavigateUri="{Binding Url}" Grid.Row="1" FontWeight="Normal" FontSize="9" Margin="0" TextAlignment="Center" TextWrapping="Wrap"/> </Grid> </DataTemplate> </views:BandCloudView.ItemTemplate> </views:BandCloudView>
-
Bind Data to the Control
Finally, we need to bind some actual data to the control. The BandCloudView is derived from ItemsControl, and as such we can data bind any IEnumerable source to it. The best practice for Silverlight is to use an ObservableCollection<T> from the System.Collections.ObjectModel namespace. This generic collection is designed for use with ItemsControl instances and allows for the collection to be modified at runtime. An asychronous layout will be used to repopulate the bound control automatically.
In the Microsoft Bing runtime, the SearchEnvironment provides the SearchResults type, which is derived from ObservableCollection<T>.
Example
CopyC#
//We either pre-bind to an ObservableCollection instance, or we can bind on demand to other collection types, //such as System.Collections.Generic.List or directly to System.Array instances from service proxy results BandCloudView.ItemsSource = SearchEnvironment.Default.SearchResults;