[Bug] TabView: Ability to select GridLength.Auto for TabViewItem width

[DanielGlick]

Description

I want each tab view item to automatically size to the content, instead of a uniform width for all tab view items

Link to Reproduction Sample

Steps to Reproduce

1. Modify the Community Toolkit Sample app TabView GettingStartedPage to this, and clear out the Xaml since we set content here

using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace Xamarin.CommunityToolkit.Sample.Pages.Views.TabView
{
	public partial class GettingStartedPage : BasePage
	{
		public GettingStartedPage()
		{
			Content = GetContent();
			InitializeComponent();
		}

		UI.Views.TabView GetContent()
		{
			var tabView = new UI.Views.TabView()
			{
				IsTabTransitionEnabled = false,
				IsSwipeEnabled = false
			};

			tabView.TabItems.Add(GetTabViewItem("Details"));
			tabView.TabItems.Add(GetTabViewItem("Contact Info"));
			tabView.TabItems.Add(GetTabViewItem("Terms"));
			tabView.TabItems.Add(GetTabViewItem("Taxes"));
			tabView.TabItems.Add(GetTabViewItem("Proposals"));
			tabView.TabItems.Add(GetTabViewItem("Invoices"));
			tabView.TabItems.Add(GetTabViewItem("Tasks"));
			tabView.TabItems.Add(GetTabViewItem("Jobs"));
			tabView.TabItems.Add(GetTabViewItem("Documents"));

			tabView.SelectedIndex = 0;
			tabView.SizeChanged += TabView_SizeChanged;

			return tabView;
		}

		UI.Views.TabViewItem GetTabViewItem(string text) => new()
		{
			Text = text,
			Padding = new Thickness(5, 0),
			FontAttributesSelected = FontAttributes.Italic,
			TextColorSelected = Color.Red,
			Content = GetBigContent()
		};

		void TabView_SizeChanged(object sender, System.EventArgs e)
		{
			if (sender is UI.Views.TabView tabView && tabView.SelectedIndex > -1)
			{
				var tab = tabView.TabItems[tabView.SelectedIndex];
				if (tab?.CurrentContent != null)
					tab.CurrentContent.Layout(tabView.Bounds);
			}
		}

		ScrollView GetBigContent()
		{
			var content = new ScrollView();

			var stack = new StackLayout();

			stack.Children.Add(new Grid() { HeightRequest = 150, Children = { new Label() { Text = "Tap here to dismiss keyboard", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center } } });
			for (var i = 0; i < 20; i++)
			{
				stack.Children.Add(new Entry() { Text = $"Item {i + 1}" });
			}

			content.Content = stack;

			return content;
		}
	}
}

3. Run the sample app and navigate to the GettingStartedPage for the tab view

Expected Behavior

Ability to have the tab view items width to GridLength.Auto sizing

Actual Behavior

The tabs get resized to GridLength.Star sizing, which causes ugly blank space

Basic Information

• Version with issue: All
• Last known good version: N/A
• IDE: VS 2022 Enterprise
• Platform Target Frameworks:
  • iOS: N/A
  • Android: 12
  • UWP: N/A
• Android Support Library Version: N/A
• Nuget Packages:
• Affected Devices:

Workaround

Use reflection to find the tabStripContainer field, then loop through the columns and set Width = GridLength.Star

Reproduction imagery

[DanielGlick]

Would someone be able to review this?

[pictos]

@DanielGlick45 Thanks for your proposal and PR, sadly this project just accepts bug fixes. I strongly encourage you to move this proposal to CommunityToolkit.MAUI, that's the port of this lib. to the .NET MAIU. You can copy and paste the API spec that you created on your PR to us to vote on it.

Here's a sample of a proposal

Click here to go create your proposal.