Part 6: Styling the App

Download this episode

Download Video

Download captions

Download Captions

Description

Source Code: http://aka.ms/absbeginnerdevwp8
PDF Version: http://aka.ms/absbeginnerdevwp8pdf

With the basics of XAML, layout and events in place, let's do something fun. We'll give some unique character to the app by styling it. Obviously we'll want to follow Microsoft's guidelines so that our app looks like it belongs as part of the Windows Phone 8 ecosystem, however we still have a lot of latitude on how we can personalize our app.

Here's the game plan for this lesson:

  1. We'll change the tile icons used on the Phone's Application List and Start Page.
  2. We'll access the user's Phone theme color selections and incorporate them into the colors in our app, and in so doing we'll learn some extremely important XAML syntax features called binding expressions.
  3. Finally, we'll talk about creating re-usable styles in our app.

1. Change out the app's tile icons

Our first task in this lesson is to change the tiles for our app that the user will see in the alphabetical list of apps as well as the Start page if they should want to pin our app to their Start page. To begin, we'll open the WMAppManifest.xml file in the Properties directory of our Project:

 

Generic Episode Image

 

When you double-click this file in the Solution Explorer it will be opened in a special designer window providing a number of options that affect how our application is introduced to the Windows Phone 8 operating system. For example, on the first tab, "Application UI" we can change the display name, the app icon and more:

 

Generic Episode Image

 

We want to change from the default icon to one more suited for our app. I've created such an icon and it's available in the C9Phone8\PetSounds_Assets folder. These assets for this series are available from wherever you originally downloaded this document, or watched the videos that accompany it.

Inside that folder is the ApplicationIcon.png:

 

Generic Episode Image

 

I'll drag and drop that file from Windows Explorer into the Assets folder of my Project. When I do that, I see a dialog notifying me that a file by that name already exists:

 

Generic Episode Image

 

We do want to replace the old file with our new image file.

Next, I want to replace two images in the Assets\Tiles subfolder. I'll ready the target in the Solution Explorer by expanding the Tiles subfolder.

 

Generic Episode Image

 

In Windows Explorer, I'll open the C9Phone8\PetSounds_Assets\Tiles subfolder:

 

Generic Episode Image

 

... I'll highlight the two image files and drag and drop them into the target Tiles folder in the Solution Explorer. I'll see the dialog again:

 

Generic Episode Image

 

  1. I want to apply my response to both files
  2. I'll respond by clicking "Yes"

Now, I've replaced the necessary tile files in my project. Back in the WMAppManifest.xml file, since I replaced the old image file with a new one, I may need to close this file and re-open it to see the new App Icon reflected there:

 

Generic Episode Image

 

Further down on that settings page, I want to make sure the following settings are chosen:

 

Generic Episode Image

 

  1. Tile Template set to TemplateIconic
  2. Support for large Tiles should be checked
  3. Small Tile Images should be set
  4. Medium Tile Images should be set

To test these settings, I'll run (F5) the app. Once it's running, on the Phone Emulator, click the Start button (the Windows icon), then swipe (click and hold down the mouse button while dragging the mouse cursor) from right-to-left to see the alphabetical list of apps and locate our PetSounds app:

 

Generic Episode Image

 

Great! Now, let's click and hold down until a context menu appears displaying the options to "pin to start" and "uninstall":

 

Generic Episode Image

 

Clicking "pin to start" will add the app to the Start page. Click the Start button on the Phone Emulator and scroll down to see the pinned tile:

 

Generic Episode Image

 

It's a small detail, but it already feels like a more legitimate app just with that small change.

 

2. Modifying the App and Page Titles

Next, we'll change the app's title text and page's title text. In the MainPage.xaml, locate the TitlePanel, the StackPanel added by default by the Page template:

 

Generic Episode Image

 

... and we'll make the following changes:

 

Generic Episode Image

 

  1. Change the text property representing the app's title to "PET SOUNDS". We're using all caps since that seems to be the convention used in Windows Phone apps.
  2. Change the text property representing the page's title to "animals". We're using all lower-cased letters since that seems to be the convention as well.


The result:

 

Generic Episode Image

 

Another small styling step, but again it makes the app feel more legitimate.

 

3. Understanding Binding Syntax and Static Resources

By default, the Style attribute of the second textbox is set to:

Style="{StaticResource PhoneTextTitle1Style}"

This will require a bit of explanation. First, whenever you see open and closed curly braces in XAML, it is referred to as "binding syntax". There are two types of binding syntaxes:

{StaticResource } - Let me start with the term "resource". A resource is an object that can be reused in different places in your application. Examples of resources include brushes and styles.

http://msdn.microsoft.com/en-us/library/ms750613.aspx

I created a simple Phone project called XAMLResources with the most simple {StaticResource} example I could think of:

Generic Episode Image

  1. I add a child element of <phone:PhoneApplicationPage> to hold Local (or rather, page-level) Resources. Any brushes or styles created here will only be available on this page, not other pages.
  2. I create a SolidColorBrush that I can reference with the key "MyBrush".
  3. I create a Style that I can reference with the key "MyButtonBackground". Notice that the TargetType is set to Button ... this style only applies to Button controls. Inside of this style, I can set individual attributes of the Button. I have one attribute set, the Background attribute, which I set to the SolidColorBrush "Blue".
  4. Here I bind my Button's Background attribute to the value bound to MyBrush.
  5. Here I bind the style of my Button to MyButtonBackground.

In this overly simplistic example, it may not be readily apparent the value of this approach. As you application grows large and you want to keep a consistent appearance between the controls on the page, you may find this quite handy. It keeps the XAML concise and compact. And, if you need to change the style or color for any reason, you can change it once and have the change propagate to everywhere it has been applied.


Here's the result:

Generic Episode Image

 

I created these Local Resources on the page, meaning they are scoped to just the MainPage.xaml. What if I wanted to share these Resources across the entire application? In that case, I would have defined them in the App.xaml's <Application.Resources> section as a System Resource:

 

Generic Episode Image

 

4. Discovering Theme Resources

So, back in the PetSounds project, you may be wondering where the PhoneTextTitle1Style is defined. Actually, is a "built-in style" as part of the Windows Phone Operating System's Theme Resources:


http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx

 

Generic Episode Image

If you scroll down that page, you can see the Text styles available to Windows Phone apps:

Generic Episode Image

These Themed Resources should be leveraged to keep your apps looking like they below on the Windows Phone. You should resist the urge to use custom colors, fonts and the like unless you have a good reason to (such as to match your company's established branding elements, etc.).


It's also worth noting that many of the styles are based on styles which are based on yet other styles. This visual inheritance allows developers to avoid repeating the attribute settings that will be common across variations of the styles, much like how Cascading Style Sheets work in web development.


I said earlier that there were two binding expressions in the Windows Phone, the second is {Binding } ... this is used for binding data (i.e., usually generic lists of custom types with their properties set to the data we want to work with in our app) to on page elements. We'll see this at work much later in this series.

5. Customizing a Theme Resource by creating a style based on it

Let's have a little fun. As I said earlier, you typically want to stick with the Phone's Theme Resources. However, we can edit a style if we would like to. I think this might provide an additional insight or two on how this all works.
Make sure your mouse cursor is in the TextBlock with the Text attribute set to "animals".

 

In the Properties window, navigate to the Miscellaneous section, and locate the Style property:

Generic Episode Image

 

Notice how there's a green border surrounding the text box, and the icon to the right is filled with the same green color. If you click that square or the text box you'll see a context menu:

 

Generic Episode Image

 

Here we could potentially change the binding. In fact, I'll click the option "Convert to Local Value". When I do that, notice that the Style property is gone. In its place is a complex property setting for <TextBlock.Style> with a <Style> definition therein:

 

Generic Episode Image

 

As you can see, when we converted from the Themed Style to a Local Style, we see part of the definition of that Theme Style ... it's based on the PhoneTextBlockBase Theme Style, and it overrides that style by setting two additional properties: FontFamily and FontSize. Both of these are defined as Theme Styles as well. Let's override those settings with our own:

 

Generic Episode Image

 

  1. Set FontFamily to "Verdana"
  2. Set FontSize to 64


That produces the following:

 

Generic Episode Image

 

Next, let's make this style available to our entire app by making it a System Resource. I'll highlight everything between the <TextBlock.Style> and </TextBlock.Style> tags and cut them:

 

Generic Episode Image

... then I'll open up the App.xaml file:

Generic Episode Image

 

... and paste them into the <Application.Resources> section (see lines 12 through 19, below). I also add an attribute:
x:Name="MyTitleText":

 

Generic Episode Image

Now, I can return to MainPage.xaml and re-write the TextBlock to use the new Application Resource:

 

Generic Episode Image

... and the result should not change:

 

Generic Episode Image

 

Success!

 

Recap

Just to recap, the big takeaway from this lesson is how we can style our app to make it look like it belongs on the Windows Phone while also expressing our own individuality. We learned how to modify the WMAppManifest.xml file to change the icons and the title of our app, we changed the app's title and page title, and learned how to bind to StaticResources like Themed Resources for the Windows Phone, and how to create both Local and System Resources based on Themed Resources, and much more.

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      PeterNL

      Thanks a lot Bob and the others in this series-team! So far this series presents for me the right level of informative insight. Nice pace as well. Bob you are doing great. Keep on trucking. Looking forward to the other episodes into the coming days/weeks. Windows Phone 8 development is cool!

    • User profile image
      Niner77839

      One small thing that I would like to be explained. In App.xaml we use attribute name of the style definition. On the page we used key attribute. Why is that? How does it work internally? What about performance?

    • User profile image
      Arad

      Thanks a lot for this great series. Are there any differences between using x:Name and x:Key for defined resources in App.xaml ?

    • User profile image
      RandomAlec

      Hey Bob (and anyone else reading), I've run into my first "programming" issue so far following this specific tutorial. I've continued on with a few more lessons, but it is really bothering me now that that Live Tile for the app is not changing icon-wise.

      What I mean is the application icon shows up fine in the app list both on my device and emulator (duck picture). But, when I pin the tile to the Start Screen it shows up as a big asterisk as if I never set the images.

      Please help!

      Edit: Fixed the issue by simply deleting the images from the Solution Explorer and reloading them into Visual Studio.

    • User profile image
      Progr

      Thank you very much, Bob!

    • User profile image
      BobTabor

      @PeterNL: Awesome.  Smiley

      @Niner77839: Yeah, I know I forgot to explain it thoroughly.  Let me point you to this same question on StackOverflow so you can get a complete picture:

       http://stackoverflow.com/questions/589874/in-wpf-what-are-the-differences-between-the-xname-and-name-attributes

      In a nut shell, there's no practical difference.  The differences are in how things are implemented behind the scenes in XAML with namespaces that both define the same attributes.

      @RandomAlec: Great that you figured it out ... I had no idea what I was going to suggest.

      @Progr: No, thank you for watching.  Smiley

    • User profile image
      isyedakhtar

      @Bob

       

      Is there a way to define styles in app which are automatically applied depending on the x:Name property like we do #ID in css for web. Like I create one style for RootLayout and It is applied aytomatically to a control whose x:Name="RootLayout"

       

      Thanks

    • User profile image
      BobTabor

      @isyedakhtar: I honestly don't know what a "best practice" would be in regards to selecting & styling, but take a look at how we do it in this video:

      http://channel9.msdn.com/Series/Windows-Store-apps-for-Absolute-Beginners-with-C-/Part-14-Modifying-DataTemplates

      Yes, I realize this is for Windows 8 Store Apps, but the concepts are the same (at least, I'm pretty sure they are).  Does that help?

    • User profile image
      isyedakhtar

      Thanks Bob, I think I have to go with creating styles and applying them explicitly as you taught in the above video.

       

    • User profile image
      Shenzhongwei

      Great tutorial! Thank you for your great work! One small thing I'd like to point out that the image below the text
      "Great! Now, let's click and hold down until a context menu appears displaying the options to "pin to start" and "uninstall":"
      might be incorrect.

    • User profile image
      Doctor Who

      Excellent tutorial! This helps with the basic concept of getting your tiles onto the start screen, something I've wondered how that is to be done for a while, now I know.

      One thing, which I don't understand, is that in Visual Studio I have a green squiggly line under things like PhoneTextNormalStyle, PhoneFontSizeNormal, etc. If I mouse over those squiggly lines I get a popup that says:

      "XAML 'PhoneFontSizeNormal' is not found"

      Why is that? It is my understanding, based upon this tutorial, that those are all styles found online, and I would conclude resolved in that way. So, why am I getting that warning message?

    • User profile image
      Akhil Menon

      @Bob

      I must say you explain the concepts very clearly and I am enjoying the development of windows phone 8.

      I am having a problem here that when I see the App listing in emulator,I see my application having image that I set but when I pin it to start I don't get that image in tiles....pls help

      I am getting a small square with white color instead of app tile image.

    • User profile image
      Akhil Menon

      Hey Bob,
      See this is the screenshot I am providing....Why I am not getting the App icon in the start menu....

      Screenshot attachment link in skydrive

      https://skydrive.live.com/redir?resid=3CFE66C624796BBE!199&authkey=!AJlD6cpe7LrGGeY

    • User profile image
      Akhil Menon

      RingtonePlay is my app name

    • User profile image
      BobTabor

      @Akhil Menon: Are you using the image I provided in the source code that accompanies this series?  Or are you using your own image?  I suspect the latter.  And therefore I suspect you don't have a transparent background image.  Please let me know and I can advise next steps.

    • User profile image
      Clint

      @Akhil Menon: I agree with @BobTabor here.  if you still having issues, upload your images to https://absolutebeginner.codeplex.com/WorkItem/Create.  I may need see the app as well but right now give me your tiles only 

    • User profile image
      Akhil Menon

      Oh Bob I am using my own created image in png format.So how to make our own app image i.e transparent background?
      Please provide me the link of your app image so that I can use it

    • User profile image
      Akhil Menon

      I got the assets folder of your folder.How to make my own app image?

    • User profile image
      BobTabor

      @Akhil Menon: Try this: 

      http://clippingmagic.com/

      Personally, I use Adobe Fireworks, but I know any image / photo editor would be able to handle it ... perhaps even Paint.net or Gimp.  Good luck!

    • User profile image
      Akhil Meno

      Thank you very much......It worked

    • User profile image
      Joe Benassi

      I have a question Bob: How do I go about creating the icons for my app? Is there a particular tool I should use (I'm not a graphic designer)?

    • User profile image
      Clint

      @Joe Benassi: there are a bunch of sites that you can get icons for free or pay for them.  http://modernuiicons.com/ is one of many sites.  Please be sure you follow their licensing terms and guidelines.

    • User profile image
      Trang

      probably a great series of tutorials you did. I'm really appreciate it!!! Keep going on :)

    • User profile image
      Jason

      @Akhil Menon: If you do a lot of background-removing, Background Burner might save you some work because it can usually auto-detect the foreground object without your input.

      http://api.bonanza.com/background_burner

      Jason

    • User profile image
      MrCharles​Reid

      Hi Bob, really enjoying the series so far.  One comment on the transcript for this part of the series - it looks like the inline image for pinning the app to the start screen has been swapped with the image for converting the textblock style to a local style.  Sorry to nitpick.  Moving on to part 7.  Thanks!

    • User profile image
      BobTabor

      @MrCharlesReid: Thanks for the heads up ... creating the HTML for this was harder than recording the videos!

    • User profile image
      MrCharles​Reid

      @BobTabor: I'd wondered if there was some magic involved in creating the transcripts.  Anyway I really appreciate them.  They enable me to make progress even when I don't have the luxury of watching the videos (which are also great).  Thanks again!

    • User profile image
      odiltonjr

      Hello Bob Tabor, I already congratulate the initiative and say that the content is great and the way it is taught and fascinating, congratulations for explanations, I wanted to ask as I can from a text box that the user types the name get a corresponding list related to the User entered data? Thank you for your attention.

    • User profile image
      mfouad91

      Hello guys I have been following the video instructions but the app icon does not appear in the menu taking in consideration that I used the app icon used in the assets provided and it appears in visual studio and in the tiles but it does not appear in the menu here is a screen shot.

       

      https://onedrive.live.com/redir?resid=3D11F7FD99432C8C!1388&authkey=!AHs3u0bShyoT5MM&v=3&ithint=photo%2c.png

    • User profile image
      Arjun

      Can I dynamically change the style of a control ? Do we have a StyleSelector in Windows phone 8?

      Problem : I have a list of categories and based on the category name I need to load different styles.

    • User profile image
      Fahad​Shafique​Mirza

      Nice Idea to have small video of yours at the bottom in tutorials  

    • User profile image
      Gabriel Guimaraes Aguiar Teixeira

      My name is Gabriel'm Brazilian, I would like to thank the classes, I'm really enjoying it.
      I'm using Visual Studio 2013 SDK 8.0. I wonder if it is to launch an application created in this software version for WP 7 on ...
      I did not find this option in the settings of Visual Studio ..
      I would have to do 2 on 2 different apps sdk's?

    • User profile image
      BobTabor

      @Gabriel Guimaraes Aguiar Teixeira: I don't think you can do what you're trying to do.  I could be wrong, but I've never tried it before and I doubt it can be done.  Sorry!

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.