Silverlight SDK for Microsoft Bing
How To Use StackView

StackView is the first of four view components for Silverlight that are used in the Bing component.

The purpose of StackView is to provide a vertical stacked list which displays any data items and with any particular internal item layout. A seasoned Silverlight developer might ask: "Why implement this control? This sounds like a ListBox."

True, this is very much like a ListBox, but StackView, like the other views in the Views toolkit, provides an additional function - the animation of items following a data bind. StackView provides a vertical blind-style animation for each item, which fire in sequence as the items are added.

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

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

    Example
    CopyC#
    <views:StackView x:Name="StackView" Width="Auto" Height="Auto">
    </views:StackView>
  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:StackView x:Name="StackView" Width="Auto" Height="Auto">
        <views:StackView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Image x:Name="Icon" Source="{Binding IconUrl}" Grid.Column="0" Grid.RowSpan="2" Width="48" Height="48" Stretch="Uniform"/>
                    <Grid Grid.Row="0" Grid.Column="1" Width="Auto">
                        <views:LinkLabel Text="{Binding Title}" NavigateUri="{Binding Url}" FontWeight="Bold" FontSize="12" Margin="4,2,2,2"/>
                    </Grid>
                    <TextBlock Text="{Binding Snippet}" Grid.Column="1" Grid.Row="1" Margin="4,2,2,2"/>
                </Grid>
            </DataTemplate>
        </views:StackView.ItemTemplate>
    </views:StackView>
  3. Bind Data to the Control

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