adospace / reactorui-maui

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

Get property of a third part component #92

Closed MattePozzy closed 1 year ago

MattePozzy commented 1 year ago

Hi, I have create this scaffold method:


    [Scaffold(typeof(Syncfusion.Maui.Popup.SfPopup))]
    public partial class VolosPopUp
    {
        private void Init()
        {
            base.OnMount();
            this.WidthRequest(DeviceDisplay.Current.MainDisplayInfo.Width / 2);
            this.HeightRequest(DeviceDisplay.Current.MainDisplayInfo.Height / 2);
        }

        public VolosPopUp SetText(string testo)
        {
            Init();

            this.Set(Syncfusion.Maui.Popup.SfPopup.ContentTemplateProperty,
                new MauiControls.DataTemplate(() => TemplateHost.Create(DefaultLabelText(testo)).NativeElement));

            return this;
        }

        public VolosPopUp Content(Func<VisualNode> render)
        {
            Init();

            this.Set(Syncfusion.Maui.Popup.SfPopup.ContentTemplateProperty,
                new MauiControls.DataTemplate(() => TemplateHost.Create(DefaultMsgContainer(render)).NativeElement));
            return this;
        }

        public VolosPopUp SetHeaderText(string headerText)
        {
            this.Set(Syncfusion.Maui.Popup.SfPopup.HeaderTemplateProperty,
                new MauiControls.DataTemplate(() => TemplateHost.Create(VolosPopUp.DefaultHeaderTemplate(headerText)).NativeElement));
            return this;
        }

        public VolosPopUp SetHeaderTemplate(Func<VisualNode> render)
        {
            this.Set(Syncfusion.Maui.Popup.SfPopup.HeaderTemplateProperty,
              new MauiControls.DataTemplate(() => TemplateHost.Create(render()).NativeElement));
            return this;
        }

        private static VisualNode DefaultLabelText(string testo)
        {
            VisualNode render() =>
                new Label(testo)
                    .HorizontalTextAlignment(TextAlignment.Start)
                    .VerticalTextAlignment(TextAlignment.Start)
                    .LineBreakMode(LineBreakMode.WordWrap);
            return DefaultMsgContainer(render);
        }

        private static VisualNode DefaultMsgContainer(Func<VisualNode> render)
        {
            VisualNode vn =
                new ScrollView {
                    new VStack {
                        render()
                    }.Padding(10)
                };
            return vn;
        }

        private static VisualNode DefaultHeaderTemplate(string headerText)
        {
            Label lblTitolo = new Label(headerText)
                    .FontAttributes(MauiControls.FontAttributes.Bold)
                    .FontSize(16)
                    .HorizontalTextAlignment(TextAlignment.Center)
                    .VerticalTextAlignment(TextAlignment.Center);

            lblTitolo.TextColor(Utility.GetResources<Color>(Utility.IsDarkTheme() ? "White" : "Black"));

            VisualNode vn =
                new VStack() {
                    lblTitolo
                }.Padding(0);
            return vn;
        }
    }

    [Scaffold(typeof(Syncfusion.Maui.Core.SfView))]
    public abstract class SfView { }

The original component SfPopup has a property called AutoSizeMode, with get and set. This property has been translated to the method AutoSizeMode but in this way I am unable to get the setted value. image

There is a way to solve this issue?

Thank you.

adospace commented 1 year ago

Hi, I think you're over complicating things, you should never directly call internal methods like OnMount or set native properties. In your case you should never try to read the autosize property, but only set it. If you need to manage the autosize value then probably you need to store it in the component state. I strongly encourage you to first learn to use the component based model or MVU approach trying to not use/mix it with MVVM or imperative models. Start creating sample apps that do not require custom scaffolding, before accessing a native control try to see if there's an alternative way. Also take a look at the numerous samples you can find on my repositories here.

MattePozzy commented 1 year ago

Yes you are right. I have to switch a complex xamarin forms'app to MAUI and i wanted to use MVU approach but i am very new to it. Unfortunately many custom components had been made on xamarin and I have to translate them to MVU so I need to use scaffolding.

I will look at your examples and study the MVU approach better. Thank you!