Skip to content
This repository has been archived by the owner on May 1, 2024. It is now read-only.

[Enhancement] Expander control #9044

Merged
merged 13 commits into from
Apr 4, 2020
2 changes: 2 additions & 0 deletions Xamarin.Forms.Controls/CoreGallery.cs
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand Down Expand Up @@ -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"),
Expand Down
Original file line number Diff line number Diff line change
@@ -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 });
}
}
}
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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)));
}
}

}
}
}
37 changes: 37 additions & 0 deletions Xamarin.Forms.Core.UITests.Shared/Tests/ExpanderViewUITests.cs
Original file line number Diff line number Diff line change
@@ -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();
}
}
}
1 change: 1 addition & 0 deletions Xamarin.Forms.Core.UITests.Shared/UITestCategories.cs
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Loading