Download the source code for this lesson at http://absolutebeginner.codeplex.com/

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:



… 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.



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 …



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.



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.



(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.



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:



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:



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:



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.

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:

<a href="https://files.channel9.msdn.com/wlwimages/19940ab4423a448c83e6a3180155d1c1/