How to have DataGrid to Fill Up the Blank Space in Window in WPF

Question

I am working on a project in WPF. In Which my requirement is to attach my DataGrid at the bottom of the Window, so that if the users will Restore Down or Maximize the window or change the size of the window, the DataGrid will should not go beyond the main window in terms of height and should resize automatically and scroll bars should appear view the data. In the code given below the DataGrid is only displays the data available for example if there are only 2 rows to display it will show only 2 row in the datagrid and remaining users can see the background and if the data is having 50 60 rows the data grid will go beyond the main window and users cannot see all the rows in the Data Grid.

My Requirement Datagrid Height should not go beyond than the available space in the Main Window. If there are no rows to display in the DataBase then DataGrid Should show Empty Rows or Simply Gray Space.

<StackPanel>

    <StackPanel Orientation="Horizontal">
        <TextBlock Margin="40 50 0 0" Text="Label1:" Foreground="White" FontWeight="Medium" />
        <ComboBox x:Name="CustomerList" Margin="15 40 0 0" Padding="7" Width="300" Foreground="Black" FontWeight="Medium" Cursor="Hand">
    </StackPanel>

    <StackPanel Orientation="Horizontal">
        <TextBlock Margin="25 30 0 0" Text="Label2" Foreground="White" FontWeight="Medium" TextWrapping="Wrap" Width="54"/>
        <TextBox x:Name="AppName" Margin="15 30 0 0" Padding="7" Width="230" Background="LightCyan" Foreground="Black" FontWeight="Medium" />
    </StackPanel>

    <StackPanel Orientation="Horizontal">          
        <TextBox x:Name="Tenure" Margin="20 30 0 0" Padding="7" Width="170" Background="LightCyan" Foreground="Black" FontWeight="Medium" />          
    </StackPanel>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1000"/>
            <ColumnDefinition Width="150"/>
        </Grid.ColumnDefinitions>
        <StackPanel>
            <StackPanel Orientation="Horizontal" Grid.Column="0">

               <TextBlock Margin="25 30 0 0" Text="Label2.:" Foreground="White" FontWeight="Medium" Width="80" TextWrapping="Wrap"/>
            </StackPanel>

            <StackPanel Orientation="Horizontal" Grid.Column="0">                    
                <Button x:Name="Add_btn" Content="Add Data" Width="120" Padding="12" Background="Transparent" Foreground="White" FontWeight="Medium" Margin="15 30 0 0" BorderBrush="White" BorderThickness="1" Click="Add_btn_Click" Cursor="Hand"/>
            </StackPanel>
        </StackPanel>

        <StackPanel Grid.Column="1" HorizontalAlignment="Right">
            <Image Source="C:\Users\Asim Abbas\Source\Icons\Upload1.png" Height="90" Width="90" Margin="0 25 0 0" MouseLeftButtonDown="Image_MouseLeftButtonDown" Cursor="Hand">
                <Image.Effect>
                    <DropShadowEffect/>
                </Image.Effect>
            </Image>

            <TextBlock Margin="20,5,0,0" Text="Upload" Foreground="White" FontWeight="Medium" />

        </StackPanel>
    </Grid>

This is The Point Where Thing Gets Ugly - The Data Is Continuing from Above

    <DataGrid 
        DockPanel.Dock="Bottom"
        x:Name="Grid"
        Margin="0 20 0 0"
        AutoGenerateColumns="False"
        CanUserAddRows="False"
        CanUserDeleteRows="False"
        ColumnHeaderHeight="60"
        CanUserResizeColumns="False"
        ScrollViewer.VerticalScrollBarVisibility="Visible"
        VerticalScrollBarVisibility="Visible"
        CanUserReorderColumns="False"
        CanUserResizeRows="False"
        CanUserSortColumns="False"
        RowBackground="LightCyan"
        RowHeight="30"
        HorizontalGridLinesBrush="LightGray"
        Width="Auto"            
        IsReadOnly="True"
        VerticalAlignment="Stretch"
        VerticalContentAlignment="Stretch"
        FontSize="11"
        HorizontalAlignment="Left"
        FontWeight="Medium"
        VerticalGridLinesBrush="LightGray" 
        BorderBrush="FloralWhite"
        MouseDoubleClick="LCGrid_MouseDoubleClick">

        <DataGrid.ColumnHeaderStyle>
            <Style TargetType="DataGridColumnHeader">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding}"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="VerticalContentAlignment" Value="Bottom"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="BorderThickness" Value=".5,.5,.5,.5"/>
                <Setter Property="BorderBrush" Value="LightGray"/>
                <Setter Property="Background" Value="FloralWhite"/>
                <Setter Property="FontWeight" Value="SemiBold"/>
                <Setter Property="FontSize" Value="12"/>
                <Setter Property="Padding" Value="5"/>
                <Setter Property="Width" Value="Auto"/>
            </Style>
        </DataGrid.ColumnHeaderStyle>

        <DataGrid.RowHeaderStyle>
            <Style TargetType="DataGridRowHeader">
                <Setter Property="HorizontalContentAlignment" Value="Right"/>
                <Setter Property="Width" Value="25"/>
                <Setter Property="FontWeight" Value="Medium"/>
                <Setter Property="FontSize" Value="12"/>
                <Setter Property="Background" Value="FloralWhite"/>
            </Style>
        </DataGrid.RowHeaderStyle>

        <DataGrid.CellStyle>
            <Style TargetType="DataGridCell">
                <Setter Property="Padding" Value="3"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type DataGridCell}">
                            <Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" VerticalAlignment="Bottom">
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Bottom"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </DataGrid.CellStyle>

        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 1" Width="150"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col2" Width="60">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Center"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>
            <DataGridTextColumn Binding="{Binding Col1, StringFormat={}{0:dd-MMM-yy}}" Header="Col 3" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col3" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 4" Width="250"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col5" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N2}" Header="LC Value" Width="100">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N2}" Header="Col6" Width="100">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N2}" Header="Col 7" Width="100">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N2}" Header="Col8" Width="100">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N2}" Header="Col9" Width="100">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat={}{0:dd-MMM-yy}}" Header="Col10" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1, StringFormat={}{0:dd-MMM-yy}}" Header="Col11" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col12" Width="250"/>
            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N0}" Header="Col13" Width="80">

                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Center"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1, StringFormat=N0}" Header="Col 14" Width="80">
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Center"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>

            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 15" Width="150"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 16" Width="150"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 17" Width="200"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 18" Width="80"/>
            <DataGridTextColumn Binding="{Binding Col1}" Header="Col 19" Width="100"/>

        </DataGrid.Columns>
    </DataGrid>

</StackPanel>

Answer 1

in a short answer you have to use a Grid with RowDefinition Height="*" - your row will have a relative height

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>  <!-- fit componets size -->
        <RowDefinition Height="*"/>     <!-- relative size -->
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <StackPanel>
             ..........
        </StackPanel>
    </Grid
    <Grid Grid.Row="1">
        <DataGrid AutoGenerateColumns="True" 
                  ScrollViewer.CanContentScroll="True" 
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto">

            ...............
        </DataGrid>
    </Grid>
</Grid>