Question

How do you create a wp7 tile with a png as background? What I have is a png that is white and transparent. I want the white to show on the tile, but I would also like to write some dynamic data on the transparent part, and how do you do that?

I have tried several different approaches like setting the opacity mask for different elements and write it out to a writeable bitmap but I can’t get it to work properly.

The cowboy code below is what I have right now:

var backgroundUri = new Uri("Graphics/Icon_173.png", UriKind.Relative);
var imageStream = App.GetResourceStream(backgroundUri).Stream;
var bitmapImage = new BitmapImage();
bitmapImage.SetSource(imageStream);
ImageBrush backgroundBrush = new ImageBrush();
backgroundBrush.ImageSource = bitmapImage;
backgroundBrush.Opacity = 100;            

var backgroundRectangle = new Rectangle();
backgroundRectangle.Height = 173;
backgroundRectangle.Width = 173;
backgroundRectangle.Fill = Resources.Brushes.PhoneAccentBrush;
backgroundRectangle.OpacityMask = backgroundBrush;

WriteableBitmap writeableBitmap = new WriteableBitmap(173, 173);
writeableBitmap.Render(backgroundRectangle, new TranslateTransform());

this almost does what I want, I get the background from the background rectangle correct but the mask is black instead of white.

Answer 1

You’re probably not saving the image as a PNG. In your code you left out the save part, but if you use the SaveJPEG method, you’ll obviously not get transparency.

Consider using the SavePNG method from the WriteableBitmapEx library, and see if that works better.

Or you could set the background like this:

backgroundBrush = (Brush)Application.Current.Resources["PhoneAccentBrush"];