Sample Panorama Application

The sample for this section makes use of the WCF Bookshop Service, which was detailed in Chapter 3, “Understanding the Application Execution Model.” This service is used to retrieve a list of products and present them within a Panorama.

The code is located in the files PanoramaView.xaml, PanoramaView.xaml.cs, and PanoramaViewModel.cs in the downloadable sample code.

The viewmodel, for this example, exposes a collection of Product objects, which are retrieved from the Bookshop Service when the viewmodel is instantiated, and a single featured product, which is the first member of the collection (see Listing 11.8).

LISTING 11.8. PanoramaViewModel Class

Click here to view code image

public class PanoramaViewModel : ViewModelBase
{
    public PanoramaViewModel()
    {
        BookshopServiceClient client = new BookshopServiceClient();
        client.GetProductsCompleted
            += (sender, args) =>
                {
                    if (args.Error != null)
                    {
                        throw args.Error;
                    }

                    Products = args.Result;
                    FeaturedProduct = args.Result.FirstOrDefault();
                };
        client.GetProductsAsync();
    }

    ObservableCollection<Product> products;

    public ObservableCollection<Product> Products
    {
        get
        {
            return products;
        }
        private set
        {
            Assign(ref products, value);
        }
    }

    Product featuredProduct;
    public Product FeaturedProduct
    {
        get
        {
            return featuredProduct;
        }
        private set
        {
            Assign(ref featuredProduct, value);
        }
    }
}

The PanoramaView code-beside is used to instantiate an instance of the PanoramaViewModel, which is assigned to PanoramaView’s DataContext (see Listing 11.9).

LISTING 11.9. PanoramaView Class

Click here to view code image

public partial class PanoramaView : PhoneApplicationPage
{
    public PanoramaView()
    {
        InitializeComponent();
        DataContext = new PanoramaViewModel();
    }
}

The view contains two PanoramaItems. The first displays the list of products and is titled Best Picks. A Windows Phone Toolkit WrapPanel control is used to display the Product images thumbs (see Listing 11.10). For more information on the WrapPanel control, see Chapter 9, “Enriching the User Experience with the Windows Phone Toolkit Controls.”

The second PanoramaItem presents the details of the featured product; a larger image is displayed for the product, and a HyperlinkButton allows you to open the built-in web browser application.

LISTING 11.10. PanoramaView.xaml (excerpt)

Click here to view code image

<Grid x:Name="LayoutRoot" Background="Transparent">
    <controls:Panorama x:Name="Panorama"
        Title="Bookshop">
        <controls:Panorama.Background>
            <ImageBrush ImageSource="../../../Images/PanoramaBackground.png"/>
        </controls:Panorama.Background>

        <controls:PanoramaItem Header="Best Picks">
            <ListBox ItemsSource="{Binding Products}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel x:Name="wrapPanel"  />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding SmallImageUri}"
                               MaxWidth="150" MaxHeight="150"
                               Margin="10" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </controls:PanoramaItem>

        <controls:PanoramaItem Header="Featured"
                    DataContext="{Binding FeaturedProduct}">
            <StackPanel>
                <TextBlock Text="{Binding Product.Title}"
                TextWrapping="Wrap"
                Style="{StaticResource PhoneTextTitle2Style}"/>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding LargeImageUri}"
                           MaxWidth="250" MaxHeight="250"
                           Margin="10,10,0,10"/>
                    <StackPanel>
                        <TextBlock Text="{Binding Author}"
                        TextWrapping="Wrap"
                        Style="{StaticResource PhoneTextTitle3Style}"/>
                        <TextBlock Text="{Binding Price,
                        Converter={StaticResource StringFormatConverter},
                        ConverterParameter={0:C}}"
                        Style="{StaticResource PhoneTextTitle3Style}"/>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="ISBN"
                            Style="{StaticResource PhoneTextTitle3Style}"/>
                            <TextBlock Text="{Binding Isbn13}"
                            TextWrapping="Wrap"
                            Style="{StaticResource PhoneTextNormalStyle}"/>
                        </StackPanel>
                        <HyperlinkButton
                            NavigateUri="{Binding ExternalUrl}"
                            TargetName="_blank"
                            Content="External Page"
                            Margin="0,10,0,0"
                            HorizontalAlignment="Left" />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </controls:PanoramaItem>

    </controls:Panorama>
</Grid>

Figure 11.9 shows the Panorama presenting the first PanoramaItem. Notice that the second PanoramaItem is partially displayed. This helps to improve the user’s awareness of neighboring content.

FIGURE 11.9 The first PanoramaItem presents a list of Products in a WrapPanel.

Figure 11.10 shows the second PanoramaItem selected. Here the title and background have been scrolled horizontally.

FIGURE 11.10 The second PanoramaItem presents the featured product.