[Proposal] Expander

[brminnick]

Expander

• [x] Proposed
• [x] Prototype
• [x] Implementation
  • [x] iOS Support
  • [x] Android Support
  • [x] macOS Support
  • [x] Windows Support
• [ ] Unit Tests: Not Started
• [ ] Sample: Not Started
• [ ] Documentation: Not Started

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;

[Zerorigin]

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

[VladislavAntonyuk]

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

July or later

[IndianaGary]

I would very much like to see this implemented. I did try using it on XF but ran into issues trying to use it inside a CollectionView. The Maui implementation needs to be usable in CollectionView. It also needs to be nestable; that is, it should be possible to place an Expander inside an Expander. I did find the XF implementation complex and would prefer the Maui implementation to be simplified. At this point, I do not think it needs to be identical to the XF implementation.

[pictos]

@IndianaGary do you have some API spec in mind?

[IndianaGary]

Nothing specific atm. The XF implementation wasn't bad, it just didn't always work and had some limitations, especially nested Expanders, which is a very common item on the wish list. I seem to recall that there were issue trying to use in in ListView and/or CollectionView. Let me give it some more thought.

From: Pedro Jesus @.> Sent: Friday, May 20, 2022 4:21 PM To: CommunityToolkit/Maui @.> Cc: Gary Lewis @.>; Mention @.> Subject: Re: [CommunityToolkit/Maui] [Proposal] Expander (#109)

@IndianaGaryhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FIndianaGary&data=05%7C01%7C%7C5f3921d97ee041958c5608da3ab77395%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637886856840044770%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=iqn3R92o6TeOj4lqYOCelGIwLHMrJmTXktkpjb%2FArx0%3D&reserved=0 do you have some API spec in mind?

Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FCommunityToolkit%2FMaui%2Fissues%2F109%23issuecomment-1133458991&data=05%7C01%7C%7C5f3921d97ee041958c5608da3ab77395%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637886856840044770%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=vxeD4qJK5PNGjjGsybH%2FoYtj5VtNQME%2FVv3%2BBkePN9g%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FADFAH7G5VCZSFKZKEI2OE4TVLAM7DANCNFSM5E4JPVWQ&data=05%7C01%7C%7C5f3921d97ee041958c5608da3ab77395%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637886856840044770%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=8IZPQoZiJ%2BWKz7UVZrv2oQ7RXuhmLm%2FBcy63cIp%2F1p0%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.@.>>

[VladislavAntonyuk]

It will work great on Android, nesting works even in CollectionView. Will see how it works on iOS.

[brminnick]

I vote to approve this Proposal ✅

[pictos]

I approve this feature ✅

[bijington]

I vote to approve ✅

[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.

[ghost]

Reopening Proposal.

Only Proposals moved to the Closed Project Column and Completed Project Column can be closed.