Custom live tile rendering issue on Windows Phone (7/8)

Question

In my Windows Phone app's main page, users can click a button to do some stuff and that will trigger the live tile to update.

The problem I am having is, if the user clicks the button and then hit the phone's Back button really quickly, the live tile sometimes will not render properly. This issue rarely happens, but it does happen and when it happens it just looks bad...

The way I implement the live tile is, create a user control that looks exactly the same as the live tile and then save it to isolated storage. Then retrieve it and store it in a FliptileData object. Finally I call the Update method on the ShellTile. Please see the following piece of code to demonstrate the process.

    // the function that saves the user control to isolated storage
    public Uri SaveJpegToIsolatedStorage(FrameworkElement tile, string suffix, int tileWidth = 336, int tileHeight = 336)
    {
        var bmp = new WriteableBitmap(tileWidth, tileHeight);

        // Force the content to layout itself properly
        tile.Measure(new Size(tileWidth, tileHeight));
        tile.Arrange(new Rect(0, 0, tileWidth, tileHeight));

        bmp.Render(tile, null);
        bmp.Invalidate();

        // Obtain the virtual store for the application
        IsolatedStorageFile myStore = IsolatedStorageFile.GetUserStoreForApplication();
        using (IsolatedStorageFileStream fileStream = new IsolatedStorageFileStream(IsolatedStorageFileName + suffix, FileMode.Create, myStore))
        {
            try
            {
                bmp.SaveJpeg(fileStream, tileWidth, tileHeight, 0, 100);
            }
            catch (Exception)
            {
                return null;
            }
        }

        return new Uri("isostore:/" + IsolatedStorageFileName + suffix, UriKind.Absolute);
    }

    // save the user control to isolated storage and prepare the FlipTileData object
    wideFrontTileImage = SaveJpegToIsolatedStorage((UserControl)this.WideFrontTile, "_wide_front", 691);
    var flipTileData = new FlipTileData();
    flipTileData.WideBackgroundImage = wideFrontTileImage;
    return flipTileData;

    // update the live tile
   var shellTile = ShellTile.ActiveTiles.FirstOrDefault();
   shellTile.Update(customTile.GetFlipTileData(data.UndoneMemosCount == "0" && data.TotalMemosCount == "0"));

I think the reason that's causing all this is, when the user clicks the Back button too quickly, the OS terminates all the processes running within the app and the rendering wasn't done at that time. I'm thinking if there's a way to know when the rendering is finished, so I can cancel the Back button and wait until it's finished then manually exit the app. But I simply dunno how...

Any help on this one will be greatly appreciated!

Answer 1

I have ran into similar issue in my WP8 app. The problem was that I was updating my Tile in ApplicationDeactivated event handler. The thing is you should not update your tiles there, but rather in your MainPage.OnNavigatedFrom override. Once I changed this, it works just fine.