Silverlight SDK for Microsoft Bing
How To Use CloudView

CloudView is the third 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 of the axes is Relevance and the other is configurable based on the data type. This model uses an interface called ICloudArranger.

By supplying custom ICloudArranger implementations, developers can effectively extend the axis arrangement of the CloudView indefinitely.

Like all the other Bing toolkit views, CloudView provides an optional item animation, which animates the items from the center of the view at data binding time.

CloudView also provides a simple magnification function so that items can be magnified when clustering occurs.

The default ICloudArranger implementations are:

To Use the CloudView...
  1. Declare the Control in Xaml

    The following Xaml fragment is a simple declaration of a CloudView. This fragment is actually taken from the Bing component supplied with this SDK.

    Example
    CopyC#
    <views:CloudView x:Name="CloudView" Width="Auto" Height="Auto">
    </views:CloudView>
  2. 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:CloudView x:Name="CloudView" Width="Auto" Height="Auto">
        <views:CloudView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="1">
                    <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,0,0,1" 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:CloudView.ItemTemplate>
    </views:CloudView>
  3. Bind Data to the Control

    Finally, we need to bind some actual data to the control. The CloudView 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
    CloudView.ItemsSource = SearchEnvironment.Default.SearchResults;