Question

I have a WPF that will be displayed on a very small device with a small screen but the operating system has a high resolution. The resolution cannot be changed (hardware restrictions), so I must “magnify” my WPF app so that it is usable on a small device.

My thoughts were to do something like the ‘zoom in/out’ functionality in chrome (well, other browsers too). For example, visit jquery mobile and press ctrl+. I want a similar effect for a WPF app.

I was thinking something like…

ZoomFactor = 2
WPFApp.RenderSize.Width = WPFApp.Size.Width / ZoomFactor
WPFApp.RenderSize.Height = WPFApp.Size.Height / ZoomFactor 

This would ‘theoretically’ make WPF thinking it is rendering for a large screen, however the application will still actually have double the realestate (ZoomFactor).

Then, I was thinking a ScaleTransform would zoom the rendered content to fill the entire application.

WFPApp.RenderedContent.ScaleTransformX = ZoomFactor
WPFApp.RenderedContent.ScaleTransformY = ZoomFactor

This would also allow the application to be sized in any way and a ZoomFactor will still be applied to the content.

I am relatively new to WPF, so there might be a way to do this out of the box, but if not, how would I achieve this?

Answer 1

Try using a layout transformation with a scale transform.

Worked like a charm. This is the logic I used to generate the scale.

public static double GetElementScale(Size designSize, Size currentSize)
{
    var ratioY = currentSize.Height / designSize.Height;
    var ratioX =  currentSize.Width / designSize.Width;

    return Math.Max(ratioX, ratioY);
}

Then, with two scale properties on my page, I used the following.

<controls:MPage.LayoutTransform>
    <ScaleTransform  ScaleY="{Binding Path=ScaleY, RelativeSource={RelativeSource AncestorType={x:Type controls:MPage}}}" ScaleX="{Binding Path=ScaleX, RelativeSource={RelativeSource AncestorType={x:Type controls:MPage}}}" />
</controls:MPage.LayoutTransform>