CODEWITHSUNDEEP
wpfxamldata-bindingdatagrid
vladc77
vladc77

Reputation: 1064

How to extend height of DataGrid based on the height of another?

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>

Upvotes: 0

Views: 1596

Answers (2)

brunnerh
brunnerh

Reputation: 184326

You can put both DataGrids into a Grid with one row each, use SharedSizeGroup to have them sync. Set Grid.IsSharedSizeScope for a parent of both grids.

e.g. something like this

<Grid x:Name="LayoutRoot" Margin="10" Grid.IsSharedSizeScope="True">
    ...
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition SharedSizeGroup="A"/>
        </Grid.RowDefinitions>
        ...
        <DataGrid .../> <!-- DataGrid 1 -->
    </Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition SharedSizeGroup="A"/>
        </Grid.RowDefinitions>
        ...
        <DataGrid .../> <!-- DataGrid 2 -->
    </Grid>
    ...
</Grid>

Upvotes: 3

HCL
HCL

Reputation: 36775

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}"
    ...

Upvotes: 1

Related Questions