What is wrong with my grid layout formatting?

Question

I have the following window in my application:

<Grid Width="{Binding ActualWidth, 
          RelativeSource = {RelativeSource AncestorType = {x:Type Window}}}" 
      Height="{Binding ActualHeight, 
          RelativeSource ={RelativeSource AncestorType = {x:Type Window}}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="20"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <DataGrid Grid.Column="0" x:Name="dataGrid" VerticalAlignment="Stretch" CanUserAddRows="False" IsReadOnly="True"/>

        <DataGrid Grid.Column="2" x:Name="dataGrid2" VerticalAlignment="Stretch" CanUserAddRows="False" IsReadOnly="True"/>

        <GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="5"/>
    </Grid>
    <StatusBar Grid.Row="1" Height="20">
        <StatusBarItem x:Name="StatusBarInfo" Content="Offset:" HorizontalAlignment="Right" />
    </StatusBar>
</Grid>

In the designer view everything appears as expected, with two dataGrids, separated by a gridSplitter, and the status bar on the bottom of the screen. for some reason, when running the application, the layout is slightly different, the grid containing the dataGrid overlaps the status bar.

It makes me think something about my display settings on Windows 10 is causing me problems.

This is my first WPF application, I am still learning.

Answer 1

Maybe setting the Width and Height of the root Grid prevents you from achieving the goal. I believe by default, the grid will take the rest (*) of the space of the Window if you do not set the row height and column width. Alternatively, instead of setting the Width and Height of the first Grid you can set its VerticalAlignment and HorizontalAlignment to "Stretch"

Answer 2

If you have any data inside dataGrid it could stretch and overlap status bar. If this is the problem, try using:

<ScrollViewer> (data grid here) </ScrollViewer>