How to handle ViewBox

Question

I'm facing problem with handling different screen sizes and the problem is text!

I have next section:

This is display 1024x768

This is display 2560x1440

On Stack someone gave me hint that ViewBox can help me to solve this problem, ok i try this:

But what is this?

When text doesn't fit, it shrinks - that is nice, but how to tell other ( same-level elements ) to take the same shrink level?

In other words, i want all text the same size.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="9*"/>
    </Grid.RowDefinitions>
    <Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill" />
    <Image Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill"/>
    <Image Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill"/>
    <Image Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill"/>
    <Viewbox>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="One" FontSize="20"/>
    </Viewbox>
    <Viewbox Grid.Column="1">
        <TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Two" FontSize="20"/>
        </Viewbox>
    <Viewbox Grid.Column="2">
        <TextBlock Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Threeeeeeeeeee" FontSize="20"/>
        </Viewbox>
    <Viewbox Grid.Column="3">
        <TextBlock Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Four" FontSize="20"/>
        </Viewbox>
</Grid>

Answer 1

Try placing your ViewBox at the root level instead.. it should look something like this:

 <ViewBox>
   <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
     ...
   </Grid>
 </ViewBox>

You may want to play around with the Stretch property of the ViewBox to achieve your desired result. But I'd reckon to use the "Fill" option.

I've been using this method for my games and apps to adapt to different screen ratios and sizes.