HTML and CSS Reference
In-Depth Information
my next appointment is or what my most urgent action requires. You can reduce the friction
and frustration that your users experience when using your app and create a more pleasing and
immediate experience by displaying the information that the user needs in your app tile.
Both goals require careful thought. The overall Metro experience is flat, simple, and sub-
dued. If you are using your tile as an ad, then the muted nature of Metro makes it easy to create
tiles that stand out. If you go too far, though, you will create something that is discordant and
jarring and is more of an eyesore than an attraction.
If your goal is to reduce the number of times the user needs to run your app, then you
need to present the right information at the right time. This requires a good understanding of
what drives your users to adopt your app and the ability to customize the data that is presented.
Adaptability is essential; there is no point showing me the most urgent work action on my task
list on a Saturday morning, for example. Every time you present the user with the wrong infor-
mation, you force them to run your app to get what they do need.
■
An app can update its tile only when it is running. In
Chapter 5
, I detail the Metro app
life cycle, and you will learn that Metro apps are put into a suspended state when the user
switches to another app. This means that you can't provide updates in the background. Windows
8 supports a push model where you can send XML updates from the cloud, but this service isn't
available for the Consumer Preview.
Tip
Improving Static Tiles
The simplest way to improve the appearance of your application in the Start menu is to change
the images used for your app's tile. You should customize the images for your app, even if you
don't use any other tile features.
To do this, you will need a set of three images of specific sizes: 30x30 pixels, 150x150 pixels,
and 310x150 pixels. These images should contain the logo or text you want to display but be other-
wise transparent. I used a barcode motif for my example app, creating images called
tile30.png
,
tile150.png
, and
tile310.png
and placing them in the
images
folder of my Visual Studio project.
To apply the new images, open the
package.appxmanifest
file from the Solution Explorer.
There is a Tile section on Application UI tab that has options to set the logo, wide logo, and small
logo. There are hints to explain which size is required for each option. You will also have to set
the background color that will be used for the tile; I set mine to the same color I use for the
body
element of my app.
■
It is important to set the background color in the manifest, rather than include a back-
ground in the images. When you update a tile, which I demonstrate in the next section, the image
is replaced with dynamic information, on a backdrop of the color specified in the manifest.
Tip
You may have to uninstall your Metro app from the start screen for the tile images to take
effect. The next time you start your app from Visual Studio, you should see the new static tile.
You can toggle between the standard and wide views by selecting the tile and picking the Larger
or Smaller buttons from the AppBar. You can see the square and wide tile formats for the exam-
ple application in Figure
4-2
.
Search WWH ::
Custom Search