Resolution Independent WPF Application

Question

I'm developing a Database system that needs to be resolution independent, some use screens that are still running at 1024 x 768, some use screens that are at 1920 x 1080 and others use everything in between.

I haven't done much work with WPF before so I'm sort of just starting out and attempting to get my head around height, widths and alignments.

What I have at the moment is one main window that holds an grid in which at the top there is a row for a label and some navigation buttons, as well as the time and the username of the person logged in. I then have a second row below that that holds a frame which I load pages into for the main navigation of the program.

In the pages I mainly use the grid layout, and occasionally the stack panel. One of the biggest problems I have come across is an issue like this;

In low resolutions this is common, where as in a higher resolution the buttons look fine;

This is the XAML code for the buttons within their parent grid;

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Content="HR" Margin="10"  Click="RunHrSystem" FontSize="18.667" />
        <Button Content="Companies" Margin="10" Click="RunCompSystem" FontSize="18.667" Grid.Row="1" />
        <Button Content="People" Margin="10" Click="RunPeopleSystem" FontSize="18.667" Grid.Row="2" />
        <Button Content="IT Management" Margin="10" Click="RunITManagementSystem" FontSize="18.667" Grid.Row="3"/>
        <Button Content="Sales" Margin="10" FontSize="18.667" Grid.Row="4" />
        <Button Content="Buying" Margin="10" FontSize="18.667" Grid.Row="5" />
        <Button Content="Estimating" Margin="10" FontSize="18.667" Grid.Row="6"/>
        <Button Content="Design" Margin="10" FontSize="18.667" Grid.Row="7"/>
    </Grid>

Is there anything obvious I am doing wrong here that is preventing the buttons from resizing according to a lower resolution? As I say I get this throughout my program when using buttons, as well as the rectangle shape and in some situations labels, where the bottom of the label will be cut off too.

Mike Eason Mike Eason · Accepted Answer · 2015-10-28T11:24:15

Currently, you are declaring RowDefinitions to use *, this tells the row to use the height as a percentage of the available space. Therefore, if your resolution changes, your row heights will change.

Instead, you want the RowDefinition to be the height of the content. In this case, when the resolution changes, the row heights will not change.

<RowDefinition Height="Auto"/>

It'd be a good idea to put the grid in a ScrollViewer, just in case the grid becomes larger than the screen.

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

In your particular example, I would instead use a StackPanel.

<ScrollViewer>
    <StackPanel>
        <Button ...

Resolution Independent WPF Application

2 Answers