Week 8: Data Binding Exercise (Bookstore)

Size: px

Start display at page:

Download "Week 8: Data Binding Exercise (Bookstore)"

Matthew Wheeler
5 years ago
Views:

1 BCIS 4650 Week 8: Data Binding Exercise (Bookstore) Page 1 of 6

2 Page 2 of 6 XAML CODE FOR MainPage.xaml <Page xmlns=" xmlns:x=" xmlns:d=" xmlns:mc=" xmlns:bookstore1universal_10="using:bookstore1universal_10" x:class="bookstore1universal_10.mainpage" mc:ignorable="d"> <Page.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <! If compiler cannot find a style definition in the standard library, It will look in this file --> <ResourceDictionary Source="BookstoreStyles.xaml"/> </ResourceDictionary.MergedDictionaries>  <DataTemplate x:key="booktemplate"> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions>  <StackPanel Grid.Column="0" Orientation="Horizontal"> <Border Width="56" Height="56"> <Image Source="Binding CoverImage" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0.473,0.071"/> </Border> <StackPanel Grid.Column="1" Orientation="Vertical"> <TextBlock Text="Binding Title" Style="StaticResource TitleTextBlockStyle" TextWrapping="NoWrap" Margin="9.6,0"/> <TextBlock Text="Binding Author" Style="StaticResource SubtitleTextBlockStyle" TextWrapping="NoWrap" Margin="9.6,0"/> <TextBlock Height="10"/> </StackPanel> </StackPanel> </Grid> </DataTemplate> </ResourceDictionary> </Page.Resources>  <Page.DataContext> <Bookstore1Universal_10:BookstoreViewModel/> </Page.DataContext> <Grid x:name="layoutroot" Background="#FF059A1A"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>

3 Page 3 of 6  <StackPanel x:name="titlepanel" Grid.Row="0" Margin="9.6,13.6,0,22.4"> <TextBlock Text="Binding AppName" Style="StaticResource CaptionTextBlockStyle" Margin="9.6,0" Foreground="White"/> <TextBlock Text="Binding PageTitle" Margin="7.2,0,0,0" Style="StaticResource HeaderTextBlockStyle" Foreground="White"/> </StackPanel>  <Grid x:name="contentpanel" Grid.Row="1" Margin="9.6,0" >  <ListBox ItemsSource="Binding ShelvedBooks" ItemTemplate="StaticResource BookTemplate" BorderBrush="x:Null" Style="StaticResource BookstoreListBoxStyle" SelectionChanged="ListBox_SelectionChanged"/> </Grid> </Grid> </Page> ================================================================================================ NOW WRITE THE C# for BookstoreViewModel.cs namespace Bookstore1Universal_10 using System; using System.Collections.ObjectModel; using Windows.ApplicationModel; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Media.Imaging; //This file contains code for three classes. The first describes the DataContext. //The second describes a single book in the collection //The third provides test data for this demo. public class BookstoreViewModel //***This class specifies the DataContext required to have data bindings.*** //***You cannot bind to any property which is NOT part of this DataContext.*** // Create an object variable to represent the ObservableCollection of type BookSku. //The class BookSku is defined later in this file. #region fields private ObservableCollection<BookSku> mybookskus; #endregion fields #region properties //application name to show in XAML; note compact get clause public string AppName get return "YE OLDE BOOK SHOP (BOOKSTORE1UNIVERSAL_10)"; //This is what the XAML ListBox will bind to. A collection should have a plural name, as this one does. //In this case the object variable ShelvedBooks will contain a copy of the collection mybookshus.

4 public ObservableCollection<BookSku> ShelvedBooks get return mybookskus; //Page title to show in XAML public string PageTitle get return "Classic Literature"; #endregion properties #region constructors public BookstoreViewModel() //the constructor // Establish the object variable of owning a collection of BookSku. this.mybookskus = new ObservableCollection<BookSku>(); Page 4 of 6 DataSource.LoadBookSkusFromCloudService(ref this.mybookskus); #endregion constructors //We need a public class to represent an individual book in the collection. It will have four //properties: Author, Title, CoverImage, and CoverImagePath. //We will use this class in the Load methods later in this file. public class BookSku #region properties //"internal set" here means that the source data is privately (i.e., inside this namespace) assigned public string Author get; internal set; public ImageSource CoverImage get // this.coverimagepath contains a path of the covers, ex., "/Assets/CoverImages/emma.png". return new BitmapImage(new Uri(new Uri("ms-appx://"), this.coverimagepath)); public string CoverImagePath get; internal set; public string Title get; internal set; #endregion properties //For this demo, we are providing book data from within this project, so we need to code the following. internal static class DataSource #region methods //Get the sample books for display in the XAML GUI public static void LoadSampleBookSkus(ref ObservableCollection<BookSku> bookskus) Title = "A Christmas Carol", CoverImagePath = "/Assets/CoverImages/christmascarol.png" Title = "East of Eden",

5 Page 5 of 6 Author = "John Steinbeck", CoverImagePath = "/Assets/CoverImages/eastofeden.png" Title = "Emma", CoverImagePath = "/Assets/CoverImages/emma.png" Title = "Gone With The Wind", Author = "Margaret Mitchell", CoverImagePath = "/Assets/CoverImages/gone.png" Title = "Little Dorrit", CoverImagePath = "/Assets/CoverImages/little.png" Title = "Mansfield Park", CoverImagePath = "/Assets/CoverImages/mansfieldpark.png" Title = "Sense and Sensibility", CoverImagePath = "/Assets/CoverImages/sense.png" Title = "Hobbit", CoverImagePath = "/Assets/CoverImages/hobbit.png" Title = "David Copperfield", CoverImagePath = "/Assets/CoverImages/david.png" Title = "Fellowship of the Ring", CoverImagePath = "/Assets/CoverImages/fellowship.png" Title = "Great Expectations", Author = "David Copperfield", CoverImagePath = "/Assets/CoverImages/greatex.png" Title = "Oliver twist", CoverImagePath = "/Assets/CoverImages/oliver.png" Title = "Persuasion",

6 Page 6 of 6 CoverImagePath = "/Assets/CoverImages/persuasion.png" Title = "Return of the King", CoverImagePath = "/Assets/CoverImages/return.png" Title = "The Secret Garden", Author = "Frances Hodgson Burnet", CoverImagePath = "/Assets/CoverImages/secret.png" Title = "The Two Towers", CoverImagePath = "/Assets/CoverImages/twotowers.png" public static void LoadBookSkusFromCloudService(ref ObservableCollection<BookSku> bookskus) //Normally, get the available books from an Internet site. But in this // simple app, we'll simulate real-world data access by loading sample data. DataSource.LoadSampleBookSkus(ref bookskus); #endregion methods

Note: This demo app created for this lab uses the Visual Studio 2015 RTM and Windows Tools SDK ver

Windows 10 UWP Hands on Lab Lab 2: Note: This demo app created for this lab uses the Visual Studio 2015 RTM and Windows Tools SDK ver 10240. 1. Select the Models folder and bring up the popup menu and