WPF DataGrid Grouped Rows in Expander adds extra column on right side, disappears when all expanders are closed

Question

Another WPF DataGrid-related question.

I have a DataGrid whose rows are grouped, and each group is underneath an Expander control. There are two columns per row. By default, I have all the expanders opened. The second column's width is set to "*", and row headers have already been turned off.

When I close all the expanders, the layout changes the tiniest bit, shifting the expander controls to the left a little. When I open any one of the expanders, they shift the tiniest bit to the right. I also notice that when an expander is open, the column headers show an additional column on the right side, which makes the horizontal scroll bar appear.

How can I adjust the datagrid declaration to make this additional column not exist/appear when an expander is open?

<Grid>
  <ScrollViewer VerticalScrollBarVisibility="Auto"
                HorizontalScrollBarVisibility="Disabled" >
    <DataGrid AutoGenerateColumns="False"
              ItemsSource="{Binding Path=MyCollection}"
              GridLinesVisibility="None"
              CanUserAddRows="False"
              CanUserDeleteRows="False"
              CanUserReorderColumns="False"
              CanUserSortColumns="False"
              CanUserResizeColumns="False"
              CanUserResizeRows="False"
              HeadersVisibility="Column">
      <DataGrid.Resources>
        <ResourceDictionary>
          <Style x:Key="{x:Type DataGridCell}" TargetType="{x:Type DataGridCell}">
            <Setter Property="Background" Value="{x:Null}" />
            <Setter Property="BorderBrush" Value="{x:Null}" />
            <Style.Triggers>
              <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="{x:Null}" />
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="BorderBrush" Value="{x:Null}" />
              </Trigger>
            </Style.Triggers>
          </Style>
          <Style x:Key="{x:Type DataGridRow}" TargetType="{x:Type DataGridRow}">
            <Setter Property="Margin" Value="4" />
            <Setter Property="Background" Value="{x:Null}" />
            <Setter Property="BorderBrush" Value="{x:Null}" />
            <Style.Triggers>
              <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="{x:Null}" />
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="BorderBrush" Value="{x:Null}" />
              </Trigger>
            </Style.Triggers>
          </Style>
        </ResourceDictionary>
      </DataGrid.Resources>
      <DataGrid.GroupStyle>
        <GroupStyle>
          <GroupStyle.Panel>
            <ItemsPanelTemplate>
              <DataGridRowsPresenter />
            </ItemsPanelTemplate>
          </GroupStyle.Panel>
          <GroupStyle.ContainerStyle>
            <Style TargetType="{x:Type GroupItem}">
              <Setter Property="Template">
                <Setter.Value>
                  <ControlTemplate TargetType="{x:Type GroupItem}">
                    <Expander Margin="4"
                              IsExpanded="True">
                      <Expander.Header>
                        <StackPanel Orientation="Horizontal"
                                    Margin="4">
                          <TextBlock FontWeight="Bold"
                                     FontSize="14"
                                     Text="{Binding Path=Name}" />
                        </StackPanel>
                      </Expander.Header>
                      <ItemsPresenter />
                    </Expander>
                  </ControlTemplate>
                </Setter.Value>
              </Setter>
            </Style>
          </GroupStyle.ContainerStyle>
        </GroupStyle>
      </DataGrid.GroupStyle>
      <DataGrid.Columns>
        <DataGridTemplateColumn Width="Auto">
        ...
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Width="*">
        ...
        </DataGridTemplateColumn>
      </DataGrid.Columns>
    </DataGrid>
  </ScrollViewer>
</Grid> 

Answer 1

This is part hack, part real answer I think.

Hack part: In order to get the horizontal scroll bar to not show up, I simply disabled it in the DataGrid declaration. Then, to ensure that the column didn't get shaved off a little on the right side, I set row margin and padding in the style I used to turn off selection color.

Real part: Setting the vertical scrollbar to always show works properly as long as the height of the second row of the outtermost grid is set to "*" (asterisk). This ensures the DataGrid will use the proper amount of space when an expander is opened and there are too many rows to show.

The final DataGrid declaration looks like this:

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

  <Label Content="Import Data Mappings"
         FontWeight="Bold"
         HorizontalAlignment="Center"
         Margin="4"
         Padding="4"
         Grid.Row="0" />
  <DataGrid AutoGenerateColumns="False"
            VerticalScrollBarVisibility="Visible"
            HorizontalScrollBarVisibility="Disabled"
            ItemsSource="{Binding Path=MyGroupedCollection, Mode=OneWay}"
            HeadersVisibility="Column"
            Grid.Row="1"
            ... >
    <DataGrid.Resources>
      <ResourceDictionary>
        <Style x:Key="{x:Type DataGridCell}" TargetType="{x:Type DataGridCell}">
          <Setter Property="Background" Value="White" />
          <Setter Property="BorderBrush" Value="{x:Null}" />
          <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
              <Setter Property="Background" Value="White" />
              <Setter Property="Foreground" Value="Black" />
              <Setter Property="BorderBrush" Value="{x:Null}" />
            </Trigger>
          </Style.Triggers>
        </Style>
        <Style x:Key="{x:Type DataGridRow}" TargetType="{x:Type DataGridRow}">
          <Setter Property="Margin" Value="0,4,0,4" />
          <Setter Property="Background" Value="White" />
          <Setter Property="BorderBrush" Value="{x:Null}" />
          <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
              <Setter Property="Background" Value="White" />
              <Setter Property="Foreground" Value="Black" />
              <Setter Property="BorderBrush" Value="{x:Null}" />
            </Trigger>
          </Style.Triggers>
        </Style>
      </ResourceDictionary>
    </DataGrid.Resources>

    <DataGrid.GroupStyle>
      <GroupStyle>
        <GroupStyle.Panel>
          <ItemsPanelTemplate>
            <DataGridRowsPresenter />
          </ItemsPanelTemplate>
        </GroupStyle.Panel>
        <GroupStyle.ContainerStyle>
          <Style TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
              <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupItem}">
                  <Expander Margin="4"
                            IsExpanded="True">
                    <Expander.Header>
                      <StackPanel Orientation="Horizontal"
                                  Margin="4">
                        <TextBlock FontWeight="Bold"
                                   FontSize="14"
                                   Text="{Binding Path=Name}" />
                      </StackPanel>
                    </Expander.Header>
                    <ItemsPresenter />
                  </Expander>
                </ControlTemplate>
              </Setter.Value>
            </Setter>
          </Style>
        </GroupStyle.ContainerStyle>
      </GroupStyle>
    </DataGrid.GroupStyle>

    <DataGrid.Columns>
      <DataGridTemplateColumn Width="Auto">
        <DataGridTemplateColumn.HeaderTemplate>
          ...
        </DataGridTemplateColumn.HeaderTemplate>
        <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
            <TextBlock .../>
          </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
      </DataGridTemplateColumn>
      <DataGridTemplateColumn Width="*">
        <DataGridTemplateColumn.HeaderTemplate>
          ...
        </DataGridTemplateColumn.HeaderTemplate>
        <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
            <DockPanel LastChildFill="True">
              <Button Style="{DynamicResource ResourceKey=MyButtonStyle}"
                      Content="Button Text"
                      Command="{Binding Path=MyButtonCommand}"
                      DockPanel.Dock="Left"/>
              <ComboBox Margin="4"
                        Padding="4"
                        SelectedItem="{Binding Path=MySelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                        ItemsSource="{Binding Path=MyAvailableFields}"
                        DockPanel.Dock="Left">
                <ComboBox.ItemTemplate>
                  <DataTemplate>
                    <TextBlock VerticalAlignment="Center"
                               HorizontalAlignment="Center"
                               Text="{Binding Path=MyDisplayName}" />
                  </DataTemplate>
                </ComboBox.ItemTemplate>
              </ComboBox>
            </DockPanel>
          </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
      </DataGridTemplateColumn>
    </DataGrid.Columns>
  </DataGrid>
</Grid>

Answer 2

The DataGrid itself has a built in scrollviewer so the outside one isn't needed. I think it is the DataGrid's scrollviewer that is causing your issue. Try getting rid of the outside ScrollViewer and add the attributes to the DataGrid, like this:

<DataGrid AutoGenerateColumns="False"
    ScrollViewer.VerticalScrollBarVisibility="Auto"
    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
    ...
    >
    ...
</DataGrid>

If you need the outside scrollviewer for some reason, keep it but still disable the DataGrid's HorizontalScrollBarVisibility.