windows phone live tile backgroundimage source and stretch problems

Question

Im experiencing problems with the background image at a secondary live tile in my windows phone app, it does not stretch and fit the tile properly (it is a .png image)

I get the data and then create my tile data:

var tileData = new StandardTileData
        {
            Title = titleString,
            BackContent = contentString,
            BackTitle = backTitleString,
            BackgroundImage = new Uri(httpUrlString)                
        };

is there any way to change the stretch or "retemplate" the tile?

Also i found a solution here with a writeablebitmap, but I cannot understand how to give this bitmap as a source, since the backgroundimage property only accepts a Uri

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

You need to resize the image to give it the good aspect ratio (see the answer here)

Then you'll have to save the resulting WriteableBitmap in the Isolated Storage, like this:

        // save image to isolated storage
        using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
        {
            // use of "/Shared/ShellContent/" folder is mandatory!
            using (IsolatedStorageFileStream imageStream = new IsolatedStorageFileStream("/Shared/ShellContent/MyImage.jpg", System.IO.FileMode.Create, isf))
            {
                wbmp.SaveJpeg(imageStream, wbmp.PixelWidth, wbmp.PixelHeight, 0, 100);
            }
        }

You will then be able to create the tile like this:

        StandardTileData NewTileData = new StandardTileData
        {
            Title = "Title",
            // reference saved image via isostore URI
            BackgroundImage = new Uri("isostore:/Shared/ShellContent/MyImage.jpg", UriKind.Absolute),
        };

edited May 23 '17 at 12:27

Community

1
1

answered Sep 11 '12 at 06:43

Olivier Payen

15,198
7
41
70

Thank you for your answer! unfortunately i still havent solved my problem, i tried resizing this way and i get exceptions when creating the writeablebitmap.then i tried this BitmapImage bitmapImage = new BitmapImage(new Uri(img)); Image image = new Image(); image.Width = 173; image.Height = 173; image.Stretch = Stretch.UniformToFill; image.Source = bitmapImage; WriteableBitmap writeableBitmap = new WriteableBitmap(image,null);and then save it as you suggested, but now the image on my tile is black – user970012 Sep 11 '12 at 12:03
What is the size of the original image? What exception do you get? – Olivier Payen Sep 11 '12 at 12:19
the images come from a web source,eg 150 x 106 px also they are in png format, i dont know if thats relevant. the exception is nullreferenceexception, invalid pointer at the writeablebitmap creation – user970012 Sep 11 '12 at 12:33
PNG should be OK. The BitmapImage method should work. Can you try to call writeableBitmap.Invalidate() to force a redraw of the bitmap? – Olivier Payen Sep 11 '12 at 13:16
added writeableBitmap.Invalidate(); before saving, still black :/ – user970012 Sep 11 '12 at 13:30
i found the problem, the image wasnt fully loaded, thats why it wasnt rendered! i had to use the imageopened event, im posting the answer now. thank you very much, i am also using your method afterwards – user970012 Sep 11 '12 at 23:33

score 1 · Answer 2 · answered Sep 11 '12 at 23:35

1

the problem was the image was not fully loaded, and therefore not properly rendered. I used the ImageOpened event and then saved it as Olivier suggested

answered Sep 11 '12 at 23:35

user970012

106
1
9

windows phone live tile backgroundimage source and stretch problems

2 Answers2