MauiReactor Stacklayout inside datatemplate

Hi, I’m using some 3rd part component that have a property called ContentTemplate that accepts a DataTemplate.

I have used this code but it goes on error:

class MainPage : Component
   {
       SfPopup poppy;
       public override VisualNode Render()
       {
           poppy = new SfPopup()
           {
               IsOpen = false,
               ContentTemplate = new MauiControls.DataTemplate(() =>
               {
                   StackLayout stack = new()
                   {
                       new Label("testo popup")
                   };

                   return stack;
               })
           };

           return new ContentPage("Pagina uno")
           {
               new ScrollView() {
                   new Label("Main page"),
                   new Button().Text("Apri popup").OnClicked(ApriPopup)
               }.VCenter().HCenter()
           };
       }

       private void ApriPopup()
       {
           poppy.Show();
       }
   }

This is the erorr:

How can i use the MauiReactor Stacklayout inside a DataTemplate?

Thank you.

[adospace]

ok, I see that SfPopup doesn’t provide a direct way to set the content so you have to use a TemplateHost (that is a class that allows you to create a native Maui control from a MauiReactor VisualNode):

[Scaffold(typeof(Syncfusion.Maui.Popup.SfPopup))]
public partial class SfPopup 
{
    public SfPopup Content(Func<VisualNode> render)
    {
        this.Set(Syncfusion.Maui.Popup.SfPopup.ContentTemplateProperty, 
            new MauiControls.DataTemplate(() => TemplateHost.Create(render()).NativeElement));

        return this;
    }
}

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


class MainPageState
{
    public bool IsPopupOpen { get; set; }
}

class MainPage : Component<MainPageState>
{
    public override VisualNode Render()
    {
        return new ContentPage("Pagina uno")
        {
            new VStack() {
                new Label("Main page"),
                new Button().Text("Apri popup").OnClicked(ApriPopup),

                new SfPopup()
                    .Content(()=>
                        new VStack()
                        {
                            new Label("my label")
                        })
                    .IsOpen(State.IsPopupOpen)
                    .OnClosed(()=>SetState(s => s.IsPopupOpen = false, false))

            }.VCenter().HCenter()
        };
    }

    private void ApriPopup()
    {
        SetState(s => s.IsPopupOpen = true);
    }
}

[Raystorm7]

ok, I see that SfPopup doesn’t provide a direct way to set the content so you have to use a TemplateHost (that is a class that allows you to create a native Maui control from a MauiReactor VisualNode):

[Scaffold(typeof(Syncfusion.Maui.Popup.SfPopup))]
public partial class SfPopup 
{
    public SfPopup Content(Func<VisualNode> render)
    {
        this.Set(Syncfusion.Maui.Popup.SfPopup.ContentTemplateProperty, 
            new MauiControls.DataTemplate(() => TemplateHost.Create(render()).NativeElement));

        return this;
    }
}

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


class MainPageState
{
    public bool IsPopupOpen { get; set; }
}

class MainPage : Component<MainPageState>
{
    public override VisualNode Render()
    {
        return new ContentPage("Pagina uno")
        {
            new VStack() {
                new Label("Main page"),
                new Button().Text("Apri popup").OnClicked(ApriPopup),

                new SfPopup()
                    .Content(()=>
                        new VStack()
                        {
                            new Label("my label")
                        })
                    .IsOpen(State.IsPopupOpen)
                    .OnClosed(()=>SetState(s => s.IsPopupOpen = false, false))

            }.VCenter().HCenter()
        };
    }

    private void ApriPopup()
    {
        SetState(s => s.IsPopupOpen = true);
    }
}

hey

This code only works for me by adding: builder.ConfigureSyncfusionCore(); at MauiProgram.cs

if not, and exception “Handler not found for Syncfusion.Maui.Popup.SfPopup” was raised

Its that ok? Docs dont mentioned nothing about this…

Hi, yes is correct.

Check the syncfusion documentation to know more: https://help.syncfusion.com/maui/popup/getting-started

There is a a sample where the app is configured and the code builder.ConfigureSyncfusionCore(); is used 😉