Phone_81_Development_for_Absolute_Beginners

If you select the Windows button and navigate to the Apps page, you can see the app’s icon and title appears as we would expect:

Furthermore, if we pin the app to the Start page and modify the tile sizes, we can see the the titles appear …

... And the large branded tile appears as well:

Windows Phone 8.1 Development for Absolute Beginners – Page 220

Now it’s time to make more significant changes to the app, specifically the data model. In the SampleDataSource.cs, we’ll modify the SampleDataItem class adding a property called Type. We’ll use the Type property to determine whether to navigate to a page that can display recipes and images or a page that can display video.

I’ll use the prop [tab] [tab] code snippet to create the new Type property of type string:

Windows Phone 8.1 Development for Absolute Beginners – Page 221

I’ll also change the constructor to allow the new type property to be passed in at construction, and will set the property in the same manner as the other properties are set:

The other change comes when we’re loading the JSON into memory. Therefore, we have to update the creation of new SampleDataItems in the GetSampleDataAsync() to include the new input parameter to the constructor:

Windows Phone 8.1 Development for Absolute Beginners – Page 222

(1) Open the the SampleData.json file. (2) Currently doesn’t have a “Type” property. Furthermore, there’s a lot of data to input including Group and Item titles, subtitles, image paths, etc. To keep this lesson short and reduce the possibility of fat-fingering the data in the file (causing runtime errors), I decided to create an alternative SampleData.json that we’ll copy into our project. Before we delete this file, take note that (3) the Build Action property of the file is set to “Content”. When I replace this file, I’ll need to make sure to set that property correctly to ensure the compilation process treats our new SampleData.json correctly.

Windows Phone 8.1 Development for Absolute Beginners – Page 223

First, I’ll delete the current SampleData.json. In Windows Explorer, in Lesson21.zip’s Assets folder, drag and drop the new SampleData.json into the DataModel folder of the project in the Solution Explorer.

(1) Select the new SampleData.json file in the Solution Explorer, then (2) in the Build Action, change the value from None (the default) to (3) Content.

If you open the new SampleData.json, you can see the shape of the data has changed to reflect our new Type property and the data also is specific to our app.

Windows Phone 8.1 Development for Absolute Beginners – Page 224

If we re-run the app, we should now see images and cupcake-specific titles for the tiles in the Hub control.

The next step is to set up the navigation from these tiles in the Hub control to pages that can display the pictures and recipe data or the “How To” videos for making cupcakes. For the former requirement, I’ll simply re-use the ItemPage.xaml. For the latter, I’ll add a new video.xaml page.

Right-click the project name in the Solution Explorer, select Add > New Item … from the context menu. In the Add New Item dialog, (1) select Basic Page, (2) change the name to Video.xaml,

(3) click the Add button:

Windows Phone 8.1 Development for Absolute Beginners – Page 225

In the new Video.xaml page, I’ll add a MediaElement control telling it to stretch to the dimensions of the parent grid, and setting the AutoPlay property to true, play as soon as the media source is determined:

Windows Phone 8.1 Development for Absolute Beginners – Page 226

In the Video.xaml.cs, we need to determine which video to load into the MediaElement. To do this, we’ll need to accept a parameter from the HubPage.xaml. We’ll use the UniqueID of the

SampleDataItem to determine which video should be displayed. The UniqueID should be the same as the name of the video, sans the file extension “.mp4”. Therefore, when a user taps a thumbnail image on HubSection3, we’ll determine the UniqueID associated with that item, and pass that UniqueID as a navigation parameter to the Video.xaml page. In the

NavigationHelper_LoadState() method, we’ll retrieve the SampleDataItem associated with the UniqueID (via the LoadStateEventArgs.NavigationParameter), we’ll construct a URI to the video file in the Assets folder by appending the file extension “.mp4” to the UniqueID. Finally, we’ll set the MediaElement’s Source property to the newly constructed URI.

There are a few problems with this code that need to be resolved. First, we need to add a using statement for the ILoveCupcakes.Data namespace. Second, we’ll need to add the async keyword to the method signature to accommodate the await keyword when calling SampleDataSource.GetItemAsync.

Also, if we want to set the title of the page, we’ll need to give the TextBlock that contains the page title a name.

Windows Phone 8.1 Development for Absolute Beginners – Page 227

Therefore, back in Video.xaml, I’ll modify the page title in the “TitlePanel” by giving it a programmatic name “PageTitle” so that our C# code that sets it will work:

That concludes the changes required to the Video.xaml.

Next, we’ll need to modify the ItemPage.xaml which will display the app’s title, and we’ll add a StackPanel in the Grid named “ContentRoot” to display an Image and a TextBlock. After adding the XAML (below) you can see the changes to the ItemPage.xaml’s preview:

Windows Phone 8.1 Development for Absolute Beginners – Page 228

Since the ItemPage.xaml was already “wired up” by the project template, no further changes will be necessary.

The last significant change will be in the logic that determines whether to send the user to the ItemPage.xaml or the Video.xaml page based on the type of the item in the Hub’s ItemView controls that the user clicked on. Note that both ItemView controls (defined in HubSection2 and HubSection3) use the same event handler method, ItemView_ItemClick. Therefore, we’ll retrieve the ItemClickEventArgs.ClickedItem input parameter which lets us know which item was clicked and cast it to SampleDataItem. Once we have the item, we can determine both the Type and UniqueID properties for the selected item.

If the Type is “Recipe”, then we’ll send the user to the ItemPage. If the Type is “Video”, we’ll send them to the Video.xaml page. In both cases, we’ll send the UniqueID so that the proper

SampleDataItem is displayed to the user.

Windows Phone 8.1 Development for Absolute Beginners – Page 229