The WPF Notepad Project: App Scaling (Premium)

It’s been a while since I’ve updated the Windows Presentation Foundation (WPF) version of .NETpad, but this is something I’ve been thinking about for a long time: The ability to scale the entire app’s user interface up or down according to the user’s wishes.

In fact, I worked on this feature on and off for a while but never really found a suitable solution. The problem, I think, is that I was going about it wrong: Instead of trying to scale the entire application, I was just trying to scale the menu at the top and the status bar on the bottom, leaving the textbox between them unchanged. But if you just scale the entire thing, it works.

The impetus for this feature, oddly enough, is the Universal Windows Platform (UWP) version of .NETpad. UWP apps tend to have larger UI elements than traditional desktop apps because of the platform’s touch-first mobile origins. And while the UWP version of .NETpad is/was challenging and frustrating in many ways, I have grown to really like the look of slightly larger UIs. I figured this would be a good look for the WPF version of the app, too.

In the future, we may be able to use WinUI 3 to port the UWP user interface over to WPF. (Though I’m not sure I want to do that.) But in the meantime, retaining the legacy menu-based UI in the WPF version while adding a scaling option seems like a nice interim step.

The solution I’m providing here is not my own, at least not for the most part. Instead, I’m leaning on the expertise of Jacob Johnston, who solved this problem on his Inchoate Thoughts website almost a decade ago. So I’ve taken his code and adapted it to my needs.

To get started, dust off your Visual Studio project for the WPF version of .NETpad and open MainWindow.xaml, which contains the XAML code that defines our app’s user interface. At the very top, you should see some attributes related to the Height and Width of the Window, which we’ve named AppWindow. We’re going to make the default Width of the app a bit bigger than before (I think the original value was 400) and define minimum Height and Width values. So the relevant line should be replaced with this:
Title="Untitled - .NETpad" Height="600" Width="800" MinHeight="600" MinWidth="800"
Next, as Mr. Johnston describes, we need to apply a LayoutTransform to the Grid that defines our UI at a high level. And that grid will need a name now. So locate the line that currently reads as <Grid> and change it to:
<Grid Name="MainGrid">
Then, open up space right below there, and right above the <Grid.RowDefinitions> tag and add the following:
<Grid.LayoutTransform>
    <ScaleTransform x:Name="ApplicationScaleTransform"
                CenterX="0"
                CenterY="0"
                ScaleX="{Binding ElementName=AppWindow, Path=ScaleValue}"
                ScaleY="{Binding ElementName=AppWindow, Path=ScaleValue}" /&g...

Gain unlimited access to Premium articles.

With technology shaping our everyday lives, how could we not dig deeper?

Thurrott Premium delivers an honest and thorough perspective about the technologies we use and rely on everyday. Discover deeper content as a Premium member.

Tagged with

Share post

Please check our Community Guidelines before commenting

Windows Intelligence In Your Inbox

Sign up for our new free newsletter to get three time-saving tips each Friday

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

Thurrott © 2024 Thurrott LLC