Ever since Windows Phone came out, I have always contended that Live tiles are the coolest feature and one that is :

1) Not on any other platform (Yes, I know that Android has widgets… not the same thing)

2) A great way to drive people into your application. (Which you want if it is add based.)

I will do another post later about why you should do Live Tiles from a Monetizing standpoint, but for this post, I just want to show you how easy it is to work with live tiles.

To begin with, live tiles have been around since 7.0 but to really take advantage of them you had to use Push Notifications.  While this is not THAT difficult, it did add quite a bit of complexity and the need to host your own service (or use scheduled tiles).  In the Mango release, we have made 4 great additions to live tiles.

1) You can change the live tiles from your code.

2) You can create secondary tiles to deep link into specific pages of your application

3) You can write on the back of tiles and have them flip

4) You can use background process to have them change when not even in your application

To create and modify live tile is fairly simple.

This firs thing we want to do is create a simple windows phone page that has three buttons on it:

• Create App Tile
• Create Second Tile
• Delete Secondary Tile

Next we need to go to code behind and add a using statement for the phone shell.

using Microsoft.Phone.Shell;

Then inside the first button click we add the following code :

 private void button1_Click(object sender, RoutedEventArgs e)
        {

            //Tile is always the first Tile, even if not pinned .
            ShellTile TileToFind = ShellTile.ActiveTiles.First();

            if (TileToFind != null)
            { 

                StandardTileData NewTileData = new StandardTileData();

                NewTileData.Title = "My Cool Tile";
                NewTileData.BackgroundImage = new Uri(
                    "CoolTile.jpg", UriKind.Relative);
                NewTileData.Count = 5;

                NewTileData.BackTitle = "Tiles Got Back";
                NewTileData.BackBackgroundImage = new Uri(
                    "CoolTileBack.jpg", UriKind.Relative);

                TileToFind.Update(NewTileData);

            }

        }

• The first thing we do is get a reference to the Live Tile that comes with your application. (TileToFind)
• Once we have a reference to it we can create our new tile data using the StandardTileData class.
• We set the properties including the image we want on the live tile (a 173 by 173 png or jpg… make sure that your image is set to “content” in your project or you will not see it)
• Next we set the back of the tile
• And finally call the update method to change the live tile.

That is all you need to do to change your live tile.

If you want to create a secondary tile, it is slightly different.

for the second button click event we do the following

private void button2_Click(object sender, RoutedEventArgs e)
        {
            ShellTile SecondTile = ShellTile.ActiveTiles.FirstOrDefault(
                x => x.NavigationUri.ToString().Contains("Page2.xaml"));

            StandardTileData NewTileData;
            NewTileData = new StandardTileData();

            NewTileData.Title = "Secondary Tile";
            NewTileData.BackgroundImage = new Uri(
                "CoolTile.jpg", UriKind.Relative);
            NewTileData.Count = 5;
            NewTileData.BackTitle = "Second Tiles Got Back";
            NewTileData.BackBackgroundImage = new Uri(
                "CoolTileBack.jpg", UriKind.Relative);

            if (SecondTile == null)
            {
                ShellTile.Create(new Uri(
                    "/Page2.xaml", UriKind.Relative), NewTileData);
            }
            else
            {
                SecondTile.Update(NewTileData);
            }
        }

There are a couple of noticeable change.  To find the secondary tile, we need to search for it since we are not guaranteed that it exists.  We do this by searching the ActiveTiles collection for the NavigationUri of the tile that we set lower in the event.  The only other change is creating the tile if it does not exist.  Otherwise we update it like before.

If you want to run this code in the background so you can change the tile while users are not using the phone. You can check out my post on Background Agents

Enjoy

Related Posts:

• PhoneGap for Windows Phone
• Windows Phone App of the Day–LilDemonsSpplatter
• Nokia Developer Program
• Free Windows Phone Workshops
• Windows Phone App of the Day : FourSquare

Update : My buddy Tim Heuer pointed out that when you are saving an image to the library, you need to make sure that you have the correct orientation.   Instead of repeating the information here, I will instead point you to his great blog post on the subject. GO HERE to check it out.

In the last post, we showed you how to capture a picture in your application when hooking to the ‘extras’ menu on windows phone.  Once you have manipulated the picture you will want to save it in the media library.  In this post we will walk you through the steps to do that.

Once you have made the changes to the picture you captured (Crop, Color, Black and White, whatever), you then want to save your image to IsolatedStorage.

To do this we first need to add a using statement to the top of our class file.

using System.IO.IsolatedStorage;

Remember in our last post we saved the image returned from the camera in a WriteableBitMap.  (see below code above //Save to Global Bitmap)

(This is the code from the last post –  We only added the last line)

MediaLibrary library = new MediaLibrary();              Picture picture = library.GetPictureFromToken(queryStrings["token"]);

              //Create bitmap              BitmapImage bitmap = new BitmapImage();              bitmap.SetSource(picture.GetImage());              WriteableBitmap picLibaryImage = new WriteableBitmap(bitmap);              retrievePic.Source = picLibaryImage;

              //Save to Global Bitmap

              App.CapturedImage = picLibaryImage;

We are going to continue this code by first adding it to a Global Variable placed inside App.xaml.cs called Captured Image

//Global variables for the WriteableBitmap objects used throughout the application.public static WriteableBitmap CapturedImage;

Now that we have that saved globally, we want to first save the picture to IsolatedStorage THEN to the media library.  This would normally be done when an event is fired, like a user clicking a save button.

First save the image to isolated storage

//Create filename for JPEG in isolated storage           String tempJPEG = "TempJPEG.jpg";

           //Create virtual store and file stream. Check for duplicate tempJPEG files.           var myStore = IsolatedStorageFile.GetUserStoreForApplication();           if (myStore.FileExists(tempJPEG))           {               myStore.DeleteFile(tempJPEG);           }           IsolatedStorageFileStream myFileStream = myStore.CreateFile(tempJPEG);

           //Encode the WriteableBitmap into JPEG stream and place into isolated storage.           Extensions.SaveJpeg(App.CapturedImage, myFileStream, App.CapturedImage.PixelWidth, App.CapturedImage.PixelHeight, 0, 85);           myFileStream.Close();

We then use the file we just saved to create a stream so we can save it to the media library

//Create a new file stream.           myFileStream = myStore.OpenFile(tempJPEG, FileMode.Open, FileAccess.Read);

           //Add the JPEG file to the photos library on the device.           MediaLibrary library = new MediaLibrary();           Picture pic = library.SavePicture("SavedPicture.jpg", myFileStream);           myFileStream.Close();

And that’s all you need to do.

In the next post we will show you how to use the WPConnect.exe tool to Debug your application without using Zune.  This allows you to navigate to the pictures hub while still connected to Visual Studio.

Happy Coding – Daniel Egan – DotNetDoc

Related Posts:

• Free Windows Phone
• WP Workshop–Make Millions on Windows Phone
• Become a Developer Evangelist for Windows Phone
• How to build a Giant Windows Phone
• Download the Mango Tools

The launch of the much anticipated Windows Phone7 (WP7) is just around the corner and with it will be the launch of the Windows Phone MarketPlace for WP7.  Now is the time to get the application you have been thinking about for years under way.  There is absolutely nothing stopping you. The tools are completely free and can be found here http://bit.ly/9J7icb 

Starting next week I will begin a series of how-to blog posts/screen casts (depending on the amount of code) that will take you through everything you need to know to get started on WP7.  Among other things we will cover (Not necessarily in this order) :

• The tools and environment
• Working with the Emulator
• Push Service \ Live Tiles
• Location Based Services
• Launchers and Choosers
• The other Sensors (Accelerometer, Proximity,  Compass, etc..)
• Multi-Touch
• And More
• Unlocking and Installing on the phone
• Marketplace and Developer Resources

Start looking for these posts coming next week.  If you have a request for a post or a question you need answered feel free to post a comment or send me an email.

Happy Coding

Daniel Egan

Related articles by Zemanta

Related Posts:

• Free Windows Phone
• WP Workshop–Make Millions on Windows Phone
• Become a Developer Evangelist for Windows Phone
• How to build a Giant Windows Phone
• Download the Mango Tools