Search code examples
wpfxamlmvvm

Best practice to create a WPF window with so many controls

I’m working on a WPF MVVM project in which I have to create a screen with lot of controls and sections inside Mock screen

What I tried is to create a window and use grid as I find it as the most convenient option to arrange the controls. But I’m doubtful if this is a best practice to use multiple grid inside grid. I have also tried to split up sections inside user controls, but again it’s the grid itself that has been used as the container.

Is there any better/ advisable way of arranging this kind of a screen ?

Solution

  • It's difficult to avoid using Grids.

    This might be something close to what you want. In each section, you place the corresponding Controls or an UserControl that contains those Controls.

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <GroupBox
        Grid.Row="0"
        Grid.Column="0"
        Grid.ColumnSpan="2">
        <!--  Top section  -->
    </GroupBox>
    <GroupBox
        Grid.Row="1"
        Grid.Column="0"
        Grid.ColumnSpan="2">
        <!--  Center section  -->
    </GroupBox>
    <GroupBox
        Grid.Row="2"
        Grid.Column="0">
        <!--  Bottom left section  -->
    </GroupBox>
    <GroupBox
        Grid.Row="2"
        Grid.Column="1">
        <!--  Bottom right section  -->
    </GroupBox>
</Grid>

    Another option with DockPanel.

    <DockPanel>
    <GroupBox DockPanel.Dock="Top">
        <!--  Top section  -->
    </GroupBox>
    <GroupBox DockPanel.Dock="Top">
        <!--  Center section  -->
    </GroupBox>
    <GroupBox DockPanel.Dock="Left">
        <!--  Bottom left section  -->
    </GroupBox>
    <GroupBox DockPanel.Dock="Right">
        <!--  Bottom right section  -->
    </GroupBox>
</DockPanel>