Question

I am using WPF to generate tile images for my WinRT app. I have a tile UserControl which is converted to PNG and this works well (It does, please don’t tell me otherwise). WinRT passes me a scale property 100% (320×150), 140% (434×210) and 180% (558×270) which I use to generate the correct size of image.

For when I want to use images in my tile. I have replicated the image selection functionality of WinRT (You can supply thee scales of images and WinRT apps automatically select the correct scale) in my tile UserControl’s code behind. So depending on the scale I select a bigger or smaller image source. However, on the larger scales my font size remains the same size and looks really small. I don’t think I need to change the font size based on the scale as this is not what happens in WinRT, so it must be the code I’m using to convert my UserControl to a PNG and something to do with DPI. Here is my conversion Code:

// I pass in 320x150 or 434x210 or 558x270 depending on the scale.
public static MemoryStream ToPng(
    this FrameworkElement frameworkElement, 
    double width, 
    double height)
{
    BitmapSource bitmapSource = ToBitmapSource(frameworkElement, width, height);

    PngBitmapEncoder pngBitmapEncoder = new PngBitmapEncoder();
    pngBitmapEncoder.Frames.Add(BitmapFrame.Create(bitmapSource));

    MemoryStream memoryStream = new MemoryStream();
    pngBitmapEncoder.Save(memoryStream);

    memoryStream.Position = 0;

    return memoryStream;
}

public static BitmapSource ToBitmapSource(
    this FrameworkElement frameworkElement, 
    double width, 
    double height)
{
    Size renderingSize = new Size(width, height);
    frameworkElement.Measure(renderingSize);
    Rect renderingRectangle = new Rect(new Point(0, 0), renderingSize);
    frameworkElement.Arrange(renderingRectangle);
    frameworkElement.UpdateLayout();

    Rect bounds = VisualTreeHelper.GetDescendantBounds(frameworkElement);
    RenderTargetBitmap renderBitmap = new RenderTargetBitmap(
        (int)frameworkElement.ActualWidth,
        (int)frameworkElement.ActualHeight,
        96,
        96,
        PixelFormats.Pbgra32);

    DrawingVisual drawingVisual = new DrawingVisual();

    using (DrawingContext drawingContext = drawingVisual.RenderOpen())
    {
        VisualBrush visualBrush = new VisualBrush(frameworkElement);
        drawingContext.DrawRectangle(visualBrush, null, new Rect(new Point(), bounds.Size));
    }

    renderBitmap.Render(drawingVisual);

    return renderBitmap;
}

Thanks for any help. Much appreciated.

Answer 1

I needed to change the above code so that I measure and arrange the frameworkElement as 310×150. I then render it to the final scale size e.g. 558×270 and set the DPI to (96/100)*scale where the scale is 180 in this case.