Creating dynamic Windows Phone 7 live tile images client side

One of the best parts of windows phone that makes Windows Phone stand out are the live tiles. Microsoft enables you to do a few out of the box customizations to the live tiles but  when you want to go all out most people think you’ll need to generate the images on a server using ASP.NET and then send them to the application as a notification. This is not always the case, you can also create custom tiles client side running on your phone to show custom messages or imitate the outlook tile for example with a number of how many unread messages you have.

First lets sum up what you can do by default and after that we’ll go into going beyond this and creating even better live tiles by adding multiple images or multiple texts to a live tile using the colors and fonts of your choice.

By default you can set the following properties on a live tile

  • Title (shown in the bottom left)
  • Count (black circle with a number between 1 and 99)
  • BackGroundImage (image to show on your tile)
  • BackTitle (shown in the bottom left on the backside of the tile)
  • BackContent (piece of text shown on the backside of the tile)
  • BackBackGroundImage (Image on the backside of the tile)

Ok this is pretty cool but what if we want to make something like Runkeeper does in their app as shown in the following picture:runkeeper live tile

So how do we generate such image on the client side in Silverlight? The trick behind all this is that you can render a user control as a WriteableBitmap and store this image in the isolated storage of your phone so you can use it as the tile BackGroundImage. The final working codesample is linked at the bottom of this post but I’ll show all code to build this example in this blogpost.

We start of creating a new Silverlight for Windows Phone project. Normally I would use MVVM but for this example I want to make it as simple as possible to focus on the tile part.

We’ll create a new UserControl called “TileControl” which is going to be used as our live tile and a “TileData” class to be used for containing the data we’ll be showing on the  live tile.

   1: public class TileData

   2: {

   3:     public string Text1 { get; set; }

   4:     public string Text2 { get; set; }

   5:     public string ImageSource { get; set; }

   6: }

Create the TileControl, set it to 173 by 173pixels and set the background to use PhoneAccentBrush so the live tile has the color the user has selected. Lets make our designers happy and open up the TileControl in expression blend so our designers (or if you are a devigner you!) can design our live tile with dynamic data.

Add a few text boxes and a image to the control so you have something like this:

   1: <Grid x:Name="LayoutRoot" Width="173" Height="173" Background="{StaticResource PhoneAccentBrush}">

   2:     <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="24"/>

   3:     <TextBlock Margin="0,64,-17,-3" TextWrapping="Wrap" FontSize="64" HorizontalAlignment="Right" Width="70" Foreground="White"/>

   4:     <Image Margin="6,55,0,13" Width="100" HorizontalAlignment="Left"/>

   5: </Grid>

In the Data window click the icon “Create sample data from class” and select the TileData class.

create sample data

Edit the sample data so we have some nice data to show. I used the following data:

   1: <CustomLiveTileExample:TileData xmlns:CustomLiveTileExample="clr-namespace:CustomLiveTileExample" 

   2: ImageSource="ApplicationIcon.png" 

   3: Text1="The first Text"

   4: Text2="9"/>

Now drag the fields from the test data window to the text and image control to bind them. After this your XAML should look like this and the design surface should already show a nice live tile with an image and 2 texts. In our code we’ll databind this control to a programmatically filled TileData object.

   1: <Grid x:Name="LayoutRoot" Width="137" Height="137" Background="{StaticResource PhoneAccentBrush}" d:DataContext="{d:DesignData /SampleData/TileDataSampleData.xaml}">

   2:     <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="21.333" Text="{Binding Text1}"/>

   3:     <TextBlock Margin="0,50,-10,11" TextWrapping="Wrap" FontSize="48" HorizontalAlignment="Right" Width="70" Foreground="White" Text="{Binding Text2}"/>

   4:     <Image Margin="12,51,65,17" Width="60" Source="{Binding ImageSource}"/>

   5: </Grid>

blend tile

The live tile is ready so lets head back to the main page of our application and add the logic to set the live tile. To trigger the creation of the live tile I’ve added a button on the page and attached a click event. in the button1_Click method I’ll add all code needed to create the live tile.

   1: private void button1_Click(object sender, RoutedEventArgs e)

   2:         {

   3:             TileControl frontTile = new TileControl();

   4:             TileData tileData = new TileData() { ImageSource = "/ApplicationIcon.png", Text1 = "The first text", Text2 = "8" };

   5:             frontTile.DataContext = tileData;


   7:             frontTile.Measure(new Size(173, 173));

   8:             frontTile.Arrange(new Rect(0, 0, 173, 173));

   9:             var bmp = new WriteableBitmap(173, 173);

  10:             bmp.Render(frontTile, null);

  11:             bmp.Invalidate();


  13:             var isf = IsolatedStorageFile.GetUserStoreForApplication();

  14:             var filename = "/Shared/ShellContent/tile.jpg";


  16:             if (!isf.DirectoryExists("/Shared/ShellContent"))

  17:             {

  18:                 isf.CreateDirectory("/Shared/ShellContent");

  19:             }


  21:             using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))

  22:             {

  23:                 bmp.SaveJpeg(stream, 173, 173, 0, 100);

  24:             }


  26:             var data = new StandardTileData

  27:             {

  28:                 BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute)

  29:             };


  31:             ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), data);

  32:         }

First we’ll create a TileControl object called frontTile, then we’ll fill it with our tileData by creating a TileData object and setting the DataContext to tileData. After this we’ll create a WriteableBitmap and set it to 173 by 173 pixels. Well use the Render method to render the usercontrol as a bitmap.

After that we’ll check if the directory in the isolated storage exists and if it doesn’t we’ll create it. After that we’ll open the tile file and use the SaveJpeg method to save the WritableBitmap as a .jpg file (bit of a shame you can’t do png that’s why we’ve set the background color to the PhoneAccentColor). after saving the image the only thing we need to do is Call Create on the ShellTile and we’re done.

Lets run the app, press the button and there it is, our dynamically created livetile.

app1    app2

Download Sample project:

Happy coding!

Geert van der Cruijsen

Share on Facebook
Kick It on
Shout it
Post on Twitter

MIX 09 Keynote: Introducing Silverlight 3.0 (Beta available NOW!!!)

When I came home about an hour ago I turned on my mediacenter pc to listen to some mp3's when I thought.. Hey wasn't MIX 09 starting today? Maybe I can check out some video's already like I could with the pdc.

When I browsed to the Keynote was played LIVE in silverlight :) Scott Guthrie was already talking about and after that he started talking about Silverlight 3.0

Silverlight 3.0 is going to bring us some pretty cool stuff like Hardware 3d acceleration and multitouch support. These functions ofcourse are pretty cool but are they really usefull? one of the most important things Scott also announced was SEO optimization for Silverlight 3.0.

In Silverlight 3.0 you will be able to store points in your applications from where you can browse from and to by using your forward / back buttons but you're also able to create a bookmark and ofcourse the most important part is that it can be indexed by search websites so they can link to specific locations in the silverlight 3.0 app.

Another cool thing in Silverlight 3.0 is that if you build an application using some external libraries that the libraries can and will be downloaded only when they are used. and when you use the same library in a different silverlight app it will use your already downloaded version instead of pulling it from the server again saving bandwidth.

Sketchflow is a new feature build in Blend 3.0 which will enable you to create sketches of your design rapidly by dragging and dropping wiggely controls (pencil drawn looking controls) on a screen. You can also create a flow of the application fluently by creating several screens and connecting them together. After this you can add functionality to some navigation buttons (without writing code) to navigate from 1 screen to another. After this you can change your sketches to real working code and you’re done!

Multi Tier Data is another new feature which is working like a proxy representation of your data on the server inside your silverlight app. You can databind your controls to the proxy data and if you update the data it will automatically be synced with the server. It’s also possible for the server to push changes in the data to the client so you don’t have to poll the server anymore.

Scott rounded up his presentation telling that the current silverlight 3.0 package is smaller than the current silverlight 2.0 package and the beta 1 is released today! You can download it at:

Scott didn’t say anything about a final release date but he did mention later this year (so probably q4)

I really like the changes and can’t wait to start playing with SL 3.0

Geert van der Cruijsen


Share on Facebook
Kick It on
Shout it
Post on Twitter

Silverlight Design Pattern: the Model View ViewModel (MVVM)

Hi There,

The Customer where I'm currently working at asked me if i could build him a Silverlight 2 app. I've been playing around with Silverilght quite a bit but i haven't really used any design patterns so i came to the idea to search the web if there are any specific Silverlight design patterns.

The only really big pattern i found was the MVVM Model View Viewmodel pattern. This isn't a completly new design pattern (Martin fowler calls it the Presentation Model Pattern)

If you know the MVC pattern which you probably do know this is somewhat alike. The model is your layer which connects to the data and the view is ofcourse xaml based in silverlight. So what does the ViewModel do? The viemodel is used to build specific models for each view in your silverlight app so you can have full advantage of the strong databinding in Silverlight.

There are quite some resources about this pattern which i'll link down here:

I'll be using this pattern at my current assignment and afterwards i'll blog about the results :)

Geert van der Cruijsen

Share on Facebook
Kick It on
Shout it
Post on Twitter

Silverlight 2 and Flash 10 put to the test

Today a colleague of mine send me a link of a very cool site:

The guy who build the site is a webdeveloper with 6 years experience in building flash apps and 1 year of Silverlight experience. On his blog are a lot of apps build both in Flash and Silverlight. Some examples are: loading a big external image into the silverlight / flash app and a fps stress test.

It's very cool to see that the output of both platforms is almost equal, though in most test Silverlight is performing a bit better then Flash 10.

Also if you look at the code that is used in both examples you have to say that programming in Silverlight is a more pleasant experience.

Both platforms have strengths and weaknesses. Microsoft has visual studio which is far out the best IDE out there. Adobe on the other had has the best tools for designers.

The battle for best rich internet platform rages on!


Geert van der Cruijsen

Share on Facebook
Kick It on
Shout it
Post on Twitter

Silverlight 2 Control Toolkit ready for download

Yesterday Microsoft released the first version of the Silverlight Extended controls suite on Codeplex.

This control suite contains a number of special controls that are now available for the public to download and use in their own projects.

an example of what kind of controls are included in the toolkit:

  • TreeView
  • Charts
  • Expander
  • AutoComplete
  • NumericUpDown

On the codeplex site there are online demos of all controls which are included in the toolkit and the controls are also documented in the wiki on the page.

 Example of how the Treeview looks and how you use it:


Example of the AutoCompleteBox and how to use it in your xaml code: 


You can check out the online demos at codeplex: Controls demo and the Charting Demo

I really think Microsoft did a great job at offering these controls to the community and it will make developing in silverlight easier for everyone.

I liked the Charting part the most and i really look forward in using that in my projects in the future. Just look at how nice these controls look and how easy you can fit them into your project:

Geert van der Cruijsen

Share on Facebook
Kick It on
Shout it
Post on Twitter

Silverlight 2 Release Candidate Available

Last night Microsoft released the first release candidate for Silverlight 2.0.


There are a few new controls added in this release: the Combobox, passwordbox and the progressbar.

you can download the new silverlight release candidate at:

on Scott Guthries weblog there is a nice explanation on how these new controls work.

New Silverlight controls

the new silverlight Controls (Combobox, passwordbox and the progressbar)


note that only the developer tools and runtime are released and not regular silverlight runtime. This is done so developers have time to upgrade their applications before silverlight 2.0 RC1 is actually released to the public.

Happy coding!

Geert van der Cruijsen

Share on Facebook
Kick It on
Shout it
Post on Twitter

Comparison of Microsoft Silverlight 2 and Adobe Flex by an Adobe Evangelist

I've found a nice read on a comparison between Microsoft's Silverlight and Adobe Flex by an Adobe Evangelist who took a 3 day Silverlight 2 training.

The weblog post starts of with summarizing the good and bad things of Silverlight but it's also nice to read the comments where a big discussion starts between Microsoft employees, Adobe employees and other developers/designers that have to choose between these 2 technologies.

Things he likes about Silverlight:

  • “The first thing I really like is the concept of threading. Being able to spawn off complex tasks without choking the main thread is pretty cool. You could, for example, show a really smooth animation when you are loading a bunch of data in a separate thread.”
  • “A Silverlight application can directly communicate with the HTML document it is hosted on by simply setting a parameter.”
  • “Being able to code in either C# or VB.NET is also a great feature. Especially since these two languages are pretty familiar to people developing for the Windows platform. I’m not one of them, but I found that C# is similar to ActionScript. Next to those languages you also have XAML, which does more or less the same things as MXML.”

    after that he tells us the things he doesn't like about Silverlight:

  • Code in XAML and C# is really verbose.”
  • “Styling controls is an absolute nightmare! I honestly think that this is going to be Silverlight’s Achilles’ heel!”
  • “Another thing that I really couldn’t grasp is the lack of HTML tag support in text fields.”
  • “I know the Expression tools are still in beta, but it has to be said that all the tools (including Visual Studio, which is no longer in beta) felt extremely buggy and incomplete.”
  • “Over these three days, I got a strong feeling that Silverlight was created by people who don’t know anything about designers.”

    In my opinion Silverlight and Adobe Air/Flex can both be big and good in their own things and eventually they will start growing towards each other as .Net and Java are also doing. Adobe has its huge designers userbase while Microsoft has a very big developers userbase. I think Adobe will stay the best thing to use for really nice fancy looking webtools while Silverlight will focus itself on the real rich internet Applications instead of websites which will stay the big focus of Adobe.

    I do agree with him that styling can be pretty hard for designers which aren't used to set all those properties and maybe Silverlight is a bit TOO extensible for them. As an example he shows how to change the rotation of an object in Silverlight and Flex:

    Microsoft Silverlight Adobe Flex

    <RotateTransform Angle="45"/>

    <Button rotation="45"/>

    I can see a designer will like the simple rotation property but Microsoft gives us (developers) the option to do all kinds of transformation on the object which is more extensible then the way it's done in Flex.

    About the point where he is complaining about how buggy everything is, I think this changed in a good way from Silverlight 2 Beta 1 to Beta 2 and I'm sure that everything will be really stable at the final release. (of course Visual studio isn't in beta… but the Silverlight developer tools are so that's why Visual studio isn't always that stable while building Silverlight applications at the moment)

    I do think Microsoft will have a hard time to get designers to change to Silverlight from their loved environment which they already know but only time will tell.

    Geert van der Cruijsen

    Share on Facebook
    Kick It on
    Shout it
    Post on Twitter

    Display Picture Metadata in your Silverlight 2.0 Deepzoom Application

    As i promised 2 days ago here’s my post about how to display metadata of sub images in your Silverlight Deepzoom Application. I already typed this post yesterday but because of a stupid mistake i lost my post and now I have to type it again :( (but I think I’ll make it a bit shorter)

    To start building your Silverlight 2.0 deepzoom application download Deepzoom Composer from Microsoft here. This tool works quite easy. just add some images in the “import” mode then drag them on your screen in the “compose” mode and then export your deepzoom Project.

    If you want to be able to identify the different sub images in your Multiscaleimage object check the “Create Collection” checkbox.


    After exporting this will be the result:


    Now to load up this collection of pictures into your own project take a look at this weblog, there is a really good explanation on which steps to take and after you did all those steps i’ll explain how to show metada of the different subimages in the deepzoom application.

    So if you are at this point you should have your own working deepzoom application and you want to add picture metadata to your project. If not go back to this weblog or try one of these.

    The only way of identifying the different sub images in the big multiscaleimage is by the Z-Order of the different images. So how do you know which image has what Z-Order you ask? thats where the generated SparseImageSceneGraph.xml comes in which was generated by the Deepzoom Composer.


      <FileName> P1000558.JPG</FileName






      <Description>Uitzicht van hotelkamer</Description>



    As you can see i added my own Description element to every SceneNode in the generated xml so we can use it in our project. We’ll use this xml file to query the ZOrder of the subimage and get the description as a result with the use of Linq.

    To do this we’ll first have to open the xml file in our code behind page from the page.xaml.cs.

    deepZoomObject.Loaded += delegate(object sender, RoutedEventArgs e)


        _xmlImageMetadata = XDocument.Load(“SparseImageSceneGraph.xml”);



    After that we’ll add code to display the metadata when the mouse moves over a sub image in the multiscaleimage.

    deepZoomObject.MouseMove += delegate(object sender, MouseEventArgs e)


        if (mouseButtonPressed) 


            mouseIsDragging = true




            ImageName.Text = GetMetadata(e.GetPosition(deepZoomObject)); 


        lastMousePos = e.GetPosition(deepZoomObject);



    Then we add the function GetMetadata which queries the xml file and gets the description from it.

    private string GetMetadata(Point point)


        Point p = deepZoomObject.ElementToLogicalPoint(point); 

        int subImageIndex = SubImageHitTest(p);

        if (subImageIndex >= 0) 


            var q = from c in _xmlImageMetadata.Elements(“SceneGraph”).Elements(“SceneNode”

            where ((string)c.Element(“ZOrder”)) == (subImageIndex + 1).ToString()

            select (string)c.Element(“Description”); 

            if (q != null)


                return q.Single();



                return “”



            return “”;



    This function uses the function SubImageHitTest which I copied from this weblog:

    int SubImageHitTest(Point p)


        for (int i = 0; i < deepZoomObject.SubImages.Count; i++) 


            Rect subImageRect = GetSubImageRect(i); 

            if (subImageRect.Contains(p))           

                return i; 

        } return -1;



    Rect GetSubImageRect(int indexSubImage)


        if (indexSubImage < 0 || indexSubImage >= deepZoomObject.SubImages.Count)        

            return Rect.Empty;

        MultiScaleSubImage subImage = deepZoomObject.SubImages[indexSubImage]; 

        double scaleBy = 1 / subImage.ViewportWidth;

        return new Rect(-subImage.ViewportOrigin.X * scaleBy, -subImage.ViewportOrigin.Y * scaleBy, 1 * scaleBy, (1 / subImage.AspectRatio) * scaleBy);



    if you build and start your application now you should be able to see your added metadata when you mouseover a sub image in the MultiscaleImage.

    My working example can be found here:

    sourcecode can be downloaded here:

    (you’ll have to add your own deepzoom object since i removed that from the zip file)


    Happy Coding!


    Geert van der Cruijsen

    kick it on

    Share on Facebook
    Kick It on
    Shout it
    Post on Twitter

    Build your own Silverlight 2.0 Deepzoom application and host it with “Silverlight Streaming”

    A few weeks back on MIX'08 Microsoft showed us a stunning demo including new technologies like Seadragon and Silverlight 2.0.

    This demo showed us the collection of memorabilia at Hardrock Cafe. The demo can be found at

    This demo really got my attention and after some searching on the internet i found out i wasn't the only one. There are hundreds of blogposts by people showing how you can build this for yourself and guess what: it's really easy!

    I've spend some days in the weekend and this evening building my own version of a Silverlight Deepzoom Application. Most of my code is "borrowed" or copied from other blog posts which i'll list at the bottom of this post. My goal was to also be able to show metadata at the pictures and after some research it wasn't to hard to do this either. Since i didn't find any other blog posts who explained how to show metadata with your pictures i'll make a seperate blogpost about this tomorrow.

    I've put some of my last vacation photo's online in my own deepzoom test application at: (source also linked on that page)

    Download Source: 

    As i said before i won't go explaining the code in this post because i'm gonna do that tomorrow in a separate post where i'll explain how to add metadata to your deepzoom application. if you want more information about Silverlight and Deepzoom check out the following links:

    how it works:

    lots of how-to's:

    more info on silverlight 2.0

    Another cool thing i found out is that Microsoft is offering is a hosted environment for your silverlight applications. You can get up to 10GB of free space at Silverlight Streaming:

    You can upload your Silverlight manifest files + other resource files like video's to Silverlight Streaming and you can link your silverlight object on your own page. The silverlight object in my own example is also hosted at Silverlight Streaming.

    If you have any questions or recommendations about this subject please dont hesitate to send me a mail about it.

    Geert van der Cruijsen

    kick it on


    Share on Facebook
    Kick It on
    Shout it
    Post on Twitter

    Volta or Silverlight 2.0

    Last Wednesday evening we had a presentation at the Avanade Netherlands office about Volta and what Volta could do for us in the future. The demo in the presentation showed us the possibilities that Volta can bring to software developing on the web. After this presentation we had a cool discussion about the question if Volta will really make it to the daily life of web based software development.

    In my opinion with my current knowledge about Volta is that a lot of pro’s of Volta are also taken away by using Silverlight 2.0 on the client instead of html/javascript. I’ll sum up most pro’s of using Volta and then compare then to the use of Silverlight 2.0. Ofcourse most things said in this post are just my current ideas and opinions on the 2 projects which are far from complete products today.




    Some pro’s on volta are: Dynamic/easy switching of the place where code is being executed. You can add a single line of code in a class and make it completely run on the client instead of on the server. If you want your code to run on the client Volta will generate javascript from your .net code after it’s compiled to the IL.

    This power of volta makes it easy to just generate all your javascript instead of writing it all by yourself. Everyone knows writing/debugging loads of javascript can be a pain in the ass so of course it’s nice to program in C# or any other .net language you like. You can even set breakpoints on the c# code which you created and step through this when you are actually running generated javascript at that time.

    Volta can also generate javascript which is compatible with the browser which is doing the current request so you don’t have to think about cross browser compatibility anymore.

    All in all at the time Volta will be a fully grown product you can write your whole web application in 1 language instead of also having to write javascript to get your fancy web 2.0 look and feel on your web app.

    After seeing the presentation about Volta I thought the only big feature Volta can bring is the possibility to dynamically change parts of code to run on the client or server. The other nice features are also brought to us with Silverlight 2.0 which makes it possible to write C# for the client side instead of javascript. In my opinion Silverlight even has more and better options to do this because  you have more powerfull tools in the Silverlight runtime which make it possible to make even fancier tools then you can in Javascript. One big example of something Silverlight can do which javascript will never do is that you can make real statefull apps instead of the stateless pages you’ll keep building in Javascript. Opening sockets to the server will never been done by javascript while it is easy to do in Silverlight 2.0


    So if javascript is going away in both cases what does Volta bring that silverlight can’t handle? The only big thing that is left is changing your code to run on the server/client by adding a line of code to your class. Ofcourse this can be a really powerfull thing but in my opinion this wont be used that often and especially not in enterprise applications where my focus on my job is at.

    In my opinion Silverlight 2.0 can become a really big revolution on the web IF and only IF Microsoft does everything it can to get the silverlight plugin on ALL pc’s as soon as possible (ofcourse after Silverlight 2.0 is released) The plugin has to be available for every browser no matter what OS. No matter what type of computer. Desktop or mobile. Everyone with Linux and Firefox or Windows and IE will have to get this plugin which has same functionality. So in my opinion Microsoft should develop the plugin for all browsers instead of only for windows+IE and let the moonlight project reverse engineer this plugin for a plugin that runs on linux. Volta instead of Silverlight doesn’t have this problem because the javascript code that’s being generated already runs on all sort’s of browsers on all OS’es.

    We’ll have to see what the future brings but my money is on Silverlight being installed on 95% of all pc’s in a year or 2 so we don’t have to generate Javascript but can just make flashy c# code on the client.

    Another option can also be that Volta will be generating Silverlight code instead of javascript so we get the best of both worlds :)

    Do you have a different opinion? Please let me know in a comment!

    Share on Facebook
    Kick It on
    Shout it
    Post on Twitter