Application Resolution Issue

Question

This is something that I have been skipping and leaving till the end because I can't seem to find the answer and ive looked for so long.

I have a an application inside a Window, and I have built the Application to my screens resolution which is 1600 x 900. If I run the application on a screen with a resolution of 1024 x 768 my whole interface will not scale down.

Example.

Now I know alot of you will be thinking to add Dockpanels etc ... But I have tried to do this. When you change the Resolutions it doesn't work it just fixes the object to one place.

What I want to happen.

If any of you know the solution to this annoying problem, please let me know.

I dont know much about resolutions, only what I have done hours of research on.

EDIT1

Here is some of my XAML:

<DockPanel HorizontalAlignment="Left" Height="236" LastChildFill="False" Margin="380,150,0,0" VerticalAlignment="Top" Width="792">
        <DataGrid x:Name="dgFake" VerticalAlignment="Center" Height="236" ItemsSource="{Binding}" Foreground="#FF474747" BorderBrush="#FFBDBDBD" HorizontalGridLinesBrush="{x:Null}" VerticalGridLinesBrush="{x:Null}" CanUserResizeRows="False" ScrollViewer.CanContentScroll="True" Background="#FFEEFAFF" RowBackground="#FFEEFAFF" RowHeaderWidth="0" RowHeight="25" AutoGenerateColumns="False" Width="792" DockPanel.Dock="Left" FontSize="16" TextBlock.TextAlignment="Center" HorizontalContentAlignment="Stretch" SelectionChanged="dgFake_SelectionChanged">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding FFF}" Header="FFF" Visibility="Hidden" CanUserResize="False" CanUserSort="False" CanUserReorder="False" IsReadOnly="True" Width="*" />
                <DataGridTextColumn Binding="{Binding EEE}" Header="EEE" CanUserResize="False" CanUserSort="False" CanUserReorder="False" IsReadOnly="True" Width="*" />
                <DataGridTextColumn Binding="{Binding GGG}" Header="GGG" CanUserResize="False" CanUserSort="False" CanUserReorder="False" IsReadOnly="True" Width="*"/>
                <DataGridTextColumn Binding="{Binding CCC}" Header="CCC" CanUserResize="False" CanUserSort="False" CanUserReorder="False" IsReadOnly="True" Width="*"/>
                <DataGridTextColumn Binding="{Binding BBB}" Header="BBB" CanUserResize="False" CanUserSort="False" CanUserReorder="False" IsReadOnly="True" Width="*"/>
                <DataGridTextColumn Binding="{Binding AAA}" Header="AAA" CanUserResize="False" CanUserSort="False" CanUserReorder="False" IsReadOnly="True" Width="*"/>
                <DataGridTextColumn Binding="{Binding DDD}" Header="DDD" CanUserResize="False" CanUserSort="False" CanUserReorder="False" IsReadOnly="True" TextBlock.TextAlignment="Center" Width="*"/>
            </DataGrid.Columns>

<Label x:Name="lblView" Content="Select View ..." HorizontalAlignment="Left" Margin="380,109,0,0" VerticalAlignment="Top" Foreground="#FF474747"/>
    <ComboBox x:Name="cmbViews" HorizontalAlignment="Left" Margin="380,124,0,0" VerticalAlignment="Top" Width="162" Text="Select ..." SelectionChanged="cmbView">
        <ComboBoxItem Content="Company" Foreground="#FFA2A2A2"/>
        <ComboBoxItem Content="Employee" Foreground="#FFA2A2A2"/>
    </ComboBox>

Answer 1

I suspect that you have basically designed your WPF application as if it were a WinForms application, setting exact Height and Width values on your UI elements. That is not how we layout UI elements in WPF. If you did do that, then you are correct that putting them in a DockPanel will not fix your problem.

In WPF, we generally use Grid elements to make full use of the available space provided to them. Setting a Grid.ColumnDefinition.Width to Auto and another to * will fill *all of the available width:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" /> <!-- Just big enough for content -->
    <ColumnDefinition Width="*" />    <!-- Fills all remaining space -->
</Grid.ColumnDefinitions>
...
<TextBlock Grid.Column="1" Text="I'm in the right cell" />

That's just one example of many... Please read through the Introduction to WPF Layout page from the WPF Tutorial.net website for more information.

Answer 2

The problem you describe is actually quite easy to solve, you simply NEVER use a fixed size for anything. All your panels have to be sized relative to something.

Changing the resolution of a screen is literally the same as changing the size of your window. If it works with a Window.Size of 1024x768 it will work at a 1024x768 resolution.

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="384" Width="525">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

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

    <!-- Pretend I'm a logo -->
    <Border Height="23" Width="75" HorizontalAlignment="Left" Background="Blue" CornerRadius="5" Padding="3">
        <TextBlock Foreground="White">Logo</TextBlock>
    </Border>

    <WrapPanel Grid.Row="0" Grid.Column="1"  HorizontalAlignment="Right" Orientation="Horizontal">
        <TextBlock Text="About" Margin="6"/>
        <TextBlock Text="Home" Margin="6"/>
        <TextBlock Text="Help" Margin="6"/>
        <TextBlock Text="Settings" Margin="6"/>
    </WrapPanel>

    <ListBox Grid.Row="1" Grid.Column="0"  
             BorderThickness="0">
        <TextBlock Text="Example" Margin="6"/>
        <TextBlock Text="Example" Margin="6"/>
        <TextBlock Text="Example" Margin="6"/>
        <TextBlock Text="Example" Margin="6"/>
        <TextBlock Text="Example" Margin="6"/>
        <TextBlock Text="Example" Margin="6"/>
        <TextBlock Text="Example" Margin="6"/>
        <TextBlock Text="Example" Margin="6"/>
        <TextBlock Text="Example" Margin="6"/>
        <TextBlock Text="Example" Margin="6"/>
    </ListBox>

    <Grid Grid.Row="1" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Border >
            <Border.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Red" />
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock>I'm a Data Grid</TextBlock>
        </Border>

        <GridSplitter Grid.Row="1" VerticalAlignment="Top" Height="3"/>

        <Border Grid.Row="1" Margin="0,3,0,0">            
            <Border.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Blue" />
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock>I'm a Data Grid</TextBlock>
        </Border>

    </Grid>
</Grid>
</Window>

The gradients are there so you can see its working when you resize.

Answer 3

If you've already designed to a fixed resolution then an easy hack is to wrap everything in a ViewBox and give the encapsulating child the same dimensions as the resolution you designed for. So if you designed for 1600 x 900 and your main window contained this:

<Grid>
    <TextBlock Text="Big Text" FontSize="100" />
</Grid>

...then replace it with this:

<Viewbox Stretch="Uniform">
    <Grid Width="1600" Height="900">
        <TextBlock Text="Big Text" FontSize="100" />
    </Grid>
</Viewbox>

Then make a mental note to do your UI design properly from day 1 next time.