Search code examples
xamlwindows-8responsive-designscale

Scaling doesn't work in the 23 and 27 inch screens

I have two UserControls that have a Grid each. The first one defines a Height and a Width:

<UserControl
    Height="620"
    Width="450">

   <Grid Margin="50, 0, 0, 50">

The other control only defines the Height:

<UserControl
    Height="768">
    <Grid>

Now I am trying to use both in a background like this:

<Grid>
    <Image Source="Assets/background.png" Stretch ="UniformToFill" 
     HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Controls:EventImagesControl Grid.Row="0" Grid.Column="0"  
                  HorizontalAlignment="Stretch"  
                  VerticalAlignment="Stretch"/>
        <Controls:ScrollControl Grid.Row="0" Grid.Column="1"  
                  HorizontalAlignment="Stretch"  
                  VerticalAlignment="Stretch"/>            
    </Grid>
</Grid>

Everything scales as I was expecting in the following settings:

10.6" 1024x768
10.6" 1366x768
10.6" 1920x1080
10.6" 2560x1440
12"   1280x800

However, when I try to use the following settings it only scales in width and not in height (at least it seems)

23" 1920x1080
27" 2560x1440

I am trying to avoid the usage of a ViewBox. I am new to the windows8/wpf, but I am trying to learn how to do a responsive layout.

Solution

  • The WinRT rendering engine scales so everything is physically correct, that's why the 4 10.6" tests look the same size, no matter the resolution of the screen. The 12" test scales nicely, but as it's size is close to the 10.6" and you won't notice a difference (althought there's a difference), the biggest screen sizes will scale so your 450x620 control look like a 450x620 control an a 23" Full HD screen, this means an small control.

    Actually, the link you posted describes nicely every type of scaling you can use in a Modern UI app. And if you really need to set a minimum size, use the MinWidth and MinHeight properties instead.