MVVM - Bind the ContentView to a ViewModel

[Emilio]

Hi Syncfusion Team!

I'm trying to use the SfNavigationDrawer control in an application without shell navigation using the Prism Library (https://prismlibrary.com/docs/index.html). I successfully bound the drawer to the VM to toggle the drawer but I'm confused in how I should proceed to bind the content to the content view.

If I use a FlyoutPage it works as expected, the content is displayed in the detail area but when I use the drawer the page itself is navigated to the other page removing the navigation bar.

The main point of this question is that if it's possible to replicate in some way the functionality of the FlyoutPage without the need of the app shell using the SfNavigationDrawer.

Thanks in advance.

[Brundha Velusamy]

Hi Emilio,

 

Thank you for reaching out to Syncfusion support.

 

To address your query regarding the functionality of the SfNavigationDrawer, we have created a sample that aims to meet your requirements. Please find the attached sample for your reference. Kindly review the attachment at your convenience, and do not hesitate to contact us if you have any questions or require additional assistance. We are here to support you, and if your requirements differ from the suggested solution, please provide detailed information of your requirements. This will assist us in investigating and offering a solution more effectively.

 

Regards,

Brundha V

Attachment: NavigationDrawer_6d19dbdf.zip

[David]

is this not possible using the region adapter in prism?
This example isn't truely mvvm, as you are creating new instances of views rather than resolving them

[Brundha Velusamy]

Hi David,

We would like to inform you that, with the approach used in the previous example, we can declare and bind the values from the respective view models to the corresponding pages, ensuring that the view models and views remain properly decoupled while following MVVM principles. This allows for better maintainability and flexibility in the application.

Please refer to the updated code snippets below to see how the values are bound:

//Mainpage
 

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" Grid.Row="1">

  <navigationdrawer:SfNavigationDrawer.DrawerSettings>

   …

      <navigationdrawer:DrawerSettings.DrawerContentView>

             <Label Text="{Binding Title}"/>

      </navigationdrawer:DrawerSettings.DrawerContentView>

    </navigationdrawer:DrawerSettings>

  </navigationdrawer:SfNavigationDrawer.DrawerSettings>

  <navigationdrawer:SfNavigationDrawer.ContentView>

       <Label Text="{Binding Content}"/>

  </navigationdrawer:SfNavigationDrawer.ContentView>

</navigationdrawer:SfNavigationDrawer>

public class MainPageViewModel : BindableBase

{

    private ISemanticScreenReader _screenReader { get; }

 

    public string Title { get; set; }

    public string Content { get; set; }

    public MainPageViewModel(ISemanticScreenReader screenReader)

    {

        _screenReader = screenReader;

 

        Title = "Drawer Content View";

        Content = "Main Content View";

    }

}

//PrismStartup

 

internal static class PrismStartup

{

    public static void Configure(PrismAppBuilder builder)

    {

        builder.RegisterTypes(RegisterTypes)

                .OnAppStart("NavigationPage/MainPage");

    }

 

    private static void RegisterTypes(IContainerRegistry containerRegistry)

    {

        containerRegistry.RegisterForNavigation<MainPage,MainPageViewModel>()

                     .RegisterInstance(SemanticScreenReader.Default);

    }

}

//MauiProgram

 

public static class MauiProgram

{

    public static MauiApp CreateMauiApp()

    {

        var builder = MauiApp.CreateBuilder();

        builder

            .UsePrismApp<App>(PrismStartup.Configure)

            .ConfigureSyncfusionCore()

           …

        return builder.Build();

    }

}

This setup ensures that views are resolved via the Prism container, which aligns with MVVM principles and dynamic content loading via regions.

Please let us know the specific details or requirements you need so we can provide an appropriate solution.

Regards,

Brundha V