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'l change the tile icons used on the Phone's Application List and Start Page.
2. We'l access the user's Phone theme color selections and incorporate them into the
colors in our app, and in so doing we'l learn some extremely important XAML syntax
features called binding expressions.
3. Final y, we'l 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'l 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.
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 wil 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:
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 PhoneText BlockBase
Theme
Style, and it overrides that style by setting two additional properties:
Font Family
and
Font Size. 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.
No comments:
Post a Comment