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.