8 days of Windows Phone 8 | Day 2: Live tiles & Lock screen

8 days of windows phone 8

Welcome back to my series of blog posts called 8 days of Windows Phone 8. Today, the 2nd day of this series we’ll dive into the new possibilities of Windows Phone 8 live tiles and the lock screen.

  • Day 1: SDK Overview
  • Day 2: Live tiles and Lock screen
  • Day 3: Emulator & Simulation dashboard
  • Day 4: New screen resolutions
  • Day 5: .net 4.5 & C# 5.0
  • Day 6: Speech
  • Day 7: Proximity capabilities
  • Day 8: Wallet and In-App purchases 

    day2

    Live tiles

    If you are familiar with developing for Windows Phone 7 you already know about live tiles. They are one if the unique features of Windows Phone that everyone loves. In Windows Phone 8 Microsoft added more possibilities to create live tiles and also made them more flexible for the end users to really personalize their phone.

    One of the main changes is that live tiles now can be set by any user to 3 different sizes. Small, medium and wide. There are also 3 different templates to create live tiles that show information on different ways: the Flip template, the Cycle template and the Iconic template.

    Sizes used for these templates are:

    Flip Cycle Iconic
    Small 159 * 159px 159 * 159px 110 * 110px
    Medium 336 * 336px 336 * 336px 202 * 202px
    Wide 691 * 336px 691 * 336px -

    You might expect that there would be even more resolutions for the images because of the new resolutions that are supported in Windows Phone 8 but this is not the case. The OS will scale the images for you so you only have to supply them once.

    Flip template

    In Windows Phone 7 it was possible to create tiles and set certain properties on them like a title, count, a back ground image and a text located on the back of the tile. In Windows Phone 8 this is still possible but Microsoft created 2 more tile templates to create live tiles. The template that was used in Windows Phone 7 is now called the Flip Template because it has data on it’s back and will flip at random intervals showing this data. The other templates are called the Iconic template and the Cycle template.

    So lets start looking at some code. At the end of the post you can download all the example code in 1 project to set the different kinds of tiles. Let’s create a Flip tile first:

    We start with a new empty project and add a button to set our flip template. Lets add a click event and place our tile creation code there to make it as easy as possible. In the click event we’ll start adding the code for adding the live tile

     

     1: private void FlipButton_Click(object sender, RoutedEventArgs e)
     2: {
     3:     ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();
     4:
     5:     FlipTileData fliptile = new FlipTileData();
     6:     fliptile.Title = "WP8";
     7:     fliptile.Count = 9;
     8:     fliptile.BackTitle = "day 2";
     9:
     10:     fliptile.BackContent = "back medium";
     11:     fliptile.WideBackContent = "back of the wide tile";
     12:
     13:     fliptile.SmallBackgroundImage = new Uri("Assets/159.png",UriKind.Relative);
     14:     fliptile.BackgroundImage = new Uri("Assets/336.png", UriKind.Relative);
     15:     fliptile.WideBackgroundImage = new Uri("Assets/wide.png", UriKind.Relative);
     16:
     17:     tile.Update(fliptile);
     18: }

    First of you can get the current active tile by querying the ShellTile class. After that we’ll be creating a new FlipTileData object where we can set all the properties of the new tile. We’ll set the title, count and other properties. Some properties are only for the tile in small mode, some are only used in medium or wide mode and some are used in all modes like the count. We’re adding 3 different images for the 3 sizes of the tile. When we finished setting the properties on the tile we can call the update method on our tile object and pass the FlipTileData to it to set the new tile.

    You can set the following properties on the flip tile:

    Title The title is shown on the bottom left of the front of the tile. it will be shown on the medium and wide tiles.
    Count The count is the number in the black circle on the top right of every tile. The count is shown at all tile sizes.
    BackgroundImage The background image is the image shown on the background of the front of the tile at medium size
    BackBackgroundImage To set the background of the back of the tile use the BackBackgroundImage
    BackContent BackContent is the text shown on the back of a tile at medium size
    BackTitle Title shown on bottom left of the back of a tile on medium and wide size
    SmallBackgroundImage The background of the tile at small size.
    WideBackgroundImage The background of the tile ad wide size
    WideBackBackgroundImage The background of the back of the tile at wide size
    WideBackContent Text shown on the top left of the back of a tile at wide size

    The result will look something like this:

    Small: (note small tile doesn’t flip)

    small

    Medium:

    medium medium example back

    Wide:

    wide example  wide example back

    If you were used to creating live tiles in WP7 there aren’t that much changes as you can see. All that is different are the small and wide sizes of the tile.

    Iconic template

    The iconic template is a new template that is available in Windows Phone 8 and i think this is a really good addition to the Windows Phone SDK. Lots of apps use tiles with a white icon and a transparent background so it looks like the native Windows Phone apps. However lots of people have trouble sizing the icon and the count in the black circle doesn’t look as good as the build in apps like mail or the message hub. To make this easier for everyone Microsoft created the Iconic tile template and it works almost similar to the FlipTile except for we’re using a IconicTileData object instead of the FlipTileData. I think the Iconic tiles will be used a lot on Windows Phone 8.

     1: private void IconicButton_Click(object sender, RoutedEventArgs e)
     2: {
     3:     ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();
     4:
     5:     IconicTileData icontile = new IconicTileData();
     6:     icontile.Title = "WP8";
     7:     icontile.Count = 12;
     8:
     9:     icontile.IconImage = new Uri("Assets/202.png", UriKind.Relative);
     10:     icontile.SmallIconImage = new Uri("Assets/110.png", UriKind.Relative);
     11:
     12:     icontile.WideContent1 = "8 days of windows phone 8";
     13:     icontile.WideContent2 = "day 2";
     14:     icontile.WideContent3 = "Live tiles and lock screen";
     15:
     16:     ShellTile.Create(new Uri("/MainPage.xaml",UriKind.Relative), icontile, true);
     17: }

    As you can see creating the tile is done the same way as the as the first tile we created except for using the IconicTileData.

    The properties in the IconicTileData are a bit different. one key aspect are the images you can add to the Iconic tiles. They are set to different sizes compared to the other tile templates because they only use part of the tile. In the current beta build i’ve used to create this blogpost the images don’t seem to work that well but my guess this will be finished in the final SDK build.

    Another thing that is different is the last line of generating the live tile. The default live tile is made by a FlipTileData object and you can’t update an existing tile to another template so we’re creating a new tile for the Iconic tile.

    Small: (seems to be a bug in the 8.0 build of the sdk where the count falls of the edge of the tile. Don’t know if this only happens in the emulator or also on actual devices since i haven’t tested it on a device yet because i don’t have a device.)

    iconsmall

    Medium:

    iconmedium

    Wide: (also the rendering of this seems to be a bit off since there should be a margin below the icon that doesn’t seem to be here right now in this build of the SDK)

    iconwide

    The wide template also has 3 lines of text you can add to the wide tile. because of this this template is really versatile and probably one of the reasons this template will be used a lot. A complete list of the IconTileData properties is:

    Title Title shown on bottom left of the tile in medium and wide size
    Count Count shown on the right of the icon image at all sizes
    BackgroundColor Set the background of the tile. if not set it will use the phone accent color
    IconImage Image used in the medium tile size
    SmallIconImage Image used in the small and wide (bottom right) tile size
    WideContent1 Line 1 in the largest font on the wide tile size
    WideContent2 Line 2 of text on the wide tile size
    WideContent2 Line 3 of text on the wide tile size

    Cycle template

    The Iconic tile adds a lot of new possibilities for the live tiles that developers tried to achieve on Windows Phone 7. One example of Windows Phone 7 tiles that lots of people liked was the photo tile where there is a set of images that get rotated in turns on the tile. On Windows Phone 7 there was no way to recreate this as a developer but now with Windows Phone 8 there is a possibility using the Cycle Template.

    Creating a cycle live tile is done the same way as creating the other 2 templates so lets get started and implement the code under the 3rd button in our example app to create a Cycle tile.

     1: private void CycleButton_Click(object sender, RoutedEventArgs e)
     2: {
     3:     CycleTileData cycleicon = new CycleTileData();
     4:     cycleicon.Title = "WP8";
     5:     cycleicon.Count = 5;
     6:
     7:     cycleicon.SmallBackgroundImage = new Uri("Assets/159.png", UriKind.Relative);
     8:
     9:     List<Uri> images = new List<Uri>();
     10:     images.Add(new Uri("Assets/cycle1.png", UriKind.Relative));
     11:     images.Add(new Uri("Assets/cycle2.png", UriKind.Relative));
     12:     images.Add(new Uri("Assets/cycle3.png", UriKind.Relative));
     13:     cycleicon.CycleImages = images;
     14:
     15:     ShellTile.Create(new Uri("/MainPage.xaml?id=cycle", UriKind.Relative), cycleicon, true);
     16: }

    The Cycle tile uses the CycleTileData object to set it’s properties and this tile has fewer properties compared to the other templates. The title and count are available as on every other template and the other property that is unique for this template is the CycleImages property. It’s an IEnumerable of Uri’s to images (1 size) that will be used on the medium and wide sizes. it will center the image if it is larger as the tile itself is showing only a part of the image. if the tile is set to small it will only show a static image set in the SmallBackgroundImage property.

    Small:

    cyclesmall

    Medium:

    cyclemedium

    Large:

    cyclewide

    The IEnumerable of images used in the medium and wide tiles can contain up to 9 images and will be rotated using a smooth slide animation. The complete list of properties available in the CycleTileData is:

    Title Tile shown on medium and wide tile sizes in the bottom left corner
    Count Counter shown on all tile sizes at the top right corner
    SmallBackgroundImage Static image shown at the background of the tile at small tile size
    CycleImages List of up to 9 images which will be rotated on the tile at medium and wide tile size.

    Looking at all the live tile features Microsoft added for Windows Phone 8 i believe it really adds some nice new options to create live tiles. I can’t wait for people to use them in their apps.

    Lock screen

    New in Windows Phone 8 is the possibility to add your own apps to the lock screen of Windows Phone 8. As a developer you can’t force an app to be shown on the lockscreen but you can enable your app for it so users can add your app to their lock screen. You can also change the lock screen image in your app by code.

    lock screen app icon, count and Text

    The image on the lock screen is an image you have to include in your project that uses a transparent background and a white icon.

    To set the lock screen image ad an image of 30 * 30 pixels to your solution and open up the WMAppManifest.xml and change the DeviceLockImageURI element to the URL of your lock screen image. Also set the IsRelative attribute to true and IsResource attribute to false. The count and text will be taken of the live tile count property of the current main tile in your app.

     1: <DeviceLockImageURI IsRelative="true" IsResource="false">Assets\LockImage.png</DeviceLockImageURI>

     

    To enable the lock screen image and text you also have to add the following lines of XML to the WMAppManifest.xml below the Tokens element

     1: <Extensions>
     2:       <Extension ExtensionName="LockScreen_Notification_IconCount" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
     3:       <Extension ExtensionName="LockScreen_Notification_TextField" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
     4: </Extensions>

    The settings for displaying data on the lock screen is now complete so we can change our settings on our phone to add our app to the lock screen. To do this. open up settings and go to the lock screen settings. On this screen you can select 1 app that can show the text (default is the calendar app) and 5 apps that are allowed to show an icon + counter. Select your app and you’re ready to go.

    settings lock screen lock screen app added lock screen enabled

    As you can see it uses the counter of our main tile (the flip tile example) and the the text is also the same as we’ve set to the BackContent property of the FlipTileData.

    Lock screen Image

    The last thing I’ll show you is how to set the lock screen background image from within your app. Like using the lock screen icon you’ll also need to add an extension to the WMAppManifest.xml to enable setting the lock screen image

     1: <Extensions>
     2:       <Extension ExtensionName="LockScreen_Background" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
     3: </Extensions>

    When you’ve added the extension to the manifest it’s time to start writing the code to change the lock screen image. First you’ll need to check if your app already provided the current lock screen image and if that isn’t the case you need to ask the user’s permission to change the lock screen image. if the user accepts you can change the lock screen image.

    I’ve added an image of 768*1280 pixels (largest supported resolution right now) set the image to embedded resource and added the following code to the click event of the 4th button to set the lock screen image when we press the button.

     1: private void LockBackgroundButton_Click(object sender, RoutedEventArgs e)
     2: {
     3:     SetLockScreenImage();
     4: }
     5:
     6: private async void SetLockScreenImage()
     7: {
     8:     //check if current app provided the lock screen image
     9:     if (!Windows.Phone.System.UserProfile.LockScreenManager.IsProvidedByCurrentApplication)
     10:     {
     11:         //current image not set by current app ask permission
     12:         var permission = await Windows.Phone.System.UserProfile.LockScreenManager.RequestAccessAsync();
     13:
     14:         if (permission == Windows.Phone.System.UserProfile.LockScreenRequestResult.Denied)
     15:         {
     16:             //no permission granted so return without setting the lock screen image
     17:             return;
     18:         }
     19:     }
     20:
     21:     Windows.Phone.System.UserProfile.LockScreen.SetImageUri(new Uri("ms-appx:///Assets/lockscreen.png", UriKind.Absolute));
     22: }

    As you can see the SetLockScreenImage is using the async keyword because asking the user for permission can only be done by using an async call. therefore we’re using the await keyword there when asking for permission and the app will wait untill the response comes back from the user.

    When we run the app now and press the button we’ll see the old lock screen image being replaced by the newly added image

    lock screen before lock permission

    After pressing yes:

    lock screen new

    This is all for day 2 of my series of blog posts called “8 days of Windows Phone 8”. Tomorrow we’ll have a look at the emulator and the simulation dashboard which give you a lot of options to test your apps.

    Download the sample project here: http://sdrv.ms/QSJ2yx

    Liked the post or have any feedback? leave a comment below!

    Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

33 thoughts on “8 days of Windows Phone 8 | Day 2: Live tiles & Lock screen

  1. I know this if off topic but I’m looking into starting my own blog
    and was wondering what all is needed to get set up? I’m assuming having a blog like yours would cost a
    pretty penny? I’m not very web smart so I’m not 100% sure.
    Any suggestions or advice would be greatly appreciated.
    Many thanks

  2. With havin so much content do you ever run into any issues of plagorism or copyright violation? My website
    has a lot of unique content I’ve either written myself or outsourced but it seems a
    lot of it is popping it up all over the web without my authorization. Do you know any ways to help
    reduce content from being stolen? I’d definitely
    appreciate it.

    Feel free to visit my weblog – videos

  3. Or you can burn them onto your CD’s and DVD’s with the free burning software.
    Eyes Without a Face (1960) Director Georges Franju’s artistic horror film.

    You can find several websites that stream free movies for you, but
    not all.

  4. With proper care and in some cases polishing of your weapons and the right training, you should be well on your way.
    Korean kuk sul won also has the long staff in their system and the techniques used are like a blend of
    Chinese and Japanese moves. Gold has two rules: 1) A point worth as
    much as someone who is willing to pay.

    Feel free to surf to my web blog g force kamas

  5. Hello there I am so grateful I found your blog page, I really found you by mistake, while I was browsing on Bing for something
    else, Nonetheless I am here now and would just like to say thanks for a tremendous post and
    a all round interesting blog (I also love the theme/design),
    I don’t have time to read it all at the minute but I have bookmarked it and also added your RSS feeds,
    so when I have time I will be back to read a great deal more, Please do keep up the awesome work.

    My weblog; kids bathroom accessories (http://www.banishedseeds.com)

  6. Not having the correct knowledge can limit your ability towards reaching
    your goals. Doing these physical exercises will help reduce your
    cravings and the stress associated with them by refocusing your consideration on the breathing exercise, not your cravings.
    Get ready to become fit and have an amazing immune system that will make sure your visits to the doctor
    cue to illnesses are reduced significantly.

  7. Everything is very open with a really clear clarification of
    the challenges. It was definitely informative.
    Your website is very helpful. Many thanks for sharing!

    my webpage – Ground Beef Tacos (Raymond)

  8. ‘Do you know the only thing that gives me pleasure.
    Unearthed: Trail of Ibn Battuta is a third-person action adventure game
    set in a modern-day. Rather than run companies by themselves,
    the Rothschilds often prefer to start or join syndicates, placing their men on boards to exert maximum
    influence with minimum investment risk.

    Also visit my site :: racing games

  9. An impressive share! I have just forwarded this onto a co-worker
    who has been conducting a little homework on this. And he in fact bought me breakfast because I stumbled upon it for
    him… lol. So allow me to reword this….
    Thanks for the meal!! But yeah, thanx for spending the time to discuss this issue here on your website.

    Look at my web blog: dietformula

  10. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically
    tweet my newest twitter updates. I’ve been looking for
    a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading your blog and
    I look forward to your new updates.

    my web page :: Injustice: Gods Among Us Cheats

  11. Greetings from Colorado! I’m bored to tears at work so I dcided to check out your website on my iphone during lunch break.
    I love the info you present here and can’t wait to take a look when I gett home.
    I’m amazed at how qiick your blog loaded on mmy cell phone ..
    I’m not even using WIFI, jjust 3G .. Anyhow, superb blog!

    Also visit myy blog post … patio blinds (Ronda)

  12. High-level ranked matches of Supreme Commander are short, and
    the game’s simplistic and disappointing low-end units means that such short matches never
    compare to games like Dawn Of War or even Starcraft, which are designed with short matches in mind.
    This will help eliminate the unconscious snacking that
    is so much a part of being overweight. Health and fitness are
    more important for most of us than the beauty standards
    that society imposes upon us.

  13. Smoking is a physical habit, not just a drug habit.
    The electronic cigarette is making the new generation of smoking popular all over the world.
    Every Amerismoke cartridge is the same as 30 cigarettes, each cartridge
    of Amerismoke can be purchased in 7 seven different
    flavors you can choose such as Strawberry, Coffee,
    Tobacco, Vanilla, Menthol, Chocolate and Apple.

  14. IR night vision The door bell phone support IR night vision. 35K resistor across these pin-outs shunts the
    IC to the above gain. In today’s day and age, nothing could be further from the
    truth.

  15. I blog often and I truly appreciate your content.
    This great article has truly peaked my interest.
    I am going to take a note of your blog and keep checking for new information about once per
    week. I opted in for your RSS feed too.

  16. What i do not understood is in truth how
    you’re now not really a lot more well-favored than you may be right now.
    You’re so intelligent. You recognize therefore considerably with regards to
    this subject, made me in my opinion consider it from numerous varied angles.

    Its like men and women don’t seem to be fascinated unless it is something to do with Girl gaga!
    Your individual stuffs outstanding. At all times handle it up!

  17. If you’re hanging pictures that aren’t a “set” and are different
    dimensions, then here are some further tips:.
    When deciding upon a scale, you should make sure that the platform is big enough for
    your needs. This will help you become aware of the foods that you eat and
    the way in which you eat them.

  18. I blog quite often and I genuinely thank
    you for your information. This article has really peaked my interest.
    I am going to book mark your website and keep checking
    for new information about once per week.
    I subscribed to your Feed too.

  19. What’s up everyone, it’s my first pay a visit at this web site,
    and paragraph is in fact fruitful designed for me, keep up posting these
    types of articles or reviews.

  20. great post, very informative. I ponder why the opposite experts of this sector do not notice this.
    You should continue your writing. I’m sure, you have a
    huge readers’ base already!

  21. wonderful put up, very informative. I wonder why the other
    specialists of this sector do not realize this.

    You should proceed your writing. I’m sure, you’ve a great
    readers’ base already!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>