AccordionControl: I need to replace ItemsWrapGrid by ItemsRepeater

[MartinZikmund]

Discussed in #19107

^{Originally posted by MichaelJachan December 19, 2024}
Dear All, dear @jeromelaban

After bug report [Desktop] ItemsWrapGrid does not work in ListView.ItemsPanel when used as ItemsPanelTemplate #19062

I will continue here to ask your help with finding a workaround to replace the ItemsWrapGrid by ItemsRepeater.

This is the minimal version of my current AccordionCtrl

<UserControl
    x:Class="BrainVision.Uno.Controls.Common.Accordion.AccordionCtrl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BrainVision.Uno.Controls.Common.Accordion"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

  <UserControl.Resources>
    <CollectionViewSource x:Name="CategoryCollectionViewSource" IsSourceGrouped="True" />
  </UserControl.Resources>

  <ListView ItemsSource="{x:Bind CategoryCollectionViewSource.View, Mode=OneWay}"
            SelectionMode="Single"
            SelectedItem="{x:Bind SelectedItem, Mode=TwoWay}">

    <ListView.GroupStyle>
      <GroupStyle>
        <GroupStyle.HeaderContainerStyle>
          <Style TargetType="ListViewHeaderItem">
            <Setter Property="Template">
              <Setter.Value>
                <ControlTemplate TargetType="ListViewHeaderItem">
                  <ContentPresenter x:Name="HeaderContentPresenter"
                    Foreground="{ThemeResource ListViewGroupHeaderForegroundThemeBrush}"
                    Background="{ThemeResource SystemControlBackgroundBaseLowBrush}"
                    PointerReleased="Header_PointerReleased">
                  </ContentPresenter>
                </ControlTemplate>
              </Setter.Value>
            </Setter>
          </Style>
        </GroupStyle.HeaderContainerStyle>

        <GroupStyle.HeaderTemplate>
          <DataTemplate x:DataType="local:Category">
            <TextBlock Text="{x:Bind Label}" VerticalAlignment="Center"/>
          </DataTemplate>
        </GroupStyle.HeaderTemplate>
      </GroupStyle>
    </ListView.GroupStyle>

    <ListView.ItemsPanel>
      <ItemsPanelTemplate>

        <!--UNO-BUG: ItemsWrapGrid does not display under DESKTOP
        https://github.com/unoplatform/uno/issues/19062-->
        <ItemsWrapGrid Orientation="Horizontal" GroupPadding="0,0"
                       GroupHeaderPlacement="Top" AreStickyGroupHeadersEnabled="True"/>

      </ItemsPanelTemplate>
    </ListView.ItemsPanel>

    <ListView.ItemTemplate>
      <DataTemplate x:DataType="local:Item">
        <TextBlock Text="{x:Bind Label}" HorizontalAlignment="Center"/>
      </DataTemplate>
    </ListView.ItemTemplate>

  </ListView>

</UserControl>

and

namespace BrainVision.Uno.Controls.Common.Accordion;

public sealed partial class AccordionCtrl : UserControl
{
    public AccordionCtrl();

    public IList<Category> Categories;
    public static readonly DependencyProperty CategoriesProperty;

    public Item? SelectedItem;
    public static readonly DependencyProperty SelectedItemProperty;

    public Category? SelectedCategory;
    public static readonly DependencyProperty SelectedCategoryProperty;

    private void AccordionCtrl_Loaded(object sender, RoutedEventArgs e);

    private void Header_PointerReleased(object sender, PointerRoutedEventArgs e);

    private static bool IsPointerButtonUpdated(UIElement sender, PointerRoutedEventArgs e, PointerUpdateKind updateKind);

    private void OnCategoriesChanged(DependencyPropertyChangedEventArgs e);

    private void OnCategoriesCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e);

    private void Category_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e);

    private static void UpdateSelectedCategory(AccordionCtrl control, Item? selectedItem);

    private static Category GetSelectedCategory(AccordionCtrl control, Item selectedItem);
}

My Data Classes Category and Item:

[Bindable]
public partial class Category : ObservableCollection<Item>
{
    private bool _collapsed;

    private readonly List<Item> _collapsedItems = [];

    public string Label { get; }

    public bool Collapsed;

    public Category(string label, IEnumerable<Item> items, bool collapsed = false);
}

[Bindable]
public class Item
{
    public string Label { get; }

    public Item(string label);
}

BUG: As the Control ItemsWrapGrid does not work in DESKTOP, I need to find a workaround now.

MY SANDBOX: I can use the ItemsRepeater successfully in a sandbox control:

  <StackPanel>
    <ItemsRepeater ItemsSource="{x:Bind MyItems}">
      <ItemsRepeater.Layout>
        <UniformGridLayout Orientation="Horizontal" MinItemWidth="52"/>
      </ItemsRepeater.Layout>
    </ItemsRepeater>
  </StackPanel>

MY CURRENT PROBLEM: When replacing the ItemsWrapGrid by ItemsRepeater straightforwardly in Accordion:

    <ListView.ItemsPanel>
        <ItemsPanelTemplate>

        <!--UNO-BUG: ItemsWrapGrid does not display under DESKTOP https://github.com/unoplatform/uno/issues/19062
        <ItemsWrapGrid Orientation="Horizontal" GroupPadding="0,0"  GroupHeaderPlacement="Top" AreStickyGroupHeadersEnabled="True"/>
        -->

          <ItemsRepeater>
            <ItemsRepeater.Layout>
              <UniformGridLayout Orientation="Horizontal" MinItemWidth="52"/>
            </ItemsRepeater.Layout>
          </ItemsRepeater>

        </ItemsPanelTemplate>
      </ListView.ItemsPanel>

I cannot set its ItemsSource.