[Proposal] Expander

Expander

• Proposed
• Prototype
• Implementation
  • iOS Support
  • Android Support
  • macOS Support
  • Windows Support
• Unit Tests
• Sample
• Documentation: https://github.com/MicrosoftDocs/CommunityToolkit/pull/165#pullrequestreview-1172896030

Summary

The Xamarin.CommunityToolkit Expander control provides an expandable container to host any content. The control has a header and content, and the content is shown or hidden by tapping the Expander header. When only the Expander header is shown, the Expander is collapsed. When the Expander content is visible the Expander is expanded.

Detailed Design

Expander.shared.cs

[ContentProperty(nameof(Content))]
public class Expander : BaseTemplatedView<StackLayout>
{
  public static readonly BindableProperty HeaderProperty;
  public static readonly BindableProperty ContentProperty;
  public static readonly BindableProperty ContentTemplateProperty;
  public static readonly BindableProperty IsExpandedProperty;
  public static readonly BindableProperty DirectionProperty;
  public static readonly BindableProperty TouchCaptureViewProperty;
  public static readonly BindableProperty AnimationLengthProperty;
  public static readonly BindableProperty ExpandAnimationLengthProperty;
  public static readonly BindableProperty CollapseAnimationLengthProperty;
  public static readonly BindableProperty AnimationEasingProperty;
  public static readonly BindableProperty ExpandAnimationEasingProperty;
  public static readonly BindableProperty CollapseAnimationEasingProperty;
  public static readonly BindableProperty StateProperty;
  public static readonly BindableProperty CommandParameterProperty;
  public static readonly BindableProperty CommandProperty;
  public static readonly BindableProperty ForceUpdateSizeCommandProperty;
  
  public event EventHandler Tapped { get; set; }
  
  public View? Header { get; set; } 
  public View? Content { get; set; }
  public DataTemplate? ContentTemplate { get; set; }
  public bool IsExpanded { get; set; }
  public ExpandDirection Direction { get; set; }
  public View? TouchCaptureView { get; set; }
  public uint AnimationLength { get; set; }
  public uint ExpandAnimationLength { get; set; }
  public uint CollapseAnimationLength { get; set; }
  public Easing AnimationEasing { get; set; }
  public Easing ExpandAnimationEasing { get; set; }
  public Easing CollapseAnimationEasing { get; set; }
  public ExpandState State { get; set; }
  public object? CommandParameter { get; set; }
  public ICommand? Command { get; set; }
  public ICommand ForceUpdateSizeCommand { get; set; }
  
  public void ForceUpdateSize();
}

Usage Syntax

XAML Usage

<Expander>
    <Expander.Header>
        <Label Text="Baboon"
               FontAttributes="Bold"
               FontSize="Medium" />
    </Expander.Header>
    <Grid Padding="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               Aspect="AspectFill"
               HeightRequest="120"
               WidthRequest="120" />
        <Label Grid.Column="1"
               Text="Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae."
               FontAttributes="Italic" />
    </Grid>
</Expander>

C# Usage

Expander expander = new Expander
{
    Header = new Label
    {
        Text = "Baboon",
        FontAttributes = FontAttributes.Bold,
        FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label))
    }
};

Grid grid = new Grid
{
    Padding = new Thickness(10),
    ColumnDefinitions =
    {
        new ColumnDefinition { Width = GridLength.Auto },
        new ColumnDefinition { Width = GridLength.Auto }
    }
};

grid.Children.Add(new Image
{
    Source = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg",
    Aspect = Aspect.AspectFill,
    HeightRequest = 120,
    WidthRequest = 120
});

grid.Children.Add(new Label
{
    Text = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
    FontAttributes = FontAttributes.Italic
}, 1, 0);

expander.Content = grid;

[EPS-Lac]

Hi 😃 Is there any updates on when we can expect this to be released? I’m in need of an expander, and it’d be great if I could use this (especially since the implementation seems to be done) instead of having to implement something myself.

[Zerorigin]

When will the v1.1.0 milestone be released of CommunityToolkit.MAUI? Expander is very useful, hope to migrate it soon.