locked
Screen layout with changing screen resolution

    Question

  • I'm developing a Windows 8.1 Store App in Landscape only mode.

    I've read the Microsoft Documentation regarding screen scaling and have followed its directives.

    Each screen has a backgbround image with some graphics such as a dog, kennel, grass, etc.

    I'm positioning UI controls with respect to these graphic artefacts using grids with column and row definitions and horizontal and vertical alignment settings.

    In the VS Designer I'm using a resolution of 768 x 1366 and set the control positions within this.

    When I test the application at different screen resolutions in the emulator, the controls do not remain in the same positions with regard to the screen background image.

    In addition, any Text displayed in the App does not scale correctly between differing resolutions.

    What can I do to fix these scaling issues?


    Sunday, May 10, 2015 7:37 PM

All replies

  • You'll need to define the problem more clearly if you want specific help. It's not clear what exactly you are doing or how you want the app to scale to different window sizes. There are several different approaches you can take.

    If you're trying to line up controls against the image then you'll need to make sure you scale the image and the controls in the same way. You may want to include the image as a stretched background on your Grid.

    In general hard coding control positions leads to an inflexible and poor user experience. Creating a fluid layout which responds to the window size will be much more usable.

    See Quickstart: Designing apps for different window sizes for a few strategies to do this. Windows 10 adds new controls to make handling different window sizes easier (it's also more important to scale well on Windows 10 since users have more control of the app's window size).



    Sunday, May 10, 2015 10:20 PM
    Owner
  • Here's the XAML for a screen as an example of how I'm positioning controls in relation to the background image:

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Image Source="/Assets/StartScreen/background1067x600.png" Stretch="Fill"/>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="3.3*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="8.3*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="3*"/>
                </Grid.RowDefinitions>
                <Rectangle Grid.Column="1" Grid.Row="1" Fill="Transparent" Tapped="TitleRectangleOnTapped"/>
            </Grid>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="63*"/>
                    <ColumnDefinition Width="10*"/>
                    <ColumnDefinition Width="63*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="74*"/>
                    <RowDefinition Height="10*"/>
                    <RowDefinition Height="7*"/>
                </Grid.RowDefinitions>
                <Button Grid.Column="1" Grid.Row="1" x:Name="StartButton" Content="Begin" Style="{StaticResource NavButtonStyle}"/>
            </Grid>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="6*"/>
                    <ColumnDefinition Width="10*"/>
                    <ColumnDefinition Width="120*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="7*"/>
                    <RowDefinition Height="10*"/>
                    <RowDefinition Height="74*"/>
                </Grid.RowDefinitions>
                <Button Grid.Column="1" Grid.Row="1" x:Name="AboutButton" Content="About" Style="{StaticResource NavButtonStyle}"/>
            </Grid>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120*"/>
                    <ColumnDefinition Width="10*"/>
                    <ColumnDefinition Width="6*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="7*"/>
                    <RowDefinition Height="10*"/>
                    <RowDefinition Height="74*"/>
                </Grid.RowDefinitions>
                <Button Grid.Column="1" Grid.Row="1" x:Name="HelpButton" Content="Help" Style="{StaticResource NavButtonStyle}"/>
            </Grid>
            <userControls:PopupMessage x:Name="StartScreenPopupMessage"/>
            <userControls:ProgressIndicator Visibility="Collapsed"/>
            <Grid x:Name="StartScreenAd1Grid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="65*"/>
                    <ColumnDefinition Width="6*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="7*"/>
                    <RowDefinition Height="50*"/>
                </Grid.RowDefinitions>
                <userControls:AdvertSpace Grid.Column="0" Grid.Row="1" x:Name="StartScreenAd1" AdSize="W300H250" Cat="Zara" HorizontalAlignment="Right" VerticalAlignment="Top"/>
            </Grid>
            <Grid x:Name="StartScreenAd2Grid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="6*"/>
                    <ColumnDefinition Width="55*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="7*"/>
                    <RowDefinition Height="50*"/>
                </Grid.RowDefinitions>
                <userControls:AdvertSpace Grid.Column="1" Grid.Row="1" x:Name="StartScreenAd2" AdSize="W250H250" Cat="Bazil" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            </Grid>
        </Grid>
    </Page>


    Monday, May 11, 2015 12:33 AM