Scale box for UWP

In XAML based UWP development you’ll notice that the common WPF feature of LayoutTransform isn’t available. However, sometimes you just want to scale things up or down and it’s difficult to get it done. Viewbox is a nice element but it scales according to the viewport and content size rather than on a specific Scale percent.

However, you can workaround this (and even create a custom Scalebox element if you wish) following this simple pattern (in the example below Scale percent is 140%):

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="0.4*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="0.4*"/>
  </Grid.ColumnDefinitions>
  <Grid>
    <Grid.RenderTransform>
      <ScaleTransform ScaleX="1.4" ScaleY="1.4"/>
    </Grid.RenderTransform>
    <!-- Content goes here -->
  </Grid>
</Grid>

As you can see, we use two Grid elements and RenderTransform to ensure layout is prepared correctly from the measuring time even if content is scaled up only at runtime. The green values need to be scale 1, and the blue ones represent the scale percent itself.

Advertisements

About Sorin Dolha

My passion is software development, but I also like physics.
This entry was posted in UWP and tagged , , , . Bookmark the permalink.

Add a reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s