CODEWITHSUNDEEP
windows-phone-8windows-phonelive-tile
Ed Ayers
Ed Ayers

Reputation: 1354

CycleTile puts a shadow on my images windows phone

I'm trying to make some tasty live tile action for my windows phone 8 app. I've chosen to use the Cycle Tile template for some awesome gliding images but there is a problem: Microsoft seem to have kindly added a grey translucent filter to all the images so that the title text at the bottom is legible even in the case of a white image. This is annoying if the developer intends to make a metro style collage by using WritableBitmap. Whites come out as an off-white grey and the theme colour is a shade darker than all the other tiles:

WHY!?

The code (in a usercontrol in the visual tree):

    const double TILE_H = 336;
    const double TILE_W = 691;
    Size TILE_SIZE = new Size(TILE_W, TILE_H);
    const string FILEDIREC = "/Shared/ShellContent";

    LayoutRoot.Height = TILE_H;
    LayoutRoot.Width = TILE_W;
    LayoutRoot.Clip = new RectangleGeometry() { Rect = new Rect(new Point(), TILE_SIZE) };
    LayoutRoot.Background = new SolidColorBrush(
        ((Color)Application.Current.Resources["PhoneAccentColor"]));

    TextBlock tb = new TextBlock();
    Canvas.SetLeft(tb, 200.0);
    tb.Text = "Why is this text grey? + lots more text";
    tb.FontSize = 50;
    tb.Width = 300;
    tb.Foreground = new SolidColorBrush(Colors.White);
    tb.TextWrapping = TextWrapping.Wrap;
    LayoutRoot.Children.Add(tb);

    var bmp = new WriteableBitmap((int)TILE_W, (int)TILE_H);
    bmp.Render(LayoutRoot, null);
    bmp.Invalidate();
    var isf = IsolatedStorageFile.GetUserStoreForApplication();
    var filename = FILEDIREC + "/tile.jpg";
    if (!isf.DirectoryExists(FILEDIREC))
    {
      isf.CreateDirectory(FILEDIREC);
    }
    using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))
    {
      bmp.SaveJpeg(stream, (int)TILE_W, (int)TILE_H, 0, 100);

    }
    imageURIs.Add(new Uri("isostore:" + filename, UriKind.Absolute));
    //similar process for other images used by CycleTileData
    //these images then added to CycleTileData in the usual way

Any help, explanation, advise or workarounds to get degreying will be greatly appreciated. Thanks. I've tried using the images in different tile types, eg. the front of the flip tile has no issues.

Upvotes: 2

Views: 177

Answers (1)

Mats Lannér
Mats Lannér

Reputation: 1356

I don't see any obvious issues with the code, but something I would try is to use the Isolated Storage Explorer and download the file and see what it looks like.

When generating custom tiles you may want to consider generating a PNG instead of a JPG. One of the benefits is that you then can generate a transparent image (which means your tile will always have the right theme background color) and PNG also uses a non-lossy compression scheme so there are no compression artifacts introduced.

Take a look at this answer where I describe how I generate tiles in one of my apps. Hopefully that will be of some use to you.

Upvotes: 1

Related Questions