Create a second accent color in Windows Phone 8.1 (kinda)

May 17, 2014

no comments

Windows Phone has the notion of an “accent color” that appears as the default background for transparent tile areas on the home screen; apps use it extensively for various purposes as they assume the user really likes that color.

Personally, I like darker colors with the dark theme on the home screen, as the white text is clear and pleasant. However, apps that use the accent color for text on a black background make the text hard to read sometimes. In these cases I wish I had selected a brighter accent color.

With Windows Phone 8.1 we can actually achieve this effect by using a different color for the home screen tiles. This is based on a new WP 8.1 capability of selecting a picture to be used as the background behind tiles on the home screen:

clip_image001

Clicking “Choose Photo” allows selecting a picture making it the background of home screen tiles. Here’s an example for one of the stock images from the phone:

clip_image002

I must admit I don’t like the use of a “real” picture here, as it’s mostly distracting and making some text appear unclear as various picture pieces interact with the tile at that location. However, we can use a picture of a single solid color to make an effect of a “second” accent color, but just for the home screen.

All we need to do is create a solid color image and save it as a picture to the phone. I’ve created a little app that does just that (there are actually apps in the Store that do it as well). Here’s what it looks like:

clip_image003

The slider allow changing the RGB values, while the lower rectangle shows the resulting color.

The interesting part is of course the saving of the picture given the colored rectangle. I’ve used a WP Universal App for this, although I could have used the Silverlight model. But it’s a good idea to get used to working with WP Universal apps, leveraging the WinRT API and not the Silverlight one, going forward.

First, we’ll create a new file in the pictures library and obtain a stream for accessing its contents:

private async void OnSavePicture(object sender, RoutedEventArgs e) {

     var file = await KnownFolders.SavedPictures.CreateFileAsync(

“background.png”, CreationCollisionOption.GenerateUniqueName);

     using(var stm = await file.OpenAsync(FileAccessMode.ReadWrite)) {

 

Next, we’ll render the rectangle’s contents into a RenderTargetBitmap:

var bmp = new RenderTargetBitmap();

await bmp.RenderAsync(_rect, 64, 64);

 

I’ve selected a 64 by 64 pixels image, but the size doesn’t really matter, as the image is stretched as needed for the home screen use. A different size might be needed if the image was for (say) a gradient color (with a LinearGradientBrush); in our case, any size will do.

Finally, we’ll create a PNG encoder with the output stream pointed to file and encode the resulting bitmap using the encoder to that file stream:

   var encoder = await BitmapEncoder.CreateAsync(
      BitmapEncoder.PngEncoderId, stm);
   var bits = await bmp.GetPixelsAsync();
   encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, 
      (uint)bmp.PixelWidth, (uint)bmp.PixelHeight, 0, 0, bits.ToArray());
   await encoder.FlushAsync();
}

 

And that’s it. The user now needs to pick the saved bitmap from the Theme settings page (there’s no programmatic way to do that, as this should be an explicit user choice).

We can expand this idea to create gradients, various shapes, etc. I think synthetic creations here are somewhat more interesting than real live pictures.

You can download the code here.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*