Search code examples
c#.netwpfvisual-studiowpfdatagrid

WPF: How to set DataGrid height so it do not cross parent (Window/UserControl) area


In a WPF project (VS2015) I have a DataGrid inside UserControl. When the DataGrid has enough items to scroll, the height of DataGrid goes beyond the UserControl's height and goes off-screen.

I tried putting DataGrid in StackPanel, ScrollViewer, Grid, VerticalAlignment to Top/Stretch but no help.

When I set height according to the parent height using the below code, the height of DataGrid works somewhat correctly. But the problem with this method is that my DataGrid is set after some other controls on screen, so I cannot use the UserControl height as it is. I will need to subtract starting position of DataGrid form the UserControl height. I am not getting how to do that?

Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=ActualHeight}"

Here is my DataGrid

<DataGrid Name="ItemsDataGrid" ItemsSource="{Binding ItemData}" 
    IsReadOnly="True" AutoGenerateColumns="False">
    <DataGrid.Columns>
        ...
    </DataGrid.Columns>
</DataGrid>

Edit #1

`

<UserControl x:Class="CC.ItemsListView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
    xmlns:local="clr-namespace:CC"
    mc:Ignorable="d" 
    d:DesignHeight="730" d:DesignWidth="850"
    Style="{StaticResource FormsBaseStyle}">
    <StackPanel Background="LightGray">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="Items" Style="{StaticResource FormHeaderStyle}"/>
            <xctk:WatermarkTextBox Grid.Column="1" Name="ItemNameSearchTxt" TextChanged="ItemNameSearchTxt_TextChanged"/>
            <Button Grid.Column="2" Name="AddNewBtn" Content="Add New" Padding="20, 0" HorizontalAlignment="Right" Click="AddNewBtn_Click"/>
            <Button Grid.Column="3" Name="DeleteBtn" Content="Delete" Padding="20, 0" HorizontalAlignment="Right" Click="DeleteBtn_Click"/>
            <Button Grid.Column="4" Name="ExportBtn" Content="Export" Padding="20, 0" HorizontalAlignment="Right"/>
        </Grid>
        <Separator Height="1" Width="Auto" VerticalAlignment="Bottom"/>
        <DataGrid Name="ItemsDataGrid" ItemsSource="{Binding ItemDS}" IsReadOnly="True" AutoGenerateColumns="False">
            <DataGrid.Columns>
                ...
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>
</UserControl>

`


Solution

  • Try this layout.

      <Grid Background="LightGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="Items" Style="{StaticResource FormHeaderStyle}"/>
            <xctk:WatermarkTextBox Grid.Column="1" Name="ItemNameSearchTxt" TextChanged="ItemNameSearchTxt_TextChanged"/>
            <Button Grid.Column="2" Name="AddNewBtn" Content="Add New" Padding="20, 0" HorizontalAlignment="Right" Click="AddNewBtn_Click"/>
            <Button Grid.Column="3" Name="DeleteBtn" Content="Delete" Padding="20, 0" HorizontalAlignment="Right" Click="DeleteBtn_Click"/>
            <Button Grid.Column="4" Name="ExportBtn" Content="Export" Padding="20, 0" HorizontalAlignment="Right"/>
        </Grid>
        <Separator Grid.Row="1" Height="1" Width="Auto" VerticalAlignment="Bottom"/>
        <DataGrid Grid.Row="2" Name="ItemsDataGrid" ItemsSource="{Binding ItemDS}" IsReadOnly="True" AutoGenerateColumns="False">
            <DataGrid.Columns>
                ...
            </DataGrid.Columns>
        </DataGrid>
    </Grid>