[Enhancement] Expander control (#9044)

* Expander initial commit

* updated Expander

* tab fixes

* added spacing property

* added sample gallery page

* removed useless class

* updated sample

* cleaned code

* Update Xamarin.Forms.Core/Expander.cs

Co-Authored-By: Gerald Versluis <github@geraldversluis.nl>

* updated sample

* UITest ExpanderView (#3)

* removed empty line

* - expander flag

Co-authored-by: Gerald Versluis <github@geraldversluis.nl>
Co-authored-by: Guido Neele <guido.neele@xs4all.nl>
Co-authored-by: Shane Neuville <shneuvil@microsoft.com>

Xamarin.Forms.Controls/CoreGallery.cs

@@ -17,6 +17,7 @@
 using Xamarin.Forms.Controls.GalleryPages.PlatformTestsGallery;
 using Xamarin.Forms.Controls.GalleryPages.TwoPaneViewGalleries;
 using Xamarin.Forms.Controls.GalleryPages.AppThemeGalleries;
+using Xamarin.Forms.Controls.GalleryPages.ExpanderGalleries;
 
 namespace Xamarin.Forms.Controls
 {
@@ -297,6 +298,7 @@ public override string ToString()
 				new GalleryPageFactory(() => new RadioButtonGroupGalleryPage(), "RadioButton group Gallery - Legacy"),
 				new GalleryPageFactory(() => new RadioButtonCoreGalleryPage(), "RadioButton Gallery"),
 				new GalleryPageFactory(() => new FontImageSourceGallery(), "Font ImageSource"),
+				new GalleryPageFactory(() => new ExpanderGalleries(), "Expander Gallery"),
 				new GalleryPageFactory(() => new IndicatorsSample(), "Indicator Gallery"),
 				new GalleryPageFactory(() => new CarouselViewGallery(), "CarouselView Gallery"),
 				new GalleryPageFactory(() => new CarouselViewCoreGalleryPage(), "CarouselView Core Gallery"),

Xamarin.Forms.Controls/GalleryPages/ExpanderGalleries/ExpanderGalleries.cs

@@ -0,0 +1,45 @@
+namespace Xamarin.Forms.Controls.GalleryPages.ExpanderGalleries
+{
+	public class ExpanderGalleries : ContentPage
+	{
+		public ExpanderGalleries()
+		{
+			var descriptionLabel =
+				   new Label { Text = "Expander Galleries", Margin = new Thickness(2, 2, 2, 2) };
+
+			Title = "Expander Galleries";
+
+			var button = new Button
+			{
+				Text = "Enable Expander",
+				AutomationId = "EnableExpander"
+			};
+			button.Clicked += ButtonClicked;
+
+			Content = new ScrollView
+			{
+				Content = new StackLayout
+				{
+					Children =
+					{
+						descriptionLabel,
+						button,
+						GalleryBuilder.NavButton("Expander Gallery", () =>
+							new ExpanderGallery(), Navigation)
+					}
+				}
+			};
+		}
+
+		void ButtonClicked(object sender, System.EventArgs e)
+		{
+			var button = sender as Button;
+
+			button.Text = "Expander Enabled!";
+			button.TextColor = Color.Black;
+			button.IsEnabled = false;
+
+			Device.SetFlags(new[] { ExperimentalFlags.ExpanderExperimental });
+		}
+	}
+}

Xamarin.Forms.Controls/GalleryPages/ExpanderGalleries/ExpanderGallery.xaml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="Xamarin.Forms.Controls.GalleryPages.ExpanderGalleries.ExpanderGallery"
+             x:Name="page">
+    <ScrollView Padding="30, 20">
+        <StackLayout BindableLayout.ItemsSource="{Binding Path=Items, Source={x:Reference page}}">
+            <BindableLayout.ItemTemplate>
+                <DataTemplate>
+                    <Expander ExpandAnimationEasing="{x:Static Easing.CubicIn}"
+                                CollapseAnimationEasing="{x:Static Easing.CubicOut}"
+                                IsExpanded="{Binding IsExpanded}"
+                                Command="{Binding Path=Command, Source={x:Reference page}}"
+                                CommandParameter="{Binding .}">
+                        <Expander.Header>
+                            <Label Text="{Binding Name}" FontSize="35" FontAttributes="Bold"/>
+                        </Expander.Header>
+                        <Expander>
+                            <Expander.Header>
+                                <Label Text="Expander Level 2" FontSize="30" FontAttributes="Bold"/>
+                            </Expander.Header>
+                            <Expander.ContentTemplate>
+                                <DataTemplate>
+                                    <StackLayout BackgroundColor="Red">
+                                        <Label Text="Hi, I am Red" FontSize="40" />
+                                        <BoxView HeightRequest="50" Color="Yellow" />
+                                        <Label Text="There is an yellow box above" FontSize="40"/>
+                                    </StackLayout>
+                                </DataTemplate>
+                            </Expander.ContentTemplate>
+                        </Expander>
+                    </Expander>
+                </DataTemplate>
+            </BindableLayout.ItemTemplate>
+        </StackLayout>
+    </ScrollView>
+</ContentPage>

Xamarin.Forms.Controls/GalleryPages/ExpanderGalleries/ExpanderGallery.xaml.cs

@@ -0,0 +1,79 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Linq;
+using System.Windows.Input;
+using Xamarin.Forms;
+
+namespace Xamarin.Forms.Controls.GalleryPages.ExpanderGalleries
+{
+	public partial class ExpanderGallery : ContentPage
+	{
+		ICommand _command;
+
+		public ExpanderGallery()
+		{
+			InitializeComponent();
+		}
+
+		public ICommand Command => _command ?? (_command = new Command(p =>
+		{
+			var sender = (Item)p;
+			if(!sender.IsExpanded)
+			{
+				return;
+			}
+
+			foreach (var item in Items)
+			{
+				item.IsExpanded = sender == item;
+			}
+		}));
+
+		public Item[] Items { get; } = new Item[]
+		{
+			new Item
+			{
+				Name = "The First",
+			},
+			new Item
+			{
+				Name = "The Second",
+				IsExpanded = true
+			},
+			new Item
+			{
+				Name = "The Third",
+			},
+			new Item
+			{
+				Name = "The Fourth",
+			},
+			new Item
+			{
+				Name = "The Fifth"
+			},
+		};
+
+		public sealed class Item: INotifyPropertyChanged {
+			public event PropertyChangedEventHandler PropertyChanged;
+			bool _isExpanded;
+
+			public string Name { get; set; }
+			public bool IsExpanded
+			{
+				get => _isExpanded;
+				set
+				{
+					if(value == _isExpanded)
+					{
+						return;
+					}
+					_isExpanded = value;
+					PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsExpanded)));
+				}
+			}
+
+		}
+	}
+}

Xamarin.Forms.Core.UITests.Shared/Tests/ExpanderViewUITests.cs

@@ -0,0 +1,37 @@
+using NUnit.Framework;
+
+namespace Xamarin.Forms.Core.UITests
+{
+	[Category(UITestCategories.ExpanderView)]
+	internal class ExpanderViewUITests : BaseTestFixture
+	{
+		protected override void NavigateToGallery()
+		{
+			App.NavigateToGallery("* marked:'Expander Gallery'");
+		}
+
+		[TestCase]
+		public void ExpanderView()
+		{
+			App.WaitForElement("The Second", "");
+			App.Tap("Expander Level 2");
+			App.WaitForElement("Hi, I am Red", "View didn't expand the second level");
+			App.Tap("The Fourth");
+
+			App.WaitForNoElement("Hi, I am Red", "View didn't collapse like is should");
+
+			App.WaitForElement("Expander Level 2", "Fourth view didn't expand to show 'Expander level 2'");
+			App.Tap("Expander Level 2");
+			App.WaitForElement("Hi, I am Red", "Expander level 2 of Fourth view didn't expand like it should.");
+			App.Tap("Expander Level 2");
+
+			App.WaitForNoElement("Hi, I am Red", "View didn't collapse like is should");
+
+			App.Tap("The Fourth");
+
+			App.WaitForNoElement("Expander Level 2", "View didn't collapse like is should");
+
+			App.Back();
+		}
+	}
+}

Xamarin.Forms.Core.UITests.Shared/UITestCategories.cs

@@ -18,6 +18,7 @@ internal static class UITestCategories
 		public const string DisplayAlert = "DisplayAlert";
 		public const string Editor = "Editor";
 		public const string Entry = "Entry";
+		public const string ExpanderView = "ExpanderView";
 		public const string Frame = "Frame";
 		public const string Image = "Image";
 		public const string ImageButton = "ImageButton";

Xamarin.Forms.Core.UITests.Shared/Xamarin.Forms.Core.UITests.projitems

@@ -29,6 +29,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Tests\DisplayAlertUITests.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Tests\EditorUITests.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Tests\EntryUITests.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Tests\ExpanderViewUITests.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Tests\FrameUITests.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Tests\ImageButtonUITests.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Tests\ImageUITests.cs" />