Skip to content

[Windows/Android] Header/Footer re-add and removal issues in CollectionViewΒ #31911

@devanathan-vaithiyanathan

Description

Description

When the header/footer are added in CollectionView, the following issues were observed on Windows and Android platforms:

Windows: When toggling the Header/Footer button to the null state and then enabling it again, the header or footer content is not added back

Android: The header and footer are not removed at runtime when set to null.

Actual Behavior:
Windows - the header or footer content is not added back.
Android retains the old header/footer even after setting them to null.

Expected Behavior:
On Windows: Header/Footer should be re-added.
On Android: Header/Footer should be removed properly when set to null.

Steps to Reproduce

public partial class MainPage : ContentPage
{
    private CollectionView _collectionView;
    private Button _headerButton;
    private Button _footerButton;

	public MainPage()
	{
        //InitializeComponent();
		var grid = new Grid
        {
            Margin = new Thickness(20),
            RowDefinitions =
            {
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = GridLength.Star }
            }
        };



        // Header Label
        var headerLabel = new Label
		{
			Text = "Test for CollectionView empty view positioning",
			AutomationId = "HeaderLabel",
        };
        Grid.SetRow(headerLabel, 0);
        grid.Children.Add(headerLabel);

        // Control buttons
        var buttonGrid = new Grid
        {
            ColumnDefinitions =
            {
                new ColumnDefinition { Width = GridLength.Star },
                new ColumnDefinition { Width = GridLength.Star }
            },
            Margin = new Thickness(0, 10)
        };

        var toggleHeaderButton = new Button
        {
            AutomationId = "ToggleHeaderButton",
            Text = "Remove Header",
        };
        toggleHeaderButton.Clicked += OnToggleHeaderClicked;
        Grid.SetColumn(toggleHeaderButton, 0);
        buttonGrid.Children.Add(toggleHeaderButton);

        var toggleFooterButton = new Button
        {
            AutomationId = "ToggleFooterButton", 
            Text = "Remove Footer",
        };
        toggleFooterButton.Clicked += OnToggleFooterClicked;
        Grid.SetColumn(toggleFooterButton, 1);
        buttonGrid.Children.Add(toggleFooterButton);

        Grid.SetRow(buttonGrid, 1);
        grid.Children.Add(buttonGrid);

        // CollectionView
        _collectionView = new CollectionView
        {
			AutomationId = "CollectionView",
            ItemsSource = Array.Empty<string>(), // empty array to trigger EmptyView
            ItemTemplate = new DataTemplate(() =>
            {
                return new Label
                {
                    TextColor = Colors.Black,
                    FontSize = 16,
                    // This binding works with string items
                    BindingContext = "{Binding .}" 
                };
            })
        };

        // EmptyView
        _collectionView.EmptyView = new Label
        {
            AutomationId = "EmptyViewLabel",
            BackgroundColor = Color.FromArgb("#FFE40606"),
            Text = "EmptyView: This should show when no data.",
        };

        // Initial header
        _headerButton = new Button
        {
            AutomationId = "CollectionViewHeader",
            BackgroundColor = Colors.LightBlue,
            Text = "Header: Click me to verify EmptyView position",
        };
        _collectionView.Header = _headerButton;

        // Initial footer (null)
        _footerButton = new Button
        {
            AutomationId = "CollectionViewFooter",
            BackgroundColor = Colors.LightCoral,
            Text = "Footer: Click me to verify EmptyView position",
        };
        _collectionView.Footer = _footerButton

        Grid.SetRow(_collectionView, 2);
        grid.Children.Add(_collectionView);

        // Set ContentPage content
        Content = grid;
	}

    private void OnToggleHeaderClicked(object? sender, EventArgs e)
    {
        var button = (Button)sender!;
        
        if (_collectionView.Header != null)
        {
            _collectionView.Header = null;
            button.Text = "Add Header";
        }
        else
        {
            _collectionView.Header = _headerButton;
            button.Text = "Remove Header";
        }
    }

    private void OnToggleFooterClicked(object?  sender, EventArgs e)
    {
        var button = (Button)sender!;
        
        if (_collectionView.Footer != null)
        {
            _collectionView.Footer = null;
            button.Text = "Add Footer";
        }
        else
        {
            _collectionView.Footer = _footerButton;
            button.Text = "Remove Footer";
        }
    }
}

1.Paste the above code in Code behind
2. Toggle the header and footer button

Link to public reproduction project repository

No response

Version with bug

9.0.110 SR11

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

Windows, Android

Affected platform versions

Windows 10, Android 14

Did you find any workaround?

No response

Relevant log output

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions