WPF 垂直拉伸行

Question

Hello hello everyone
I got one problem recently.
I tried put one datagrid into another datagrid.
Main datagrid has two columns - text and template (here I put another datagrid). Inner datagrid has one text column.
The problem show herself when Main DG text cell's height exceed sum height of inner DG cells.
Something like that:
Image
My question is: Can I do something with gray rectangle? Can I equally divide gray height between rows? Or simple stretch rows?
Or is there better way to do it? Not only 2-level datagrid, but to 3,4,5-levels and for more complicated datagrids.

Simple example:
Window:

<DockPanel>
    <DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False" HeadersVisibility="None" CanUserAddRows="False">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Path=Col1}" Width="*"/>
            <DataGridTemplateColumn Width="*">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <DataGrid ItemsSource="{Binding Path=Col2}" AutoGenerateColumns="False" HeadersVisibility="None" CanUserAddRows="False">
                            <DataGrid.Columns>
                                <DataGridTextColumn Binding="{Binding}" Width="*"/>
                            </DataGrid.Columns>
                        </DataGrid>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
</DockPanel>

Code behind:

public class Test1 : NotifyPropertyClass
{

    private string col1;
    public string Col1
    {
        get { return col1; }
        set { col1 = value; OnPropertyChanged("Col1"); }
    }
    private List<string> col2;
    public List<string> Col2
    {
        get { return col2; }
        set { col2 = value; OnPropertyChanged("Col2"); }
    }
}

public ObservableCollection<Test1> dc;

public MainWindow()
{
    dc = new ObservableCollection<Test1>()
        {
            new Test1() { Col1 = "00" + Environment.NewLine + Environment.NewLine + Environment.NewLine + Environment.NewLine + "00",
                          Col2 = new List<string>() { "123", "456"} }
        };
    DataContext = dc;
    InitializeComponent();
}

Answer 1

If you want to stretch the rows vertically you could use a converter that binds to the parent (inner) DataGrid and sets the height of the DataGridRow item containers based on the height of the DataGrid :

namespace WpfApplication1
{
    public class RowHeightConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            DataGrid dg = value as DataGrid;
            if(dg != null && dg.Items.Count > 0)
            {
                return dg.ActualHeight / dg.Items.Count;
            }

            return 20; //return some default height
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotSupportedException();
        }
    }
}

Sample usage:

<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False" HeadersVisibility="None" CanUserAddRows="False"
                      xmlns:local="clr-namespace:WpfApplication1">
    <DataGrid.Resources>
        <local:RowHeightConverter x:Key="conv" />
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Path=Col1}" Width="*"/>
        <DataGridTemplateColumn Width="*">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <DataGrid ItemsSource="{Binding Path=Col2}" AutoGenerateColumns="False" HeadersVisibility="None" CanUserAddRows="False">
                        <DataGrid.ItemContainerStyle>
                            <Style TargetType="DataGridRow">
                                <Setter Property="Height" Value="{Binding Path=., RelativeSource={RelativeSource AncestorType=DataGrid}, 
                                                Converter={StaticResource conv}}" />
                            </Style>
                        </DataGrid.ItemContainerStyle>
                        <DataGrid.Columns>
                            <DataGridTextColumn Binding="{Binding}" Width="*"/>
                        </DataGrid.Columns>
                    </DataGrid>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>