Easy Scaling in XAML (WPF)
- by Robert May
Ran into a problem that needed solving that was kind of fun. I’m not a XAML guru, and I’m sure there are better solutions, but I thought I’d share mine. The problem was this: Our designer had, appropriately, designed the system for a 1920 x 1080 screen resolution. This is for a full screen, touch screen device (think Kiosk), which has that resolution, but we also wanted to demo the device on a tablet (currently using the AWESOME Samsung tablet given out at Microsoft Build). When you’d run it on that tablet, things were ugly because it was at a lower resolution than the target device. Enter scaling. I did some research and found out that I probably just need to monkey with the LayoutTransform of some grid somewhere. This project is using MVVM and has a navigation container that we built that lives on a single root view. User controls are then loaded into that view as navigation occurs. In the parent grid of the root view, I added the following XAML: <Grid.LayoutTransform>
<ScaleTransform ScaleX="{Binding ScaleWidth}" ScaleY="{Binding ScaleHeight}" />
</Grid.LayoutTransform>
And then in the root View Model, I added the following code:
/// <summary>
/// The required design width
/// </summary>
private const double RequiredWidth = 1920;
/// <summary>
/// The required design height
/// </summary>
private const double RequiredHeight = 1080;
/// <summary>Gets the ActualHeight</summary>
public double ActualHeight
{
get
{
return this.View.ActualHeight;
}
}
/// <summary>Gets the ActualWidth</summary>
public double ActualWidth
{
get
{
return this.View.ActualWidth;
}
}
/// <summary>
/// Gets the scale for the height.
/// </summary>
public double ScaleHeight
{
get
{
return this.ActualHeight / RequiredHeight;
}
}
/// <summary>
/// Gets the scale for the width.
/// </summary>
public double ScaleWidth
{
get
{
return this.ActualWidth / RequiredWidth;
}
}
Note that View.ActualWidth and View.ActualHeight are just pointing directly at FrameworkElement.ActualWidth and FrameworkElement.ActualHeight.
That’s it. Just calculate the ratio and bind the scale transform to it.
Hopefully you’ll find this useful.
Technorati Tags: WPF,XAML
