Invalid column resizing in ListView with Expander

Question

I noticed very strange behaviour. Actually there are two problems. Look at this gif:

On left there is a ListView with groups. On right there is a ListView without gropus. This is the same code. The difference is just when a condition is met, groups are created.

Now, the first thing. Look at font colors. In ListView without groups there is a default blue color. In ListView with groups, fonts are black.

And the second thing. Look at column resizing. In ListView without groups everything works as expected. But in ListView with groups, there is something strange going on... When I increase Name column, Limit column values dissappear at some stage. And whole content moves.

I tried to change ListView to DataGrid, but the outcome was even worse. So, what can be the problem here?

This is style for my groups:

<Style TargetType="{x:Type GroupItem}" x:Key="CategoryStyle">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Name.IsDefault}" Value="False">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Expander IsExpanded="True" Width="200">
                                <Expander.Header>
                                    <DockPanel Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Expander}}, Path=ActualWidth}">
                                        <Button DockPanel.Dock="Right" Style="{StaticResource RoundBtnStyle}" Content="+" 
                                                Margin="0,0,28,0" Width="20" Height="20"
                                                Tag="{Binding}"
                                                Command="{Binding DataContext.AddItemToCategoryCommand, RelativeSource={RelativeSource AncestorType={x:Type app:DocumentControl}}}"
                                                CommandParameter="{Binding Name}"
                                                />

                                        <TextBlock Text="{Binding Name}" 
                                                   FontWeight="Bold" 
                                                   FontSize="22" 
                                                   VerticalAlignment="Bottom" 
                                                   Opacity="0.5" />
                                    </DockPanel>

                                </Expander.Header>
                                <ItemsPresenter />
                            </Expander>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>            
    </Style>

This is my ListView simplified code:

<ListView Name="listView" ItemsSource="{Binding Source={StaticResource items}}"
              MouseDoubleClick="ListView_MouseDoubleClick"
              >
        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsSpentOverLimit}" Value="True">
                        <Setter Property="Background" Value="Maroon"/>
                        <Setter Property="Foreground" Value="White"/>
                        <Setter Property="ToolTip">
                            <Setter.Value>
                                <StackPanel Orientation="Horizontal" Margin="5">
                                    <TextBlock Text="{app:Localize SpentOverLimitHint}" Margin="0,0,5,0"/>
                                    <TextBlock Text="{Binding SpentOverLimit, Converter={StaticResource MoneyConverter}}"/>
                                </StackPanel>
                            </Setter.Value>
                        </Setter> 
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>

        <!-- Columns -->
        <ListView.View>
            <GridView AllowsColumnReorder="False" x:Name="gridView">
                <GridViewColumn Header="{app:Localize Column_Name}" Width="150" DisplayMemberBinding="{Binding Name}"/>
            </GridView>
        </ListView.View>

        <!-- Categories -->
        <ListView.GroupStyle>
            <GroupStyle ContainerStyle="{StaticResource CategoryStyle}" />
        </ListView.GroupStyle>
</ListView>

And finally CollectionViewSource:

<CollectionViewSource Source="{Binding Items}" x:Key="items">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="ParentCategory"/>
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>

What's wrong here?

Answer 1

Your font color is not being set in either one of the styles that you posted XAML for, so that means it is being inherited by a parent object, or a style that is not posted in your question.

The resizing issue of your GroupItem is caused by the following line in your control template:

<Expander IsExpanded="True" Width="200">

You have hard-coded a width of '200' for your expander element and that is causing it to overlay the other grid columns when they are sized smaller than 200, making things look a little bit strange.