Dynamic LiveTile - adding background image?

Question

Working wth live tiles in my Windows Phone 7 app and it's working quite okay.

I'm now trying to create a dynamic live tile and I can't get the background image to show up. When using the code below I only get a black tile. The text I add is shown but not the background image. Image "Build action" is set to "Content".

Any ideas?

StackPanel sp = new StackPanel();
sp.Height = 173;
sp.Width = 173;

string fileName = "tile.jpg";
BitmapImage image = new BitmapImage(new Uri(fileName, UriKind.Relative));
ImageBrush brush = new ImageBrush();
brush.ImageSource = image;
sp.Background = brush;

sp.Measure(new Size(173, 173));
sp.Arrange(new Rect(0, 0, 173, 173));
sp.UpdateLayout();
WriteableBitmap wbm = new WriteableBitmap(173, 173);
wbm.Render(sp, null);
wbm.Invalidate();

Answer 1

I also had problems using BitmapImage and still don't know how to solve it. But I found a workaround using WriteableBitmap:

        // grid is container for image and text
        Grid grid = new Grid();

        // load your image
        StreamResourceInfo info = Application.GetResourceStream(new Uri(filename, UriKind.Relative));
        // create source bitmap for Image control (image is assumed to be alread 173x173)
        WriteableBitmap wbmp2 = new WriteableBitmap(1,1);
        wbmp2.SetSource(info.Stream);
        Image img = new Image();
        img.Source = wbmp2;
        // add Image to Grid
        grid.Children.Add(img);

        TextBlock text = new TextBlock() { FontSize = (double)Resources["PhoneFontSizeExtraLarge"], Foreground = new SolidColorBrush(Colors.White) };
        // your text goes here:
        text.Text = "Hello\nWorld";
        grid.Children.Add(text);

        // this is our final image containing custom text and image
        WriteableBitmap wbmp = new WriteableBitmap(173, 173);

        // now render everything - this image can be used as background for tile
        wbmp.Render(grid, null);
        wbmp.Invalidate();

Answer 2

Try this - it worked for me:

Uri uri = new Uri("tile.jpg", UriKind.Relative);
StreamResourceInfo sri = Application.GetResourceStream(uri);

WriteableBitmap wbm = new WriteableBitmap(173, 173);
wbm.SetSource(sri.Stream);

using (var stream = IsolatedStorageFile.GetUserStoreForApplication().CreateFile("/Shared/ShellContent/tile.png"))
{
    wbm.SaveJpeg(stream, 173, 173, 0, 100);
}

var data = new StandardTileData();
data.BackgroundImage = new Uri("isostore:/Shared/ShellContent/tile.png", UriKind.Absolute);
data.Title = "updated image";

var tile = ShellTile.ActiveTiles.First();
tile.Update(data);

Answer 3

I think the problem is the image is being loaded asynchronously, and therefore not available. I succeeded with this code:

BitmapImage bmi = new BitmapImage();
bmi.CreateOptions = BitmapCreateOptions.None;
StreamResourceInfo streamInfo = 
     Framework.App.GetResourceStream(new Uri(@"images\img.png", 
          UriKind.Relative));
bmi.SetSource(streamInfo.Stream);
imgctl.Source = bmi;

However, I'm still trying to get it to work when loaded from Xaml thus:

<Image  HorizontalAlignment="Center" Width="173" Height="89" x:Name="imgctl" 
    Source="/images/lowsunrise.png"/>

In that case, the image is never loaded, and none of the events fire, probably because it's not connected to the visual tree, and therefore won't be rendered.