In the second part of this tutorial we’re going to make some simple changes to the layout of the Universal Hub App. We’re going to change the title of the app and we’re adding some images.

First I’m going to change the Windows 8.1 version off the Universal App project. I added some elements to the XAML so we can now easily display an image at the left of the app. I added a gray overlay so once we put text on the image it will be easy to read. Later on in this series we will let the image dynamically change.

I changed the XAML inside the first HubSection element to this:

I also changed the title of the app that you can see at the top of the page. To change this title go to Shared > Strings > en-US in your Solution Explorer and open Resources.resw. Here you have to change two items for now. Change the value of ‘Header.Text’ and ‘Hub.Header’ to ‘The Developer Source’, like in the following image.

3Now we’ll get something like this when we run the application.


Now it’s time to change the Windows Phone version. The only thing we have to do here is add an image to the ‘LayoutRoot’ grid and change the background of the Hub.

Then we’ll get something like the next image.


That’s about it for now. In the next post we’re going to add some code to the party. We’ll build the backend that will power this app and provide the app with articles and images.
Download the source code here.