0

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> 

2 Answers 2

0

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.

1
  • It seems that explicitly setting the scroll bar properties, as you suggest, does result in different behavior, but not the behavior I'm looking for. With these settings, I get no scroll bars ever, even when I have row items past the end of the grid. The extra column doesn't appear to cause any resizing issues now, but each row is slightly cut off on the right side, as though the container is reserving space past the viewable area.
    – sethlj11
    Jun 15, 2016 at 14:55
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.