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).
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).
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.
<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.10 shows the second PanoramaItem
selected. Here the title and background have been scrolled horizontally.
18.118.31.67