Creating a Landing Page to Display Quick Card Information

The landing page for the sample is the SearchLandingView.xaml page, whose viewmodel is the SearchLandingViewModel class; see Listing 31.5.

An ObservableCollection of query string parameters is populated via the LoadUriParameters when the page is navigated to. The custom ParameterInfo class contains two string properties: Key and Value.

LISTING 31.5. SearchLandingViewModel Class

Click here to view code image

class SearchLandingViewModel : ViewModelBase
{
    readonly ObservableCollection<ParameterInfo> parameters
        = new ObservableCollection<ParameterInfo>();

    public ObservableCollection<ParameterInfo> Parameters
    {
        get
        {
            return parameters;
        }
    }

    public void LoadUriParameters(IDictionary<string, string> queryStringParameters)
    {
        parameters.Clear();

        foreach (KeyValuePair<string, string> pair in queryStringParameters)
        {
            parameters.Add(new ParameterInfo(pair.Key, pair.Value));
        }
    }
}

The view’s OnNavigatedTo method passes the query string dictionary, which is retrieved from the NavigationContext, as shown in the following excerpt:

Click here to view code image

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ViewModel.LoadUriParameters(NavigationContext.QueryString);
}

The landing page has a ListBox that is bound to the viewmodel’s Parameters property. Parameters are displayed using a DataTemplate, shown in the following excerpt:

Click here to view code image

<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Parameters}" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock
                    Text="{Binding Key}"
                    TextWrapping="Wrap"
                    Style="{StaticResource PhoneTextLargeStyle}"/>
                <TextBlock
                    Text="{Binding Value}"
                    TextWrapping="Wrap"
                    Style="{StaticResource PhoneTextAccentStyle}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>