IntroductionWelcome| 00:00 |
(music playing)
| | 00:04 |
Hello there, I'm Doug Winnie and welcome
| | 00:06 |
to Building Windows Phone 8 Live Tiles.
In this course we will go over the basics
| | 00:10 |
of working with the three various types
of tiles in the Windows Phone 8 mobile
| | 00:13 |
operating system.
Live tiles allow you to build
| | 00:17 |
applications that I show important
information to the user without forcing
| | 00:20 |
them to open up the app.
Users can select from a various number of
| | 00:23 |
sizes that you can customize your icon to
show photos, updates, notifications and
| | 00:28 |
other information directly on the start
or home screen.
| | 00:31 |
This course will cover the three basic
types of live tiles, the flip, cycle, and
| | 00:36 |
iconic tiles.
In addition, we will cover how to create
| | 00:39 |
secondary tiles that you can pin to
access specific sections of your application.
| | 00:43 |
So with that, let's get started Building
Windows Phone 8 Live Tiles.
| | 00:48 |
| | Collapse this transcript |
| What you should know before watching this course| 00:00 |
This course works with the Windows Phone
8 SDK, and uses C# and XAML as the
| | 00:05 |
development languages for the course.
I assume that you are familiar with the
| | 00:08 |
Windows Phone 8 SDK, Visual Studio 2012
for Windows Phone, and the C# and XAML languages.
| | 00:15 |
If you need a refresher, take a look at
my course Up and Running with Windows
| | 00:18 |
Phone 8 Development, or for other courses
on Windows Phone in the lynda.com online
| | 00:22 |
training library.
For this course, we'll be working with
| | 00:25 |
the Visual Studio 2012 for Windows Phone
IDE.
| | 00:29 |
If you currently don't have the ID
installed, download an install from dev.windowsphone.com.
| | 00:34 |
The Up and Running With Window's Phone 8
Development Course has a section that
| | 00:37 |
covers how to install the software on
your system.
| | 00:39 |
Also, while having a physical device is
helpful to test and view your work, it
| | 00:43 |
isn't required.
I'll be using the Windows Phone emulator
| | 00:46 |
that is part of Visual Studio, to show
how the various tiles work.
| | 00:50 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
If you have access to exercise files,
you'll find them available on the course
| | 00:04 |
landing page.
The exercise files are organized into
| | 00:06 |
folders based on the chapters of this
course.
| | 00:09 |
Inside each one, there are two versions
of the files.
| | 00:12 |
There is a start version that is an empty
starter project that you can use to code
| | 00:16 |
alongside me in the videos.
There's also an end version that has all
| | 00:19 |
the code completed that you can use for
your own projects.
| | 00:22 |
Make sure you've downloaded and expanded
the archive file.
| | 00:25 |
Inside, the Visual Studio solution files
will allow you to launch these inside of
| | 00:30 |
Visual Studio.
| | 00:31 |
| | Collapse this transcript |
|
|
1. Tile TypesWhat is the flip tile?| 00:00 |
The flip tile is the first tile we're
going to look at.
| | 00:02 |
The flip tile can be shown in three
sizes.
| | 00:04 |
Let's start with the small size first.
The tile displays a background image, and
| | 00:09 |
then also a notification count located as
numbers within a circle in the upper
| | 00:13 |
right hand corner of the tile.
In the medium or default size, there are
| | 00:20 |
actually two versions of the icon that
flip back and forth between the two.
| | 00:24 |
There's the front title, in this case,
weather.
| | 00:26 |
And then two background images, one for
the front side, and then one for the back.
| | 00:31 |
The notification count also is displayed
in the upper right hand corner as a black
| | 00:35 |
circle with white numbers.
And then there's also a special back
| | 00:39 |
title which is used, in this case, as San
Francisco, California.
| | 00:43 |
Finally there's also back context text,
which you can customize using this property.
| | 00:48 |
The one displayed here says Sunny, and
72.
| | 00:52 |
The last size is the wide.
In this case, it uses the same exact
| | 00:56 |
parameters as the previous medium size,
but has a few more options that we can
| | 01:00 |
work with.
There's a front title, in this case
| | 01:02 |
weather, and then also two background
images.
| | 01:05 |
But in this case they're going to be a
little bit wider since they're using a
| | 01:08 |
wider layout.
Notification counts are still displayed,
| | 01:11 |
and there's also still the back title.
The back context text in this case is a
| | 01:16 |
little bit longer, and we can display
additional content since the tile is much wider.
| | 01:20 |
| | Collapse this transcript |
| What is the iconic tile?| 00:00 |
The Iconic Tile displays an icon on the
front of the Tile, on top of the phone's
| | 00:04 |
selected accent color.
This Tile can be displayed at one of
| | 00:07 |
three sizes.
When it is in a small format, it will
| | 00:11 |
display a small icon.
It will display as a number to the right
| | 00:14 |
of the icon.
Pushing the icon over to the left automatically.
| | 00:19 |
If the Tile is expanded to the medium or
default size, the title of the icon will
| | 00:23 |
appear at the bottom, and a larger
version of the icon will display with a
| | 00:27 |
notification count displayed on the
right.
| | 00:31 |
When expanded to the wide format, the
Tile changes considerably.
| | 00:35 |
The small icon is now used in the lower
right-hand corner, and the notification
| | 00:39 |
count is now located next to that.
The title is still displayed in the lower
| | 00:43 |
left-hand corner, but now there are three
lines of text that are available at two
| | 00:47 |
different sizes to display at the top.
One unique thing about the Iconic Tile is
| | 00:52 |
that it only has one side.
There is no back side to the Iconic Tile.
| | 00:56 |
| | Collapse this transcript |
| What is the cycle tile?| 00:00 |
The cycle tile displays a rotation of
images, up to nine, that will animate as
| | 00:04 |
a pan and cycle between each image.
When in it's small size, a static image
| | 00:10 |
is used instead, but will still display
the notification counts in the upper
| | 00:13 |
right-hand corner.
In the medium size, the background images
| | 00:18 |
will rotate, using a vertical pan, and
then flip between each of the various
| | 00:22 |
images inside of your tile.
The notification counselor's still
| | 00:26 |
displayed in the upper right-hand corner
and then the title's displayed in the
| | 00:29 |
lower left.
Finally, in the wide format, the same
| | 00:33 |
parameters are used.
But in this case, you have the wider
| | 00:35 |
aspect of the tile.
The wider rotating background images are
| | 00:39 |
then displayed in the same vertical pan
as the medium tile and then we also have
| | 00:43 |
our notification counts and our title.
| | 00:45 |
| | Collapse this transcript |
|
|
2. Creating Flip TilesThe flip tile template| 00:00 |
The flip tile has a number of elements
that you can customize for your specific application.
| | 00:04 |
This video will give an overview of them,
and define the terms and properties that
| | 00:08 |
you can modify for your own flip tiles.
Let's start with a small version of the tile.
| | 00:12 |
The small tile has a background image
called Small Background Image.
| | 00:17 |
It requires an image reference you'll
define using a URI in your code.
| | 00:21 |
In addition, you can display a number to
indicate number of notifications or other
| | 00:25 |
numeric data.
This is provided using a count parameter.
| | 00:27 |
The design of these are not customizable,
but will display as white text on a black
| | 00:32 |
background in the upper right-hand corner
of the tile.
| | 00:35 |
The medium icon size adds a number of new
parameters to your flip tile.
| | 00:39 |
First, you can display an image in the
tile, using a URI set to the property
| | 00:43 |
background image.
In the lower left corner, you can also
| | 00:46 |
display the title of your title, by
assigning a string to the property, Title.
| | 00:51 |
Just like the small version, a
notification count can be displayed in
| | 00:54 |
the upper right corner.
This uses the same count property as the
| | 00:58 |
small tile.
In fact, it is shared across all three formats.
| | 01:02 |
The medium tile also adds a backside to
the tile.
| | 01:06 |
This backside will usually flip to
display the additional content when
| | 01:09 |
pinned to the start screen.
The backside of the tile has its own
| | 01:12 |
background image called back background
image, an alternate title called back
| | 01:16 |
title is displayed in the lower left hand
corner.
| | 01:18 |
And at the top you can display a string
of text using the property BackContent,
| | 01:23 |
that will appear when the tile is flipped
to show the back side of the tile.
| | 01:28 |
Finally, we have the wide format of the
tile.
| | 01:30 |
This shares the same types of properties
as the medium tile, but duplicates them
| | 01:34 |
for the unique size of the wide tile.
The front of the tile is customized with
| | 01:38 |
an image using wide background image
property.
| | 01:40 |
And the back properties are unique as
well.
| | 01:43 |
The text is contained within wide back
content and the background as wide back
| | 01:48 |
background image.
Using this template and properties, you
| | 01:51 |
can customize the tile that is pinned to
the start screen to cover any one of
| | 01:54 |
these three visual formats for the live
tile.
| | 01:57 |
| | Collapse this transcript |
| Building design assets for flip tiles| 00:00 |
For flip tiles there are three basic
parameters you'll need to consider for
| | 00:03 |
your design assets.
These are the dimensions of the three
| | 00:07 |
variations of the tiles at three sizes.
Small, medium and wide.
| | 00:12 |
The small tile only has one side, so
you'll need to only create a single
| | 00:15 |
graphic for that tile.
The size of the tile is 159 pixels by 159 pixels.
| | 00:21 |
When you create the tile, you can create
a transparent graphic to take advantage
| | 00:25 |
of the phone accent color or you can
create a full size icon of your own design.
| | 00:29 |
For the medium sized, you have two
graphics that are the same size, the
| | 00:32 |
front and the back.
The size of these icons is 336 by 336 pixels.
| | 00:37 |
Just like the small tile you can create
these using transparent colors.
| | 00:41 |
Some tiles also have a solid colored
background that is achieved by just
| | 00:44 |
creating a simple background graphic that
is just of one color.
| | 00:48 |
And then the text and title are placed on
top of this.
| | 00:50 |
For the wide format, the image size
increases to 691 by 336 pixels.
| | 00:56 |
Again, these can be transparent or opaque
based on your desired project.
| | 01:00 |
| | Collapse this transcript |
| Creating a basic flip tile| 00:00 |
Creating a flip tile in C# code will
involve a few steps.
| | 00:04 |
We need to identify the tile we want to
update.
| | 00:06 |
Define the data set for the tile.
And then, apply it to the tile.
| | 00:09 |
If you have access to the lesson files
for this course, open the files for this chapter.
| | 00:14 |
We'll begin with the start version.
This project has a simple XAML file that
| | 00:18 |
is some descriptive text and a button
that will trigger a method in our C# code.
| | 00:22 |
When you tap the button, you will change
the tile design with parameters we will
| | 00:26 |
set up on our project.
The XAML and basic C# code behind the
| | 00:29 |
files are already set up for us, we just
need to add in the specifics to customize
| | 00:34 |
the FlipTile design.
The project also has assets we'll use for
| | 00:38 |
our icon design within the
assets/fliptileassets folder.
| | 00:42 |
To do this let's go to the main
page.xaml.cs file and open it up.
| | 00:47 |
Within this, we have a method called
update tile click which is triggered upon
| | 00:51 |
tapping the button in XAML layout.
By default, the tile type that is used
| | 00:56 |
for Windows phone eight projects are
FlipTiles.
| | 00:59 |
If we open the WMAppManifest, we can see
this under the tile template drop down.
| | 01:05 |
If we were working with other tile types,
we would need to change this before we
| | 01:08 |
can continue, but since the tile type is
already correct, we can leave this alone.
| | 01:13 |
We do need to make sure that the support
for large tiles checkbox is selected, if
| | 01:17 |
our app is going to support the wide tile
format.
| | 01:19 |
If we scroll down, we can also add the
tile assets to our app manifest file
| | 01:23 |
here, to get the initial design correct.
You'll notice that we can't define the
| | 01:27 |
backside of the tile in this screen.
We'll have to do that with code.
| | 01:31 |
In order to change the tile with code, we
need to define the tile that we want to update.
| | 01:35 |
To do this, we'll need to go back to our
XAML CS file and we're going to be
| | 01:39 |
working with the Shell Tile class.
In C#, we'll need to create a new shell
| | 01:44 |
tile object.
So, let's go into our UpdateTile_Click method.
| | 01:49 |
Inside of this, we're going to create a
new ShellTile, and we'll call it PinnedTile.
| | 01:56 |
We're going to set that equal to a
ShellTile, Active Tiles > First.
| | 02:03 |
The ShellTile class's active tiles
property keeps track of all the tiles in
| | 02:09 |
our application.
The first method is a way for us to
| | 02:12 |
access the default tile for our
application.
| | 02:16 |
When we run this, the pin tile object
will now have a reference to the default
| | 02:19 |
pin tile for our application.
Even if this tile isn't pinned to the
| | 02:24 |
start screen.
If it is pinned later, it will dot the
| | 02:27 |
settings we have to find here in our
application.
| | 02:29 |
We now need to define the data that we
are going to send to the tile to update
| | 02:32 |
the designing content.
The flip tile data class will give us the
| | 02:36 |
framework we need to pass this to the
specified tile to update the assets in content.
| | 02:41 |
To do this, we need to create a flip tile
data object, which we can name updated
| | 02:46 |
tile data.
And set this as the new FlipTile data.
| | 02:50 |
I'm then going to list the properties of
our tile using the updated tile data object.
| | 02:54 |
So, let's go ahead and get started with
some of the basics.
| | 02:58 |
I first need to create the updated tile
data object.
| | 03:00 |
This is going to be a FlipTileData object
type, which we'll set to UpdatedTileData.
| | 03:11 |
And we're going to set this to be equal
to a new FlipTileData.
| | 03:15 |
I'm going to create a curly brace in the
next line.
| | 03:18 |
And then, we'll start adding the
properties that we want to set into our
| | 03:22 |
UpdatedTileData object.
Let's first work with the front side content.
| | 03:27 |
Let's create the Title.
I'm going to access the title parameter,
| | 03:31 |
and we're going to set this to a string,
we'll call weather.
| | 03:34 |
We're going to add a comma to the end of
it since we're adding multiple properties
| | 03:38 |
into this updated tile data object.
Next, let's put in a notification count
| | 03:45 |
that's using the count property.
And we'll set this to 72.
| | 03:49 |
Now, we also need to work with the
background images in our project, we're
| | 03:53 |
going to be using a Uri that's going to
have a UriKind of relative, since we're
| | 03:58 |
going to be working with assets that are
inside of our project.
| | 04:01 |
Let's first work with a small background
image.
| | 04:03 |
We're going to set this equal to a new
Uri and we're going to provide a string
| | 04:08 |
that's going to point to the asset inside
of our project.
| | 04:11 |
In this case, it's
/Assets/FlipTileAssets/front_background_small.png,
| | 04:23 |
next we will set the UriKind as relative.
We're going to repeat the same process
| | 04:35 |
for the other background images in our
project.
| | 04:37 |
Next, we'll work with background image.
Set this to a new Uri which will be
| | 04:46 |
/AssetsFlipTileAssets/front_background_medium.png,
and our uri count again is relative.
| | 05:01 |
Our last one is going to be
WideBackgroundImage.
| | 05:07 |
We'll set this to a new Uri.
Which is /Assets/FlipTileAssets/front_background_wide.png.
| | 05:24 |
Again, our UriKind is Relative.
So, we've now defined the front side of
| | 05:32 |
our tile.
We now need to provide the graphics for
| | 05:35 |
the back side.
We'll access the BackBackgroundImage.
| | 05:40 |
We'll set this to a new Uri.
Which is
| | 05:43 |
/Assets/FlipTileAssets/back_background_medium.png
with a UriKind of Relative.
| | 06:01 |
If I only have one last line which is the
background image for the backside of the
| | 06:04 |
tile, that's the wide format.
We'll access WideBackBackgroundImage
| | 06:11 |
which equals a new Uri which we'll set to
/Assets/FlipTileAssets/back_background_wide.png.
| | 06:28 |
And I'll finish off with a Uri kind of
Relative.
| | 06:34 |
So, we've now provided the front side of
the content with our title and count.
| | 06:39 |
We've provided the front side of our
background images, and also the back side
| | 06:43 |
of the tile with our back background
images.
| | 06:45 |
We now need to provide the backside
content for our tile.
| | 06:49 |
Let's go ahead and set the BackTitle.
We're going to set this to a string of
| | 06:55 |
San Francisco, California.
The back content is the line of text that
| | 07:02 |
appears at the top.
We'll set that to Sunny and 72.
| | 07:10 |
Finally, there's a WideBackContent, which
allows us to display a longer piece of
| | 07:14 |
text since we do have the wide format.
We'll call this, Tuesday May 23rd.
| | 07:22 |
We're going to use an escape character \n
to create a new line.
| | 07:26 |
And we'll say Sunny, 72 degrees.
Now, this is the last parameter we're
| | 07:33 |
going to add here, so we're not going to
going to put a comma at the end.
| | 07:35 |
We are going to close our curly brace,
and then add a semi colon.
| | 07:40 |
With the data set defined, we now need to
update the tile itself.
| | 07:44 |
We do that by accessing the selected
tile, and use the update method, passing
| | 07:49 |
in the FlipTileData type to the tile.
We're going to access the pinned tile.
| | 07:54 |
We're going to use the update method.
And we're going to pass in our UpdatedTileData.
| | 08:02 |
So, let's go ahead and run this in the
emulator and see it in action.
| | 08:11 |
When the application first runs, the tile
is not already pinned to the start screen.
| | 08:15 |
So, let's go back to the application list
and pin it first.
| | 08:20 |
We'll go to our application list, and
I'll click and hold on FlipTile to pin
| | 08:25 |
this to start.
You'll notice that the tile doesn't have
| | 08:29 |
a flip to show the backside.
That is because it hasn't been updated
| | 08:33 |
with a back side content yet.
I'll go ahead and run the application,
| | 08:37 |
and we'll go ahead and click on update
tile to send that new tile data that we
| | 08:42 |
created earlier in C# to the pinned tile.
Now, let's go ahead and turn to the start
| | 08:49 |
screen and go back to the bottom.
But now, you see that the tile is updated
| | 08:54 |
and shares the additional content we
provided.
| | 08:57 |
If I flip through the various sizes,
you'll see the different parameters start
| | 09:00 |
to display based on if the tile is small,
medium, or wide.
| | 09:06 |
So, to update our flip tile, we first set
up the initial designs using the app
| | 09:10 |
manifest, and then in our code specify
the default tile using the shell tile class.
| | 09:15 |
We then created a new data set based on
the flip tile data class and then passed
| | 09:20 |
that data set to the specified time.
| | 09:22 |
| | Collapse this transcript |
|
|
3. Creating Iconic TilesThe iconic tile template| 00:00 |
The Iconic tile is perfect for
applications that need to display a
| | 00:03 |
prominent notification, and add some
visibility behind what these
| | 00:06 |
notifications are?.
For example, Email, Chat or Social Media
| | 00:10 |
applications are great examples of when
to use an Iconic tile.
| | 00:14 |
The Iconic tile also the only type of
tile that doesn't have a backside option.
| | 00:18 |
All Iconic tiles are front-sided only.
Let's start with a small version of the tile.
| | 00:24 |
All of the front sides of iconic tiles
use the phone access color and the only
| | 00:29 |
asset you'll provide is an transparent
icon which is called small icon image.
| | 00:34 |
This requires an image reference using an
URI in your code.
| | 00:38 |
In addition you can display a number to
indicate a number of other notifications
| | 00:42 |
and other data.
This is provided using account parameter.
| | 00:46 |
This and the other two sizes of the icon
also support a background color
| | 00:50 |
parameter, that we will define using an
RGBA value in our code.
| | 00:54 |
Let's move on to the medium version.
In this size, the icon is larger than the
| | 00:58 |
small version and uses the icon image
parameter, which is also populated by
| | 01:03 |
using a URI reference.
In the lower left corner, you can also
| | 01:06 |
display text for the tile by assigning a
string to the property title.
| | 01:10 |
Just like the small version, a
notification count can be displayed to
| | 01:14 |
the right of the icon.
This uses the same count property.
| | 01:17 |
Also, one thing to point out, is if there
are no notifications, the icon will
| | 01:22 |
display in the center without any
numbers.
| | 01:24 |
While displaying the icon, if the count
increases, the icon will slide to the
| | 01:28 |
left and the numbers will flip into
place.
| | 01:32 |
The wide version of the tile adds a bunch
of additional parameters.
| | 01:35 |
The first is three wide content
parameters, wide content one, wide
| | 01:40 |
content two, and wide content three.
WideContent One is the larger of the
| | 01:44 |
other two, which is good for titles or
headlines that you want to appear.
| | 01:48 |
The second two appear below on subsequent
lines.
| | 01:50 |
One thing to keep in mind is that these
text items are only one line high for the
| | 01:54 |
wide content parameters.
The icon that is displayed in the lower
| | 01:58 |
right corner is shared with the small
version, and reuses the small icon image
| | 02:03 |
parameter in our data set.
As you can see, there are a lot of
| | 02:07 |
options with the Iconic Tile that really
help the user see more information about
| | 02:11 |
data within the app without needing to
launch directly into it.
| | 02:14 |
| | Collapse this transcript |
| Building design assets for iconic tiles| 00:00 |
Although there are many parameter options
for the iconic tile there are only two
| | 00:04 |
graphical assets that you'll need to
create.
| | 00:07 |
The first is the small version of the
icon, which is a transparent icon and
| | 00:11 |
should use a white foreground to match
with the design guidelines provided by Microsoft.
| | 00:16 |
The small icon has a dimension of 70 by
110 pixels.
| | 00:20 |
The larger version of the icon has a
similar design requirement, but in this
| | 00:23 |
case is 130 by 202 pixels in size.
Finally, although it isn't a design
| | 00:29 |
asset, you'll also need to define the
background color of the tile.
| | 00:33 |
If you wish to use the phone accent
color, you can omit this property and the
| | 00:36 |
tile will adopt the user's preferred
color or you can select the color and
| | 00:40 |
extract the RGB values of that color.
Although the parameter accepts an RGBA
| | 00:44 |
value, the A value must be opaque or it
will reject the color and use the phone
| | 00:49 |
accent color.
| | 00:50 |
| | Collapse this transcript |
| Creating a basic iconic tile| 00:00 |
Creating an iconic tile in C Sharp code
will involve three steps.
| | 00:04 |
We need to identify the tile we want to
update, define the data set for the tile,
| | 00:08 |
and then apply that data set to the tile.
if you have access to the lesson files,
| | 00:12 |
go ahead and open the start files for
this chapter.
| | 00:14 |
The project contains a XML page that has
some descriptive text and a button that
| | 00:18 |
will trigger a method in our C Sharp
code.
| | 00:21 |
When you tap the button you'll change the
iconic tile with our custom parameters.
| | 00:25 |
The XML and basic c sharp code behind
files are already created so we just need
| | 00:29 |
to add in the specifics to customize our
iconic tile design.
| | 00:33 |
The project also has asessts that we'll
use for our icon design within the
| | 00:37 |
assets, icon tile assets folder Let's go
ahead and start by looking at the at
| | 00:42 |
manifest file, or wm@manifest.
Since we're working with an iconic tile
| | 00:47 |
for app, we'll need to define that here.
We'll need to select that within the tile
| | 00:51 |
template dropdown.
Since we're working with large tiles, we
| | 00:54 |
also need to make sure that support for
large tiles is checked.
| | 00:58 |
If we scroll down, we also need to make
sure that our tile images for small and
| | 01:03 |
medium are selected.
If you need to change these, you can
| | 01:06 |
click at the bottom, and then browse and
find the files on your filing system.
| | 01:11 |
Next, let's go ahead and open the main
page dot XML dot cs file In order to
| | 01:16 |
change the tile with code we need to
define the tile that we want to update.
| | 01:20 |
So to do this, we need to use the shell
tile class, and build a reference to that
| | 01:24 |
in our c sharp.
Let's go into our tile update click
| | 01:27 |
method and get that started.
We're going to create a shell tile object
| | 01:31 |
type for pinned tile, and we'll set that
equal to shelltile.activetiles.first.
| | 01:40 |
Now, again, like we said with the earlier
icon type.
| | 01:44 |
The shell tile classes active tiles
allows a management of all the different
| | 01:48 |
tiles inside of our application.
The first method will select the default
| | 01:52 |
app tile for this particular app.
And remember, it will do this even if
| | 01:57 |
that tile isn't necessarily pinned to the
start screen.
| | 02:00 |
With the reference made we now need to
create the data set to send to the tile.
| | 02:04 |
We need to type this data set and for
this tile type we need to create an
| | 02:07 |
iconic tile data object.
So let's go ahead and define that object,
| | 02:12 |
iconic tile data.
Let's call this object UpdatedTileData,
| | 02:20 |
and we'll set this equal to new
IconicTileData.
| | 02:26 |
And we'll start to update the parameters
of this particular data set.
| | 02:30 |
We'll create a title for our tile, and
we'll set this equal to Chat.
| | 02:33 |
Next ,we've added a notification count of
one.
| | 02:41 |
Now let's go ahead and create the three
lines of text that will appear at the
| | 02:44 |
upper left hand corner of the wide format
of the iconic tile.
| | 02:48 |
We set these using y content one, two and
three.
| | 02:52 |
Y content one is going to have larger
size, we set that's equal to my name Doug Winnie.
| | 02:59 |
This is again good for tiles that
going to be using the larger fun at the
| | 03:03 |
first line, add in a comma and then add a
second one widecontent2.
| | 03:10 |
As this for making for a check
application, we'll set this to an example
| | 03:13 |
chat I get, Hi there, what's up.
Next we'll add in wide content three and
| | 03:22 |
we'll put in the time that I might have
gotten that maybe five minutes ago.
| | 03:29 |
Now let's go ahead and select the icon
images.
| | 03:31 |
So the iconic tile there's only two
types.
| | 03:34 |
The small icon image is actually shared
in between the small version and the wide version.
| | 03:40 |
We're going to set this to a new URI
which will point to the asset inside of
| | 03:45 |
our assets folder.
That's located at /Assets/IconicTileAssets/small_icon.png.
| | 03:58 |
Set the URI kind to relative.
The medium size uses the regular icon image.
| | 04:06 |
We'll set this also to a uri which will
be assests, iconic tile assests slash
| | 04:16 |
medium icon with an underscore between
that.
| | 04:20 |
PNG and we'll set this to a
UriKIND.Relative.
| | 04:27 |
Now we also have the option of selecting
the background color.
| | 04:32 |
Now, if I wanted to use the default
accent color of the phone, I could omit this.
| | 04:36 |
But let's go ahead and add in kind of a
yellowish color to this.
| | 04:39 |
We'll set background color and we're
going to set this to a new system Windows
| | 04:46 |
media color.
Now the RGB and A values of this are
| | 04:51 |
located inside of curly braces.
The A must be 255 in order for this to work.
| | 04:58 |
If it doesn't equal 255 it will reject
the color and use the (INAUDIBLE) accent color.
| | 05:03 |
Next let's access the red.
We'll set this to 255 as well.
| | 05:08 |
Then I'll access the green.
Set this to 188.
| | 05:11 |
And then we'll access the blue.
Which we'll set at 54.
| | 05:17 |
And then I'll close this.
This is the last parameter so I'm not
| | 05:20 |
going to put comma at the end, but I am
going to go back to the bottom.
| | 05:23 |
Close our curly brace from above and now
I'm finished with our data set.
| | 05:27 |
So since these are all properties we can
build a property to test for the
| | 05:31 |
notification and change the icon or even
the background color to end notification
| | 05:36 |
counts and that's relevant for your app.
Now with the data set defined, we not
| | 05:40 |
need to update the tile itself.
We'll do that by accessing the selected
| | 05:44 |
tile and use the update method passing in
the iconic tile data type to the tile.
| | 05:49 |
Let's go ahead and access pinned tile,
and we'll say update.
| | 05:53 |
And we'll pass in updated tile data.
Let's go ahead and run this in the
| | 05:59 |
emulator and see how it works.
I'm going to quit the applicaton first,
| | 06:04 |
so I can pin this to the start screen,
and then rerun it.
| | 06:08 |
This is saved as Iconic Tile.
I'm going to click and hold on Iconic
| | 06:12 |
Tile, and then say pen to start.
As you can see, there are no notification
| | 06:17 |
counts currently displayed on this,
because we haven't set any of those
| | 06:20 |
parameters for this particular tile.
Let's go ahead and run the application.
| | 06:25 |
And then we'll update the tile and then
go back to the start screen.
| | 06:31 |
Now you'll see that the tile's displaying
the custom parameters that we passed into it.
| | 06:34 |
In this case, it's showing the medium
size.
| | 06:36 |
If I click and hold I can then resize
this to make it smaller.
| | 06:41 |
You'll see that the title disappears but
the notification and the icon remain.
| | 06:45 |
But in this case it's using the small
icon.
| | 06:47 |
If I make it to wide size, you'll see the
icon and the notification count are now
| | 06:54 |
displayed in the lower right hand corner.
The title displays in the lower left.
| | 06:57 |
And my name as well as the two lines of
text that we created as the wide content
| | 07:03 |
one, two, and three appear in the upper
left.
| | 07:05 |
So to update our iconic tile, we first
set up the initial designs using the app
| | 07:09 |
manifest and then in our codes, specify
the default tile using the shell tile class.
| | 07:15 |
We then created a new dataset based on
the iconic tile data class and then
| | 07:19 |
passed that dataset to the specified
tile.
| | 07:22 |
| | Collapse this transcript |
|
|
4. Creating Cycle TilesThe cycle tile template| 00:00 |
The cycle tile is a beautiful way to
highlight photos or images as part of
| | 00:03 |
your application.
By rotating them in a live tile on the
| | 00:07 |
start screen.
The unique aspect of cycle tiles allows
| | 00:10 |
you to rotate up to nine images and
display notifications in a tile that can
| | 00:14 |
add life to your app, even before you
launch it.
| | 00:17 |
A small version of the tile, though, is
very static.
| | 00:20 |
Similar to the flip icon, you provide a
single, small background image parameter
| | 00:24 |
populated by a URI.
In addition, you can display a number to
| | 00:28 |
indicate number of notifications or other
numeric data.
| | 00:31 |
This is provided using a Count parameter.
The medium version is when things get intereseting.
| | 00:37 |
Using a collection of URI-based images,
we can provide nine images that will
| | 00:41 |
display using a pan and cycle animation,
going through each one of them in order.
| | 00:46 |
These images are stores in the
CycleImages property.
| | 00:49 |
In the lower left corner you can also
display text for your tile by assigning a
| | 00:53 |
string to the property Title.
Just like the small version a
| | 00:56 |
notification count can be displayed to
the right of the icon.
| | 00:59 |
This uses the Count property.
The wide version has no unique
| | 01:03 |
parameters, and will use the same
collection of cycle images you provide
| | 01:07 |
for the medium version.
So you need to provide images that are
| | 01:10 |
suitable for both.
The medium version of the title will crop
| | 01:13 |
the images to display in a smaller area.
But in this case, with the wide version,
| | 01:17 |
you can take advantage of the larger area
to display them more prominently on the
| | 01:21 |
start screen.
In addition, the same title and
| | 01:23 |
notification counts are also displayed
using the same title and count properties.
| | 01:27 |
| | Collapse this transcript |
| Building design assets for cycle tiles| 00:00 |
Cycle tiles can display a number of
images, but there only are two sizes for
| | 00:04 |
your assets that you'll need to consider.
The first is the static background for
| | 00:09 |
the small version of the tile.
This is a single image that is 159 by 159
| | 00:15 |
pixels in size.
Sometimes, based on the limited size of
| | 00:18 |
the tile, you may want to use a
transparent icon for the graphic, which
| | 00:22 |
would take advantage of the user's
selected accent color.
| | 00:25 |
The other set that you'll need to
consider are the rotating images.
| | 00:28 |
There are two sizes.
This is based on how you configure your
| | 00:31 |
live tile.
By default, tiles don't support the wide
| | 00:34 |
format, so your images should be 336
pixels in width.
| | 00:39 |
If you enable wide tiles for your app in
your manifest, your images should be 691
| | 00:43 |
in width.
Due to the fact that the image is panned
| | 00:46 |
vertically, they can be at different
heights, and they will pan within the
| | 00:50 |
space of the tile.
If your graphics don't match the width of
| | 00:53 |
the tile, they'll be stretched to make
them fit.
| | 00:55 |
Which can lead to some pixelation of your
tile, which may not be desirable.
| | 00:59 |
| | Collapse this transcript |
| Creating a basic cycle tile| 00:00 |
Creating a cycle tile in C sharp will
involve the same three steps we've done
| | 00:04 |
in the other two types.
We need to identify the tile we want to update.
| | 00:08 |
Define the data set for the tile, and
then apply it to the tile.
| | 00:11 |
If you have access to the list of files,
go ahead and open the start files for
| | 00:15 |
this chapter.
The project contains the zammo page that
| | 00:17 |
will have some descriptive text, and a
button that will trigger a method in our
| | 00:21 |
C sharp code.
This is similar to all the other products
| | 00:24 |
that we've created so far.
The attack the button you'll change the
| | 00:27 |
cycle tile with our custom parameters.
The XAML and Basic C# code files are
| | 00:31 |
already created for us, we just have to
add in the specifics to customize the
| | 00:35 |
cycle tile design.
The project also has the assets that
| | 00:38 |
we'll use for our icon design within the
asset cycle tile assets folder inside of
| | 00:43 |
the solution explorer.
Lets go ahead and start by looking at the
| | 00:46 |
WMAPP manifest file since we are working
with the cycle tile in our app we need to
| | 00:51 |
define that here under the tile template
drop down.
| | 00:54 |
Also, since we are working with the wide
format we need to make sure that we have
| | 00:57 |
support for large tiles selected, if I'll
scroll down you will see that under tile
| | 01:02 |
images we now have a bunch more options
we require to provide it at least two.
| | 01:07 |
The first one is the static small icon
that we'll use.
| | 01:10 |
And then at least one of the cycle images
that will display in either the medium or
| | 01:14 |
the wide format of the icon.
Now we're going to add more images but
| | 01:18 |
we're going to do that inside of code.
So let's go ahead and go into the main
| | 01:21 |
page dot zamel dot cs file and we can get
started.
| | 01:25 |
Now again, in order to change the tile
with code, we need to define the tile
| | 01:28 |
that we need to update.
So if we go inside of our update tile
| | 01:32 |
click method, we can then go ahead and
start working with the shell tile class.
| | 01:46 |
The pin tile's going to be referring to
the application's default tile.
| | 01:53 |
With the reference made, we now need to
create the data set that we want to send
| | 01:56 |
to the tile.
Since this is a cycle tile, we need to
| | 02:00 |
type this as a cycle tile data object.
I'll go ahead and define that here with
| | 02:04 |
cycle, tile data.
We'll call this updated tile data.
| | 02:11 |
I'll set this equal to a new instance of
the cycle tile data object.
| | 02:17 |
Just like with the other ones, we're
going to start this off with a curly brace.
| | 02:20 |
And now we can start defining the
properties for our cycle tile data data set.
| | 02:25 |
Let's go ahead again and start with the
front side content.
| | 02:28 |
We'll add in our title, which we'll call
Travel Photos.
| | 02:33 |
Add in a comma, and then we'll add in a
notification count using Count and we'll
| | 02:38 |
set this to twenty three.
Now the small version of this requires a
| | 02:42 |
static background image.
That's defining using the small
| | 02:48 |
background image property which we'll set
to a URI.
| | 02:54 |
URI for this is
/assests/cycletileassets/front_background_small.png.
| | 03:05 |
We now need to define the URI kind, in
this case its relative.
| | 03:09 |
Well add in a comma because now we need
to define the various images that are
| | 03:13 |
going to cycle in both the medium and the
wide formats.
| | 03:17 |
Now this a stage in a property called
cycle images.
| | 03:21 |
Now the cycle images is property is a
common and limited list of image URIs
| | 03:25 |
that are going to be cycled within the
tile.
| | 03:28 |
I'm going to set this to a list of URIs.
And I'll open this up with a curly brace,
| | 03:35 |
and then define each the URIs.
The first URI, (SOUND) It's going to
| | 03:41 |
point to Assets, CycleTileAssets,
image1.png and our UriKind is Relative.
| | 03:55 |
Now if we look at our assets folder
you'll see that they're all basically the
| | 03:58 |
same name.
Image one, image two, image three, image
| | 04:01 |
four, and image five.
So I'm going to go ahead and just copy
| | 04:05 |
this line of code, and then just paste it
four times.
| | 04:08 |
And then I'm going to go in here and make
each one unique.
| | 04:12 |
Two, three, four, and five.
Since this is the last one, I'm going to
| | 04:18 |
take off the comma.
And then close this particular cycle
| | 04:22 |
images list.
Now, cycle images is the last property
| | 04:25 |
that we're going to be working with.
So I'm not going to add a comma at the
| | 04:28 |
end of this.
But then close the earlier curly brace.
| | 04:31 |
With the data set defined, we now need to
update the tile itself.
| | 04:35 |
So again, we're going to work with our
pinned tile object.
| | 04:39 |
And we're going to access the update
method.
| | 04:42 |
And then pass in our updated tile data,
data set.
| | 04:45 |
Okay, so let's go ahead and run this in
the emulator.
| | 04:50 |
So I'm going to go ahead and update the
tile now.
| | 04:54 |
Now just to prove that the data that was
set to this particular tile is saved.
| | 04:58 |
Even though that the tile is not actually
pinned to the screen Let's go head back
| | 05:02 |
to the application list, click and hold
on cycle tile, and then pin to start.
| | 05:07 |
You'll see that, again, the medium
default size is now animating through the
| | 05:12 |
various images inside of our cycle images
list.
| | 05:15 |
It's going through the various images in
a nice vertical pan motion.
| | 05:18 |
And that's wiping them up to display each
image in sequence.
| | 05:22 |
Now if I go ahead and tap on this and
hold and make it small, you'll see that
| | 05:27 |
the images no longer rotate.
That's because the small version only
| | 05:30 |
uses a static image.
Now, let's go ahead and click and hold
| | 05:33 |
this and make it larger.
So we can now see the wide format.
| | 05:38 |
Now we're able to see the entire image in
a really nice visual way.
| | 05:44 |
If your images are only 336 pixels in
height, you won't see the pin but they
| | 05:48 |
will wipe up each win sequence.
So, again, to update our tile, we first
| | 05:53 |
need to set up the initial designs using
the app manifest.
| | 05:56 |
And then in our code, specify the default
tile using the shell tile class.
| | 06:00 |
We then created a new data set based on
the cycle tile data class including a
| | 06:04 |
list of images to cycle through, and then
pass that data set to the specified tile.
| | 06:08 |
| | Collapse this transcript |
|
|
5. Working with Secondary TilesCreating secondary tiles| 00:00 |
In addition to defining and updating your
main tile for your application, you can
| | 00:04 |
create secondary tiles that will launch
this specific areas of your app, or
| | 00:08 |
passing data for your app to parse/g.
To work with secondary tiles, we need a
| | 00:12 |
unique ID for the tile, which will
provide as a Uri for the tile to launch.
| | 00:17 |
To get started, if you have the exercise
files available, open the start version
| | 00:20 |
for this chapter.
This project is a little bit different
| | 00:23 |
than the others.
If you look, there are two XAML files.
| | 00:27 |
The first one is called MainPage.xaml.
This is the default start for our application.
| | 00:33 |
The other is LaunchFromTile.xaml.
This is the screen in our app that we
| | 00:38 |
want to launch to, from our secondary
tile.
| | 00:40 |
So let's go ahead and jump into the code
and start to put our project together.
| | 00:44 |
(SOUND) On our MainPage.xaml file,
there's a text component called NotifyText.
| | 00:49 |
Let's go ahead and set the text to notify
that the secondary tile will be pinned
| | 00:53 |
when the user taps the button on the
screen.
| | 00:55 |
So within our CreateTile_Click method,
we'll access NotifyText and modify the
| | 01:02 |
text property.
I'll set this to Secondary tile pinned.
| | 01:10 |
Next, we need to create a new set of tile
data.
| | 01:12 |
In this case, we're going to work with a
standard tile data type.
| | 01:16 |
This is the most bare bones version of
the tile templates.
| | 01:19 |
But basically we'll only be providing a
title parameter and nothing else.
| | 01:23 |
So let's go ahead and create a new
object, which we'll type as a standard
| | 01:27 |
tile data.
We'll call this SecondaryTileData (SOUND)
| | 01:32 |
and we'll set this to a new instance of
the StandardTileData class.
| | 01:38 |
In the next line, we'll create an open
curly brace, and we'll set our title
| | 01:41 |
(SOUND) to SecondaryTile.
(SOUND) We'll close our curly brace and
| | 01:49 |
now we're ready to do our next step.
So, now that we've created the data set
| | 01:53 |
for our tile.
We now need to access the ShellTile class
| | 01:56 |
and tell it that we want to create a new
tile.
| | 01:59 |
Now, in the previous examples, we used
the update method.
| | 02:02 |
That is because we're working with the
main tile for the application.
| | 02:05 |
In this case, we want to create a new
tile.
| | 02:08 |
So, we're going to use the create method.
To do this, I'm going to access the
| | 02:12 |
ShellTile class and say that I want to
create a new tile.
| | 02:16 |
This method requires two parameters.
The first is the Uri we will want to use
| | 02:20 |
to launch the app with.
Since we want to launch the app into the
| | 02:23 |
LaunchFromFile.xaml file, we'll need to
add our reference here.
| | 02:27 |
So go ahead and create a new (SOUND) Uri.
And we'll set this, so that we're
| | 02:34 |
going to be launching the
/LaunchFromTile.xaml.
| | 02:40 |
(SOUND) And we'll set out UriKind as
relative.
| | 02:43 |
The second parameter is the TileData set
that we created earlier that we want to
| | 02:47 |
pass into this new tile.
We call that SecondaryTileData.
| | 02:52 |
With that created, let's go ahead and
launch the application in the emulator.
| | 02:58 |
When I tap the button, the text is
briefly displayed.
| | 03:01 |
And then the phone switches back to the
start screen to immediately show the new
| | 03:05 |
tile we just created with the unique
title.
| | 03:08 |
If I tap the new secondary tile, it will
use the Uri reference to the
| | 03:12 |
LaunchFromTile.xaml file and launch the
app.
| | 03:16 |
But in this case, takes us to that
particular screen.
| | 03:18 |
But there is a problem.
Let's go ahead and quit the app and
| | 03:21 |
relaunch it.
(SOUND) If I go back to Secondary_Tile,
| | 03:27 |
which is now installed here in the
application list, and I go ahead and try
| | 03:32 |
to create the tile again, I'll get a
runtime error.
| | 03:35 |
That is because the tile with the same
Uri reference already exists.
| | 03:40 |
We need a way to test if a SecondaryTile
with the same parameter already exists
| | 03:44 |
before we try to create it again.
So let's go ahead and break and I'll end
| | 03:48 |
the session, and let's go ahead back into
our code.
| | 03:51 |
To fix this problem, we need to find if
the tile with a specific Uri exists
| | 03:55 |
within the application set of tiles.
The ShellTile class can help us out with this.
| | 04:00 |
First, we need to get to the top.
Let's go to the top of our
| | 04:04 |
CreateTile_Click method, add a few lines
in the beginning and (INAUDIBLE) work
| | 04:08 |
with ShellTile class.
We are going to create a temporary object
| | 04:12 |
that we are going to use to see if there
is an existing tile in the app.
| | 04:16 |
Let's create a new object that's going to
be typed as ShellTile and we'll just call
| | 04:20 |
it shellTile with a lower case s.
Now we could access the ShellTile class
| | 04:27 |
here, (SOUND) access the active tiles and
then instead of first, we're going to use RirstOrDefault.
| | 04:36 |
(SOUND) I'll add in the open parenthesis
and we're going to enter in some code
| | 04:40 |
which I'll explain in just a little bit.
A code is tile => tile.NavigationUri.ToString().Contains.
| | 04:55 |
(SOUND) And I'll add into that a string
"/LaunchFromTile.xaml"));.
| | 05:08 |
Now, let's go ahead and explain this code
a little bit.
| | 05:09 |
Within ShellTiles, I can access all the
active tiles and I can access all their
| | 05:15 |
navigation Uri properties.
In this case, I'm going to convert them
| | 05:18 |
to a string.
And then using the contains method, I'm
| | 05:21 |
going to see if the tile contains a
reference to the launch from Tile.xaml location.
| | 05:27 |
The tile is found it will be assigned to
the shellTile object we created.
| | 05:31 |
If that is the case, we don't want to
create the tile, since the tile already exists.
| | 05:36 |
If the tile doesn't exist, the shellTile
will have a value of null, which we can
| | 05:41 |
test for and then create the tile like we
did before.
| | 05:44 |
With this, we can wrap our old code in a
conditional statement and determine if
| | 05:47 |
shellTile is null, meaning that a tile
with the Uri doesn't exist.
| | 05:52 |
So let's go ahead, and after that line of
code, we're going to add in an if statement.
| | 05:57 |
And we're going to ask, is shellTile
equal to null?
| | 06:00 |
Go ahead an open a code block.
And we'll wrap it around here.
| | 06:09 |
(SOUND) Now, if the tile does exist, we
can notify the user using an else
| | 06:13 |
statement here.
And we can provide an update to the text
| | 06:16 |
field on our xaml page.
So, let's go ahead and add in else
| | 06:21 |
(SOUND) and we'll add in a new code
block, which will say NotifyText and
| | 06:28 |
we'll access the text property and say,
Secondary tile already pinned.
| | 06:35 |
(SOUND) And we'll close the text block.
So let's go ahead and run this down the emulator.
| | 06:41 |
Here, we go back to the start screen.
Now, if I go down to the bottom, we
| | 06:46 |
already have the Secondary tile pinned
here.
| | 06:48 |
So let's go back to our application list
and access secondary tile and run the app.
| | 06:54 |
Now if I click, create secondary tile, it
knows that there's a secondary tile
| | 06:59 |
already pinned and it notifies me here in
the app.
| | 07:02 |
If we recall the code that we created
earlier, what's happening is that first
| | 07:06 |
accesses the active tiles of Shelltile
and is determining, is there a tile that
| | 07:11 |
already contains the Uri string with the
LaunchFromTile.xaml inside of it.
| | 07:16 |
If there is, we then want to have the
notify text display Secondary tile
| | 07:20 |
already pinned.
Now if there isn't, if I go ahead and go
| | 07:24 |
back to start, go down to the bottom and
remove the tile, (SOUND) and then launch
| | 07:32 |
our app again.
If I try to create a secondary tile, it
| | 07:38 |
will create it successfully because in
this case shellTile is equal to null
| | 07:43 |
since it cannot find a tile that contains
the Uri string LaunchFromTile.xaml.
| | 07:47 |
Secondary tiles are good solutions for
getting people directly into specific
| | 07:52 |
areas of your app.
Through the use of custom navigation
| | 07:54 |
UrI's, you can create secondary tiles for
your app.
| | 07:57 |
The trick, though, is to make sure that
you search for secondary tiles that may
| | 08:01 |
already exist.
| | 08:02 |
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 |
Live tiles are a key part of the Windows
Phone 8 experience, and taking advantage
| | 00:04 |
of them in your app will help your users
have a more enjoyable and informative
| | 00:07 |
experience, when working with your app.
Through the use of flip tiles you can
| | 00:11 |
provide a combination of images and text
to communicate information to your user.
| | 00:15 |
The iconic tile is great for showing
extensive information and notifications,
| | 00:19 |
that can bring application data directly
to the start screen.
| | 00:22 |
The second tile is also a great way to
show images in an engaging and animated
| | 00:26 |
way to bring your applications to life.
In addition, through the use of secondary
| | 00:30 |
tiles, you can provide direct access to
specific sections of your app, making it
| | 00:35 |
easier and faster for users to take
advantage of specific sections or
| | 00:38 |
functionality in your app.
For more information on live tiles, I
| | 00:43 |
suggest that you check out the Windows
Phone developer center located at dev.windowsphone.com.
| | 00:47 |
There are additional examples there, and
forums with more information on live tiles.
| | 00:53 |
For additional information on Windows
Phone 8, also check out the other courses
| | 00:57 |
in the lynda.com online training library.
Thank you for watching.
| | 01:00 |
| | Collapse this transcript |
|
|
