Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Part 6: Styling the App

Download

Right click “Save as…”

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:

 

 

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:

 

 

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:

 

 

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:

 

 

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.

 

 

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

 

 

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

 

 

  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:

 

 

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

 

 

  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:

 

 

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

 

 

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:

 

 

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:

 

 

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

 

 

  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:

 

 

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:

  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:

 

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:

 

 

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

 

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

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:

 

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:

 

 

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:

 

 

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:

 

 

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


That produces the following:

 

 

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:

 

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

 

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

 

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

 

... and the result should not change:

 

 

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.

Tags:

Follow the Discussion

  • PeterNLPeterNL

    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!

  • 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?

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

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

  • Thank you very much, Bob!

  • @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

  • @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

  • @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?

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

     

  • ShenzhongweiShenzhongwei

    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.

  • Doctor WhoDoctor Who Picture is of Tom Baker, who played the Doctor, from 1974 to 1980.

    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?

  • Akhil MenonAkhil 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.

  • Akhil MenonAkhil 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

  • Akhil MenonAkhil Menon

    RingtonePlay is my app name

  • @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.

  • Clint RutkasClint I'm a "developer"

    @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 

  • Akhil MenonAkhil 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

  • Akhil MenonAkhil Menon

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

  • @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!

  • Akhil MenoAkhil Meno

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

  • Joe BenassiJoe 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)?

  • Clint RutkasClint I'm a "developer"

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

  • TrangTrang

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

  • JasonJason

    @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

  • 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!

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

  • @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!

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

  • 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

  • ArjunArjun

    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.

Remove this comment

Remove this thread

close

Comment on the Post

Already have a Channel 9 account? Please sign in