Expand row in WPF datagrid

Question

I am using a DataGrid to display some log files, where each cell contains a TextBlock. I need help creating a method to expand a user selected row like this:

This is my code right now. It is based on the index of the clicked row:

DataGridRow testrow = (DataGridRow)logBrowserDataGrid.ItemContainerGenerator.ContainerFromIndex(index);

logBrowserDataGrid.UpdateLayout();
logBrowserDataGrid.ScrollIntoView(logBrowserDataGrid.Items[index]);

testrow = (DataGridRow)logBrowserDataGrid.ItemContainerGenerator.ContainerFromIndex(index);
testrow.Height = 100;

However this creates a weird result:

Do you know a god way to expand a row based on the index?

Do you know what happens in the weird result i get? It looks like i am expanding a part of the row, and the rest does stretch out. I have also studied it in runtime, and can see that its height is the correct 100, but the ActuallyHeight is still 20.

Additional info: The default size of the rows are set by the .RowHeight property on the DataGrid. I am using the AutoGenerateColumns feature, plus catching the AutogeneratingColumn event to replace the column with a DataGridTemplateColumn.

Answer 1

Why not replace the default DataGridCellTemplate with an Expander to do all that for you?

<DataGridColumn>
    <DataGridColumn.CellTemplate>
        <DataTemplate>
            <Expander Header="{Binding SomeText}">
                <TextBlock TextWrapping="Wrap" Text="{Binding SomeText}" />
            </Expander>
        </DataTemplate>
    </DataGridColumn.CellTemplate>
</DataGridColum>

If you don't like the default Expander look, you can overwrite it's Template to look like a plain TextBlock

As a side note, to stretch and vertically align a DataGridRow, you want to stretch and align the Cell Content, not the Row.

Answer 2

I tried with an Expander and the functionality was precisely what I wanted, but the look was not however. I have tried restyling the Expander to fit my need, but gave up because of the events I needed to add to it (XamlReader + events was more than my programming skills could handle). But based on Rachels suggestion I made a UserControl with the following content:

<StackPanel Orientation="Vertical" MouseUp="StackPanel_MouseUp">
   <TextBlock Name="headerTextBlock" Margin="3,2,3,2" Height="20" Width="Auto" TextWrapping="NoWrap"/>
   <TextBlock Name="textTextBlock" Margin="3,2,3,2" Height="Auto" Width="Auto" TextWrapping="NoWrap" Visibility="Collapsed"/>
</StackPanel>

In the codebehind I then can handle the event "StackPanel_MouseUp" to change the visibility of the TextBlocks. This control looks and works like I wanted the restyled Expander to do.

Now my xaml string looks like this.

string xamlCellTemplateFormat =
         @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
                         xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
                         ~local~>
                <local:CustomExpander x:Name=""UserControlTest"" Header=""{Binding Path=~binding~}"" Text=""{Binding Path=~binding~}""/>
           </DataTemplate>";

string xamlCellTemplate = xamlCellTemplateFormat.Replace("~binding~", e.Column.Header.ToString());
xamlCellTemplate = xamlCellTemplate.Replace("~local~", " xmlns:local=\"clr-namespace:IS.AppFramework.Windows.LogBrowserWPF;assembly=" + Assembly.GetExecutingAssembly().GetName().Name + "\"");