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

1024x768

This is display 2560x1440

2560x1440

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

But what is this?

Example

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>

then it won't be on full width of the screen, i will provide example after 1 h — Developer, Oct 02 '13 at 05:07

score 0 · Accepted Answer · answered Oct 10 '13 at 14:26

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.

How to handle ViewBox

1 Answers1