C# / WPF - DataGrid - Binding the Width of a TextBox in RowDetails to that of the containing DataGrid

Question

My problem is similar to this one;

DataGrid RowDetails Width problem

Except I would like row details never to exceed the width of the columns it spans.

|--0--|--1--|--2--|--3--|--4--|
|---------Row-Details---------|

I have tried AreRowDetailsFrozen and this had no effect. I have also tried binding to the parent Grid's actual width (OneWay) but this causes the width to exceed that of my two screens.

Here is my current attempt (simplified);

  <Grid>
    <DataGrid x:Name="Grid" 
              Grid.Row="1" 
              ItemsSource="{Binding Collection}"
              IsReadOnly="True"
              AutoGenerateColumns="False" 
              ColumnWidth="Auto"
              CanUserResizeColumns="False"
              CanUserResizeRows="False"
              RowDetailsVisibilityMode="VisibleWhenSelected"
              AreRowDetailsFrozen="True"
              SelectionUnit="FullRow"
              VerticalAlignment="Top"
              HorizontalAlignment="Center">
        <DataGrid.RowDetailsTemplate>
           <!-- Begin row details section. -->
           <DataTemplate>
               <TextBox DataContext="{Binding ErrorMessage}" 
                       IsReadOnly="True"
                       Margin="5"
                       BorderBrush="Transparent"
                       ScrollViewer.VerticalScrollBarVisibility="Auto"
                       ScrollViewer.CanContentScroll="True"
                       TextWrapping="Wrap"
                       Text="{Binding .}">
               </TextBox>
           </DataTemplate>
        </DataGrid.RowDetailsTemplate>
   </DataGrid>
  </Grid>

This results in the following;

|--0--|--1--|--2--|--3--|--4--|
|---------Row-Details are as wide as the longest row in their content ---------|

Binding the width of the TextBox to any parent container (Grid, DataGrid, ItemsPresenter):

Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualWidth, Mode=OneWay}"

Results in:

                              |------Viewable Area-------|
|---- Columns ----|
|---------Row-Details --------------------------------------------------------------|

It's very frustrating, I just want the Row Details not to change the width of the DataGrid, is that so much to ask? :)

score 1 · Answer 1 · answered Aug 01 '11 at 14:02

The only way to accomplish this is to change DataGridRow ControlTemplate. There we can bind row details host width (DataGridDetailsPresenter) to width of cells. For example:

<Style x:Key="{x:Type dg:DataGridRow}" TargetType="{x:Type dg:DataGridRow}">
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="Validation.ErrorTemplate" Value="{x:Null}" />
    <Setter Property="ValidationErrorTemplate">
      <Setter.Value>
        <ControlTemplate>
          <TextBlock Margin="2,0,0,0" VerticalAlignment="Center" Foreground="Red" Text="!" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type dg:DataGridRow}">
          <Border x:Name="DGR_Border"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  SnapsToDevicePixels="True">
            <dgp:SelectiveScrollingGrid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>

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

              <dgp:DataGridCellsPresenter x:Name="cellPresenter" Grid.Column="1"
                                         ItemsPanel="{TemplateBinding ItemsPanel}"
                                         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

              <dgp:DataGridDetailsPresenter  dgp:SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding RelativeSource={RelativeSource AncestorType={x:Type dg:DataGrid}}, Path=AreRowDetailsFrozen, Converter={x:Static dg:DataGrid.RowDetailsScrollingConverter}, ConverterParameter={x:Static dg:SelectiveScrollingOrientation.Vertical}}"
                                            Grid.Column="1" Grid.Row="1"
                                            Visibility="{TemplateBinding DetailsVisibility}" Width="{Binding ElementName=cellsPresenter, Path=ActualWidth}"/>

              <dgp:DataGridRowHeader dgp:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"  Grid.RowSpan="2"
                                    Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type dg:DataGrid}}, Path=HeadersVisibility, Converter={x:Static dg:DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static dg:DataGridHeadersVisibility.Row}}"/>
            </dgp:SelectiveScrollingGrid>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Hope this helps.

Thanks for this, I'll wait a short time to see if there is a more concise approach but this is the only viable option I've seen so far. Much appreciated. — CityView, Aug 01 '11 at 14:13

score 0 · Answer 2 · edited May 23 '17 at 09:59

I answered a similar question here DataGrid RowDetails Width problem

The answers here felt like a workaround so I did some research and did find the solution on the Telerik forums, since we use their RadGridView. Turned out the solution worked for DataGrid as well.

The key is to set the ScrollViewer.HorizontalScrollBarVisibility property to Disabled, see example below.
<DataGrid ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<DataGrid.RowDetailsTemplate>
    <DataTemplate>
        <Border>
            <TextBlock Foreground="White" Text="{Binding RowDetails}"
                       TextWrapping="Wrap"/>
        </Border>
    </DataTemplate>
</DataGrid.RowDetailsTemplate> </DataGrid>

binco · Answer 3 · 2012-01-25T15:01:38.310

I've found another way to fix the Problem:

private void GridOnLoadingRowDetails(object sender, DataGridRowDetailsEventArgs e)
{
    var dataGridColumnHeadersPresenter = FindVisualChild<DataGridColumnHeadersPresenter>((DataGrid)sender);
    e.DetailsElement.SetBinding(WidthProperty, new Binding("ActualWidth") { Source = dataGridColumnHeadersPresenter });
}

This prevents you from using constant values (e.g. '6') - which won't fit, if someone set DataGrid.RowHeaderWidth - and Converters.

I've added this to the DataGrid.LoadingRowDetails event handler, since I am already tweaking the RowDetails in some other ways.

C# / WPF - DataGrid - Binding the Width of a TextBox in RowDetails to that of the containing DataGrid

3 Answers3