WPF UI structure with 4 divisions to fulfill screen resolution

Question

I´m starting with WPF, and i want to make an application that fullfills all the screen and that adapts its contents to the screen resolution.

It will be divided in 4 sections: At the top, a menu with a logo and some navigation buttons At the left a sub-menu with action and sub-navigation buttons At the bottom an status bar And the center and the right with the loaded page.

So, i want to share this approach with you to know the best way to structure the application UI. For now, what i have just made is the following small piece of code, please tell me if i´m focusing it right or not.

<Window x:Class="ViewLabPro.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" WindowStyle="None" WindowState="Maximized" ResizeMode="NoResize">
<DockPanel>
    <Grid DockPanel.Dock="Top"/>
    <Grid DockPanel.Dock="Bottom"></Grid>
    <Grid DockPanel.Dock="Left"></Grid>
</DockPanel>

And just one more question: In my code i can´t use the "*" in the "Grid" "Height" property, so how could i make each part of the UI adpatable to the screen resolution?

Thank you.

Answer 1

That desired layout you can get it using girds, and playing with the grid columns/rows percents, row/columns spans, and row/columns for the content. This is a similar to @Mike Strobel's one expample:

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="25*"/>
        <ColumnDefinition Width="75*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition/>
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>
    <Rectangle x:Name="TopRegion" Grid.ColumnSpan="2" Fill="#FF75DC75"/>
    <Rectangle x:Name="Bottom" Grid.ColumnSpan="2" Grid.Row="2" Fill="#FFDCA475"/>
    <Rectangle x:Name="LeftRegion" Grid.Row="1" Fill="#FF75D3DC"/>
    <Rectangle x:Name="ContentRegion" Grid.Row="1" Grid.Column="1" Fill="#FFB775DC"/>
</Grid>

In this layout top and bottom panels will stay fixed, and left panel will have a 25% width. Hope it helps...