WPF How to set DataGrid.Group header text when it&

Question

I am working with WPF application, and I grouped my items using <DataGrid.GroupStyle>, I am wondering how can I set header text when group is collapsed. I'm loading orders into that grouped grid, and when I collapse specific group I would like to see something like Order : number of order, because of easier orient. Right now I am seeing only number of order, but how could I add text to:

<DockPanel>
   <TextBlock FontWeight="Bold" Text="{Binding Path=Name}" /> //+ some text
</DockPanel>

(Also, after I added <DataGrid.Columns> because I want to add my columns manualy suddenly vertical slider appear on screen even if there is no more items left or right and it looks bad and annoying, how could I remove that slider, I want to keep my datagrid columns because I want to style them as I want, but I don't want to see that slider :/ ?)

Here is my code:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>

<DataGrid Grid.Column="0" RowHeaderWidth="0" CanUserAddRows="False" AutoGenerateColumns="False"  x:Name="datagrid1" Margin="10,150,8,50" Background="Transparent" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" ItemsSource="{Binding}">

  <DataGrid.Resources>
    <Style TargetType="{x:Type DataGridColumnHeader}">
      <Setter Property="Background" Value="Black"/>
      <Setter Property="Opacity" Value="0.5"/>
      <Setter Property="Foreground" Value="White"/>
      <Setter Property="HorizontalContentAlignment" Value="Center" />
      <Setter Property="FontSize" Value="15"/>
      <Setter Property="FontFamily" Value="Arial"/>
      <Setter Property="Height" Value="50"/>
    </Style>
  </DataGrid.Resources>

  <DataGrid.Columns>
    <DataGridTextColumn Binding="{Binding ProductName}"      Header="Title"      MinWidth="50"   FontSize="16"  FontFamily="Verdana" />
    <DataGridTextColumn Binding="{Binding Quantity}"       Header="Quantity"    MinWidth="30"   FontSize="16"  FontFamily="Verdana" />
    <DataGridTextColumn Binding="{Binding NumberOfOrder}"    Header="Order number"  MinWidth="30"   FontSize="16"  FontFamily="Verdana" />
    <DataGridTextColumn Binding="{Binding User}"          Header="User"         Width="*"     FontSize="16"   FontFamily="Verdana" />
  </DataGrid.Columns>

  <DataGrid.GroupStyle>
    <!-- Style for groups at top level. -->
    <GroupStyle>
      <GroupStyle.ContainerStyle>
        <Style TargetType="{x:Type GroupItem}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type GroupItem}">
                <Expander IsExpanded="True">
                  <Expander.Header>
                    <DockPanel>
                      <TextBlock FontWeight="Bold" Text="{Binding Path=Name}" /> //I am wondering what does this line mean?
                    </DockPanel>
                  </Expander.Header>
                  <Expander.Content>
                    <ItemsPresenter />
                  </Expander.Content>
                </Expander>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </GroupStyle.ContainerStyle>
    </GroupStyle>
  </DataGrid.GroupStyle>
</DataGrid>

P.S ScreenShot of vertical slider @ bottom of my datagrid

Answer 1

We need a Trigger here as shown below, and an IValueConverter to find number of items in a group :

<Expander.Style>
    <Style TargetType="Expander">
        <Style.Triggers>
            <Trigger Property="IsExpanded" Value="True">
                <Setter Property="Header">
                    <Setter.Value>
                        <DockPanel>
                            <TextBlock FontWeight="Bold" Text="{Binding Name}" />
                        </DockPanel>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsExpanded" Value="False">
                <Setter Property="Header">
                    <Setter.Value>
                        <DockPanel>
                            <TextBlock FontWeight="Bold">
                              <TextBlock.Inlines>
                                 <Run Text="{Binding Name}"/>
                                 <Run Text=" ( "/>
                                   <Run Text="{Binding Name, Converter={StaticResource ItemCountCnvKey}}" />
                                 <Run Text=" ) "/>
                              </TextBlock.Inlines>
                            </TextBlock>
                        </DockPanel>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Expander.Style>

ItemCountConverter

public class ItemCountConverter : IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        CollectionViewGroup group = (CollectionViewGroup)value;            
        ReadOnlyObservableCollection<object> items = group.Items;
        return items.Count;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}