CODEWITHSUNDEEP
c#windows-8windows-8.1windows-phone-8.1
Philippe Maes
Philippe Maes

Reputation: 510

Images in Windows Phone 8.1 livetiles aren't sharp

I create livetiles with the following code:

// wide 310x150
var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWide310x150PeekImage03);
tileXml.GetElementsByTagName(textElementName).LastOrDefault().InnerText = string.Format(artist + " - " + trackname);
var image = tileXml.GetElementsByTagName(imageElementName).FirstOrDefault();
if (image != null)
{
    var src = tileXml.CreateAttribute("src");
    if (albumart == String.Empty)
        src.Value = "Assets/onemusic_logo_wide.scale-240.png";
    else
        src.Value = albumart;
    image.Attributes.SetNamedItem(src);
}

// square 150x150
var squaredTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150PeekImageAndText01);
squaredTileXml.GetElementsByTagName(textElementName).FirstOrDefault().InnerText = string.Format(artist + " - " + trackname);
image = squaredTileXml.GetElementsByTagName(imageElementName).LastOrDefault();
if (image != null)
{
    var src = squaredTileXml.CreateAttribute("src");
    if (albumart == String.Empty)
        src.Value = "Assets/onemusic_logo_square.scale-240.png";
    else
        src.Value = albumart;
    image.Attributes.SetNamedItem(src);
}

updater.Update(new TileNotification(tileXml));
updater.Update(new TileNotification(squaredTileXml));

The problem I face is that the images shown on the livetile aren't sharp (in the app they are). I think this is because of the 310x150 pixels size of the template. I looked at the templates, there aren't any higher resolution ones. Is there a way to make the images sharper?

Upvotes: 1

Views: 406

Answers (1)

Philippe Maes
Philippe Maes

Reputation: 510

I noticed that providing an image with a resolution of exactly 744x360 pixels solves the problem. So I wrote this function to resize my albumarts (maybe it will come in handy for someone);

private async static Task<string> CropAndSaveImage(string filePath)
{
    const string croppedimage = "cropped_albumart.jpg";

    // read file
    StorageFile file = await StorageFile.GetFileFromPathAsync(filePath);
    if (file == null)
        return String.Empty;

    // create a stream from the file and decode the image
    var fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
    BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);

    // create a new stream and encoder for the new image
    using (InMemoryRandomAccessStream writeStream = new InMemoryRandomAccessStream())
    {
        // create encoder
        BitmapEncoder enc = await BitmapEncoder.CreateForTranscodingAsync(writeStream, decoder);
        enc.BitmapTransform.InterpolationMode = BitmapInterpolationMode.Linear;

        // convert the entire bitmap to a 744px by 744px bitmap
        enc.BitmapTransform.ScaledHeight = 744;
        enc.BitmapTransform.ScaledWidth = 744;
        enc.BitmapTransform.Bounds = new BitmapBounds()
        {
            Height = 360,
            Width = 744,
            X = 0,
            Y = 192
        };

        await enc.FlushAsync();

        StorageFile albumartfile = await ApplicationData.Current.LocalFolder.CreateFileAsync(croppedimage, CreationCollisionOption.ReplaceExisting);
        using (var stream = await albumartfile.OpenAsync(FileAccessMode.ReadWrite))
        {
            await RandomAccessStream.CopyAndCloseAsync(writeStream.GetInputStreamAt(0), stream.GetOutputStreamAt(0));
        }

        // return image path
        return albumartfile.Path;
    }
}

Upvotes: 1

Related Questions