WinUI controls MVVM support

[Claus Barth]

Hi

I have been looking at your different WinUI controls for a new project that I am about to start.

In the documentation for these controls you only show code-behind examples. 
Do the controls support MVVM?

And I mean really support MVVM, so that the controls can bind to another control with a binding and not code in the code-behind file.

I hope you can say yes to this.

Thanks

[SaiGanesh Sakthivel]

Hi Claus,

#Regarding WinUI Scheduler in MVVM pattern

You can achieve the MVVM pattern in WinUI Scheduler control. We have prepared a simple sample with appointment binding in the MVVM pattern. Please refer to the following code snippet for your reference.

Code snippet

<Grid x:Name="grid">

    <Grid.DataContext>

        <local:SchedulerViewModel/>

    </Grid.DataContext>

    <syncfusion:SfScheduler x:Name="scheduler"

                        ItemsSource="{Binding Events}"

                    >

    </syncfusion:SfScheduler>

    <interactivity:Interaction.Behaviors>

        <local:SchedulerBehavior/>

    </interactivity:Interaction.Behaviors>

</Grid>

Behavior Class

public class SchedulerBehavior : Behavior<Grid>

{

    Grid grid;

    SfScheduler scheduler;

    protected override void OnAttached()

    {

        grid = this.AssociatedObject as Grid;

        scheduler = grid.Children[0] as SfScheduler;

        scheduler.CellTapped += Scheduler_CellTapped;

        scheduler.ViewType = SchedulerViewType.Week;

    }

 

    private void Scheduler_CellTapped(object sender, CellTappedEventArgs e)

    {

       

    }

 

    protected override void OnDetaching()

    {

        base.OnDetaching();

        grid = null;

        scheduler = null;

    }

}

Viewmodel Class

public class SchedulerViewModel

{

    public SchedulerViewModel()

    {

        Events = GenerateAppointments();

    }

 

    public ScheduleAppointmentCollection Events { get; set; }

 

    private ScheduleAppointmentCollection GenerateAppointments()

    {

        // Creating an instance for the schedule appointment collection.

        var scheduleAppointmentCollection = new ScheduleAppointmentCollection();

        //Adding the schedule appointments in the schedule appointment collection.

        scheduleAppointmentCollection.Add(new ScheduleAppointment

        {

            StartTime = DateTime.Now.Date.AddHours(10),

            EndTime = DateTime.Now.Date.AddHours(11),

            Subject = "Client Meeting",

            AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 133, 81, 242)),

            Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255)),

        });

 

        scheduleAppointmentCollection.Add(new ScheduleAppointment

        {

            StartTime = DateTime.Now.Date.AddDays(1).AddHours(13),

            EndTime = DateTime.Now.Date.AddDays(1).AddHours(14),

            Subject = "GoToMeeting",

            AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 140, 245, 219)),

            Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0)),

        });

 

        scheduleAppointmentCollection.Add(new ScheduleAppointment

        {

            StartTime = DateTime.Now.Date.AddDays(-1).AddHours(9),

            EndTime = DateTime.Now.Date.AddDays(-1).AddHours(10),

            Subject = "Generate Report",

            AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 83, 99, 250)),

            Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255)),

        });

 

        scheduleAppointmentCollection.Add(new ScheduleAppointment

        {

            StartTime = DateTime.Now.Date.AddDays(2).AddHours(14),

            EndTime = DateTime.Now.Date.AddDays(2).AddHours(15),

            Subject = "Generate Report",

            AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 255, 222, 133)),

            Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0)),

        });

 

        scheduleAppointmentCollection.Add(new ScheduleAppointment

        {

            StartTime = DateTime.Now.Date.AddDays(-2).AddHours(4),

            EndTime = DateTime.Now.Date.AddDays(-2).AddHours(5),

            Subject = "Plan Execution",

            AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 45, 153, 255)),

            Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255)),

        });

 

        scheduleAppointmentCollection.Add(new ScheduleAppointment

        {

            StartTime = DateTime.Now.Date.AddDays(0).AddHours(5),

            EndTime = DateTime.Now.Date.AddDays(0).AddHours(6),

            Subject = "Consulting",

            AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 253, 183, 165)),

            Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0)),

        });

 

        scheduleAppointmentCollection.Add(new ScheduleAppointment

        {

            StartTime = DateTime.Now.Date.AddDays(1).AddHours(9),

            EndTime = DateTime.Now.Date.AddDays(1).AddHours(10),

            Subject = "Performance Check",

            AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 198, 237, 115)),

            Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0)),

        });

 

        scheduleAppointmentCollection.Add(new ScheduleAppointment

        {

            StartTime = DateTime.Now.Date.AddDays(3).AddHours(17),

            EndTime = DateTime.Now.Date.AddDays(3).AddHours(18),

            Subject = "Project Plan",

            AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 253, 185, 222)),

            Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0)),

        });

 

        scheduleAppointmentCollection.Add(new ScheduleAppointment

        {

            StartTime = DateTime.Now.Date.AddDays(0).AddHours(17),

            EndTime = DateTime.Now.Date.AddDays(0).AddHours(18),

            Subject = "Consulting",

            AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 83, 99, 250)),

            Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255)),

            IsAllDay = true

        });

 

        return scheduleAppointmentCollection;

    }

}

Please refer to the demo sample in the following locations.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SchedulerWinUI-144687114

Please refer to the following UG documentation for your reference.

UG: https://help.syncfusion.com/winui/scheduler/getting-started#creating-the-schedule-appointments

Please let us know if you have any concerns.

Regards,
SaiGanesh Sakthivel