WPF DataGrid in Tab Control Expanding Beyond Window

Question

I have a WPF Window which has a Tab Control, in the third row of Grid, which contains a DataGrid. The DataGrid is being populated with data from EF and when the data is loaded, the DataGrid is going beyond the bounds of the window.

I've tried various solution (e.g. setting the Vertical/Horizontal Alignments to Stretch) but nothing I have tried worked. Below is a snippet of code up to the first open tag of the DataGrid (there are actually three tabs each with a DataGrid, but they are all the same, just bound to a different data source). With the below XAML, the width binds correct (i.e. the DataGrid doesn't go beyond the right side of the window) but the horizontal part of the DataGrid does go beyond the bottom of the window:

<Grid Margin="5,0,5,0" Background="Blue" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <user_controls:Spinner x:Name="spinner" Grid.RowSpan="3" Panel.ZIndex="1000"/>

        <Menu Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top">
            <MenuItem Header="Exit" Click="Exit_Click"/>
            <MenuItem Header="Save" Command="{StaticResource SaveCommand}"/>
        </Menu>
        <GroupBox Grid.Row="1"  Header="Server Type" Margin="610,0,0,0">
            <StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Right">
                <RadioButton x:Name="rbTestServer" GroupName="ServerType" Content="TEST" Foreground="Red" IsChecked="true" Checked="ServerType_Checked"/>
                <RadioButton x:Name="rbProductionServer" GroupName="ServerType" Content="PRODUCTION" Foreground="Green" Margin="10,0,10,0" Checked="ServerType_Checked"/>
            </StackPanel>
        </GroupBox>
        <TabControl x:Name="tcTables" BorderBrush="Red" BorderThickness="5" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinHeight="371" Height="auto" MinWidth="782" Width="auto" SelectionChanged="TcTables_SelectionChanged">
            <TabItem x:Name="tiChargeType" Header="Charge Type">
                <DataGrid x:Name="dgChargeType" Background="#FFE5E5E5" AutoGenerateColumns="False" EnableRowVirtualization="True" ItemsSource="{Binding Source={StaticResource vsChargeType}}"  Margin="2,10,10,10" RowDetailsVisibilityMode="VisibleWhenSelected" CellEditEnding="CellEditEnding">

Any help/suggestions would be greatly appreciated.

Thank You

Answer 1

You have three rows in your grid:

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

Because the third is set to Auto height, it tells it's content to go as big as it likes.

This is the cause of your problem.

Change that to:

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

Then your tab control and hence the datagrid in it will have a height limited to whatever is left after rows 0 and 1.