adospace / reactorui-maui

MauiReactor is a MVU UI framework built on top of .NET MAUI
MIT License
568 stars 47 forks source link

Expander from CommunityToolkit doesn't work #122

Closed MattePozzy closed 1 year ago

MattePozzy commented 1 year ago

Hi, I have tried to use the Expander component from CommunityToolkit but it doesn't render and work correctly. The header object doesn't render, and all contents elements are immediately rendered.

Expander docs Here a sample.

Thank you.

adospace commented 1 year ago

Hi this is the code you can use to integrate the expander:

    [Scaffold(typeof(CommunityToolkit.Maui.Views.Expander))]
    public partial class VolosExpander : IVolosExpander
    {
        VisualNode IVolosExpander.Header { get; set; }

        protected override IEnumerable<VisualNode> RenderChildren()
        {
            var volosExpander = (IVolosExpander)this;
            if (volosExpander.Header != null)
            {
                return base.RenderChildren().Concat(new[] { volosExpander.Header });
            }

            return base.RenderChildren();
        }

        protected override void OnAddChild(VisualNode widget, MauiControls.BindableObject childControl)
        {
            var volosExpander = (IVolosExpander)this;
            if (widget == volosExpander.Header &&
                childControl is MauiControls.View headerView)
            {
                Validate.EnsureNotNull(NativeControl);
                NativeControl.Header = headerView;
            }

            base.OnAddChild(widget, childControl);
        }

        protected override void OnRemoveChild(VisualNode widget, MauiControls.BindableObject childControl)
        {
            var volosExpander = (IVolosExpander)this;
            if (widget == volosExpander.Header &&
                childControl is Microsoft.Maui.IView headerView)
            {
                Validate.EnsureNotNull(NativeControl);
                NativeControl.Header = null;
            }

            base.OnRemoveChild(widget, childControl);
        }
    }

    public partial interface IVolosExpander
    {
        VisualNode Header { get; set; }
    }

    public static class VolosExpanderExtensions
    {
        public static T Header<T>(this T expander, VisualNode header) where T : IVolosExpander
        {
            expander.Header = header;
            return expander;
        }
    }

    internal class MainPageState
    {
        public int Counter { get; set; }
    }

    internal class MainPage : Component<MainPageState>
    {
        public override VisualNode Render()
        {
            return new ContentPage
            {
                new VolosExpander()
                {
                    new HStack
                    {
                        new Image("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.Fill)
                            .HeightRequest(120)
                            .WidthRequest(120),

                        new Label("Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.")
                            .FontAttributes(MauiControls.FontAttributes.Italic)
                    }
                    .Padding(10)
                }
                .Header(new Label("Baboon")
                    .FontAttributes(MauiControls.FontAttributes.Bold)
                    .FontSize(18))

            };
        }
    }
adospace commented 1 year ago

BUT: 1) the above code throws an invalid cast exception when the header is set (not sure why but I guess it's something not working quite right in the native expander control) 2) Strongly discourage using it at all: the expander is simply a button that shows or hides a series of controls, easily doable in a MauiReactor component with a state IsExpanded true/false

MattePozzy commented 1 year ago

BUT:

  1. the above code throws an invalid cast exception when the header is set (not sure why but I guess it's something not working quite right in the native expander control)
  2. Strongly discourage using it at all: the expander is simply a button that shows or hides a series of controls, easily doable in a MauiReactor component with a state IsExpanded true/false

Ah ok thank you! I think I'll implement the logic without the expander control. Thank you!