Phone_81_Development_for_Absolute_Beginners

Lesson 21: Exercise: I Love Cupcakes App

In this exercise, I want to build an entire app based on the lessons we have learned about the Hub App project template. I want to show you how easy it is to transform that default Hub App project template into something completely different. In this case we will create a media application that will display images and recipes of cupcakes as well as instructional videos of how to make cupcakes.

Start by creating a new Project. In the New Project dialog, (1) select the Hub App template, (2) rename to: ILoveCupcakes, (3) Click OK:

First, we’ll remove all of the assets in order to replace them with our own tiles, backgrounds, etc. In the Assets folder, select all files:

Windows Phone 8.1 Development for Absolute Beginners – Page 210

… then use the Delete keyboard key. When asked to confirm, select OK:

Lesson21.zip contains an Assets folder with all of the images for app tiles, hub images, background images, etc. In Windows Explorer, (1) select everything EXCEPT SampleData.json, and (2) right-click and select Copy from the context menu.

Windows Phone 8.1 Development for Absolute Beginners – Page 211

Right-click the Assets folder in the Solution Explorer and select Paste. Your file structure should look similar to this:

Next, (1) open the package.appxmanifest, and (2) in the Application tab, modify the Display name property to: I Love Cupcakes …

Windows Phone 8.1 Development for Absolute Beginners – Page 212

Next, (1) select the Visual Assets tab, (2) select the Square 71x71 Logo, (3) select the ellipsis button beneath the Scaled 240 asset …

… in the Select Image dialog, (1) select the ILoveCupcakes-170.png, and (2) click Open.

Windows Phone 8.1 Development for Absolute Beginners – Page 213

Repeat that technique to select the proper scaled image for (1) the Square 150x150 Logo, (2) the Wide 310x150 Logo, (3) the Square 44x44 Logo, (4) the Splash Screen, each time (5) selecting the appropriate image from the Assets folder.

Windows Phone 8.1 Development for Absolute Beginners – Page 214

(1) Select the Square 71x71 Logo page again, and this time (2) in the show name check boxes, place a check next to both check boxes.

If you open the HubPage.xaml, you’ll see that the background image is no longer visible. In fact, the background is transparent. This is because the style used for the background is no longer referencing an image in our project. We’ll fix that in a moment.

Windows Phone 8.1 Development for Absolute Beginners – Page 215

First, on the HubPage.xaml we’ll want to remove the Hub Sections we no longer need. I’ll comment out the definition for HubSection1 …

… as well as HubSection4 and HubSection5:

Windows Phone 8.1 Development for Absolute Beginners – Page 216

Next, I’ll locate the parent Hub control. Notice that the Background property for the control is bound to a ThemeResource called HubBackgroundImageBrush. I’ll place my mouse cursor inside of that identifier and select the F12 key on my keyboard:

… to view the definition for that ThemeResource. The ImageSource property of the ImageBrush is set to an image that no longer exists in our project:

Windows Phone 8.1 Development for Absolute Beginners – Page 217

I’ll update the reference to the new background image called: ilovecupcakes-background.png …

Now, when I return to the HubPage.xaml, I can see the pink background. Furthermore, I’ll modify the Header property of the HubSection1 to “RECIPES” and see it reflected in the preview pane:

Windows Phone 8.1 Development for Absolute Beginners – Page 218

Likewise, I’ll update HubSection3’s Header to “VIDEOS” and see that change in the preview pane as well:

At this point, we’ve make significant changes to the app (although we haven’t re-written much code per se). Most of the changes have been “configuration” changes up to now.

The app is styled as we would expect. However, we’re missing data. We’ll fix that soon.

Windows Phone 8.1 Development for Absolute Beginners – Page 219