Windows Phone - update live tile from background agent with custom image

Question

I am trying to add cloud image to album cover if the cover is loaded from internet. I am trying to do this in Background Audio agent and I think I almost got it. The problem is that I have black image in tile. Few times when testing I got cover image with my cloud image in it but mostly I get black image (and sometimes black image with cloud in it).

Can anyone help me find the problem? Thanks

private void UpdateAppTile()
{
   var apptile = ShellTile.ActiveTiles.First();
   if (apptile != null && _playList != null && _playList.Any())
   {
      var track = _playList[currentTrackNumber];
      var size = 360;
      Uri coverUrl;
      if (track.AlbumArt.OriginalString.StartsWith("http"))
      {
           BitmapImage img = null;
           using (AutoResetEvent are = new AutoResetEvent(false))
           {
               string filename = Path.GetFileNameWithoutExtension(track.AlbumArt.OriginalString);
               var urlToNewCover = String.Format("http://.../{0}/{1}", filename, size);
               coverUrl = new Uri(urlToNewCover, UriKind.Absolute);
               Deployment.Current.Dispatcher.BeginInvoke(() =>
               {
                   img = new BitmapImage(coverUrl);
                   are.Set();
               });
               are.WaitOne();
               var wbmp = CreateTileImageWithCloud(img);
               SaveTileImage(wbmp, "/shared/shellcontent/test.jpg");
               coverUrl = new Uri("isostore:/shared/shellcontent/test.jpg", UriKind.RelativeOrAbsolute);
           }
       }
       else
       {
           var coverId = track.Tag.Split(',')[1];
           var urlToNewCover = String.Format("http://.../{0}/{1}", coverId, size);
           coverUrl = new Uri(urlToNewCover, UriKind.Absolute);
        }

        var appTileData = new FlipTileData
        {
            BackgroundImage = coverUrl,
            WideBackgroundImage = coverUrl,
            ...
        }
        apptile.Update(appTileData);
   }
}

public static BitmapImage LoadBitmap(string iFilename)
{
    Uri imgUri = new Uri(iFilename, UriKind.Relative);
    StreamResourceInfo imageResource = Application.GetResourceStream(imgUri);
    BitmapImage image = new BitmapImage();
    image.SetSource(imageResource.Stream);
    return image;
}

private void SaveTileImage(WriteableBitmap wbmp, string filename)
{
    using (var store = IsolatedStorageFile.GetUserStoreForApplication())
    {
        if (store.FileExists(filename))
            store.DeleteFile(filename);
        var stream = store.OpenFile(filename, FileMode.OpenOrCreate);
        wbmp.SaveJpeg(stream, wbmp.PixelWidth, wbmp.PixelHeight, 100, 100);
        stream.Close();
    }
}

private WriteableBitmap CreateTileImageWithCloud(BitmapImage img)
{
    Image image = null;
    WriteableBitmap wbmp = null;
    using (AutoResetEvent are = new AutoResetEvent(false))
    {
        Deployment.Current.Dispatcher.BeginInvoke(() =>
            {
                image = new Image { Source = img };

                Canvas.SetLeft(image, 0);
                Canvas.SetTop(image, 0);

                var cloud = new BitmapImage(new Uri("Assets/Images/Other/Cloud_no.png", UriKind.Relative));
                var cloudImg = new Image { Source = cloud };

                Canvas.SetLeft(cloudImg, 125);
                Canvas.SetTop(cloudImg, 10);

                var canvas = new Canvas
                {
                    Height = 176,
                    Width = 176
                };
                canvas.Children.Add(image);
                canvas.Children.Add(cloudImg);

                wbmp = new WriteableBitmap(176, 176);

                wbmp.Render(canvas, null);
                wbmp.Invalidate();
                are.Set();
            });
        are.WaitOne();
    }
    return wbmp;
}

Edit I found little pattern in which this is working and in which not. When application is running and I called this twice (in TrackReady and SkipNext) then I very often get cover image with cloud. When I am running just background agent (without running app) I get always black image. And often first UpdateAppTile call is just black image and second it's black image with cloud. That black color is default canvas background so I guess I have problems with delay when loading cover image from url. But I am not sure how in my case use ImageOpened event and if it help.

Answer 1

I think that you should call Measure and Arrange after adding elements to canvas and before rendering canvas (as with other UIElements):

canvas.Measure( new Size( Width, Height ) );
canvas.Arrange( new Rect( 0, 0, Width, Height ) );