Question

I’d like to be able have equal heights of two DataGrids based on the DataGrid that have more data and become higher because of it. In other words, I’d like to have two DataGrids be the same in heights regardless data input. I have one row and few columns where one DataGrid takes one column and another DataGrid takes another column. In case, one of DataGrid gets more input then it extends taller. I want another DataGrid to be the same tall with empty space below. I am wondering how I can make it work. Any DataGrid should expand automatically based on the height of taller DataGrid. Any ideas are highly appreciated!

Below is sample XAML:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="DataGridExpand.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">

<Window.Resources>
    <XmlDataProvider x:Key="Info" XPath="Info/Values">
          <x:XData> 
            <Info xmlns="">
              <Values Name="Value1" />
              <Values Name="Value2"  />
              <Values Name="Value3" />
              <Values Name="Value4" />
              <Values Name="Value5"  />
              <Values Name="Value6"  />
              <Values Name="Value7"  />
              <Values Name="Value8"  />
              <Values Name="Value9"  />
            </Info>
          </x:XData>
    </XmlDataProvider>
    <XmlDataProvider x:Key="Info2" XPath="Info2/Values2">
          <x:XData> 
            <Info2 xmlns="">
              <Values2 Name="Value1" />
              <Values2 Name="Value2"  />
              <Values2 Name="Value3" />
              <Values2 Name="Value4" />
              <Values2 Name="Value5" />
            </Info2>
          </x:XData>
    </XmlDataProvider>
</Window.Resources>

<Grid x:Name="LayoutRoot" Margin="10" > 
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="49*" />
        <ColumnDefinition Width="20" />
        <ColumnDefinition Width="49*" />
    </Grid.ColumnDefinitions>
    <Border Padding="10" BorderBrush="Black" Background="#FFD2D2D2">
        <DataGrid x:Name="Main" GridLinesVisibility="Horizontal" AutoGenerateColumns="False" 
            ItemsSource="{Binding XPath=/Info2/Values2}"
            DataContext="{Binding Source={StaticResource Info2}}" Margin="10">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding XPath=@Name}" Foreground="#FF6E6E6E" Width="160" />   
            </DataGrid.Columns>
        </DataGrid>
    </Border>
    <GridSplitter x:Name="GridSplitter" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch" Grid.Column="1" />
    <Border Grid.Column="2" Padding="10" BorderBrush="Black" Background="#FFD2D2D2">
        <DataGrid x:Name="Main1" GridLinesVisibility="Horizontal" AutoGenerateColumns="False" Margin="10"
            ItemsSource="{Binding XPath=/Info/Values}" 
            DataContext="{Binding Source={StaticResource Info}}">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding XPath=@Name}" Foreground="#FF6E6E6E" Width="160" />   
            </DataGrid.Columns>
        </DataGrid>
    </Border>
</Grid>

Answer 1

If I understand you right, you need to have both DataGrids to have the exactly same height? Try setting the MinimumHeight of one DataGrid to the ActualHeight of the other and vice versa. This may do the trick:

<DataGrid x:Name="Main" 
    MinHeight="{Binding ElementName=Main1,Path=ActualHeight}"
    ...

<DataGrid x:Name="Main1" GridLinesVisibility="Horizontal" AutoGenerateColumns="False"
    MinHeight="{Binding ElementName=Main,Path=ActualHeight}"
    ...