In the app I’m currently building, I wanted to create a virtual-sized canvas within the Window and change the overall scale according to the window size without breaking the layout inside. I explored various options.

In WPF, it was convenient because you could adjust the scaling of the content display instantly by writing something like the below… I wondered if Xamarin had something similar, but… it doesn’t.

<DockPanel>
    <DockPanel.RenderTransform>
        <ScaleTransform ScaleX="{Binding Scale}" ScaleY="{Binding Scale}" />
    </DockPanel.RenderTransform>
</DockPanel>

About VisualElement’s Scale Property

So, I wondered if controls have a property to set their own scale, and I found a property called “Scale”.

I tried setting the value to 0.5, expecting the size to become half.

But, the appearance didn’t change. It also feels strange that the Scale property isn’t split into x and y. Is its purpose different?

I decided not to pursue this further and look for another approach.

Alternative: Adjust Size Manually (The Gritty Way)

After considering various options, I decided to simply capture the ContentView’s SizeChanged event, calculate the change rate from the original size (1x scale), and adjust accordingly.

I receive SizeChanged within a Behavior attached to the View and pass it to the ViewModel via a Command.

At that time, I tried connecting it to the ViewModel using Prism’s EventToCommandBehavior, but it didn’t work (EventArgs had no value, and I couldn’t pass the sender to EventArgsConverter, so I gave up). I created a new Behavior specifically for SizeChanged to handle it.

So far, this method achieves the desired behavior.

Yet Another Method

I haven’t actually tried this, but instead of drawing directly on the screen as Xamarin Forms controls, I think scaling could be easily achieved by first drawing everything onto a Bitmap.

(I don’t plan to try this for a while because the scope of change is large, and it would prevent UI creation using Xaml.)