This article explains how to toggle the .NET MAUI Navigation Drawer using MVVM commands in an application. Using commands instead of event handlers enhances modularity, testability, and maintains a clean separation between UI and logic. ViewModel Define a ViewModel with a property to track the drawer’s state and a command to toggle it: public class MainPageViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler? PropertyChanged; public void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } private bool _isDrawerOpen; public bool IsDrawerOpen { get => _isDrawerOpen; set { _isDrawerOpen = value; OnPropertyChanged(nameof(IsDrawerOpen)); } } public ICommand ToggleDrawerCommand { get; } public MainPageViewModel() { ToggleDrawerCommand = new Command(ToggleDrawer); } private void ToggleDrawer() { IsDrawerOpen = !IsDrawerOpen; } } Setting the BindingContext Ensure that the ViewModel is set as the BindingContext of the page: <ContentPage.BindingContext> <local:MainPageViewModel/> </ContentPage.BindingContext> XAML Bind the IsOpen property of NavigationDrawer to IsDrawerOpen and the toggle command to an ImageButton: <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" IsOpen="{Binding IsDrawerOpen, Mode=TwoWay}"> <navigationdrawer:SfNavigationDrawer.ContentView> <Grid x:Name="mainContentView" BackgroundColor="White" RowDefinitions="Auto,*"> <HorizontalStackLayout BackgroundColor="#6750A4" Spacing="10" Padding="5,0,0,0"> <ImageButton x:Name="hamburgerButton" Source="hamburgericon.png" Command="{Binding ToggleDrawerCommand}"/> </HorizontalStackLayout> </Grid> </navigationdrawer:SfNavigationDrawer.ContentView> </navigationdrawer:SfNavigationDrawer> By following these steps, you can toggle the Navigation Drawer using an MVVM command instead of event handlers, resulting in a more modular and testable application. Output Download the complete sample from GitHub Conclusion I hope you enjoyed learning how to toggle the Navigation Drawer via MVVM command in .NET MAUI. You can refer to our .NET MAUI Navigation Drawer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our Support Forums, Direct-Trac, or Feedback Portal. We are always happy to assist you!
This article demonstrates how to bind content to the Blazor RichTextEditor in a .NET MAUI Hybrid application using a ViewModel. This approach ensures that any changes in the editor are reflected in the ViewModel, and those changes can be tracked and displayed within the .NET MAUI UI. ViewModel Implementation To begin, create a ViewModel (e.g., ViewModel.cs) that implements INotifyPropertyChanged. This will allow the UI to respond to changes in the data model. public class ViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } private string text = "<a href="https://www.google.com/">Google!</a>"; public string Text { get { return text; } set { text = value; OnPropertyChanged("Text"); } } } To complete the setup, ensure the ViewModel is registered with the dependency injection container in the .NET MAUI application. This can be done in the MauiProgram.cs file: ... builder.Services.AddSingleton<ViewModel>(); ... This registration allows the ViewModel to be injected into both the Blazor components and the .NET MAUI pages. Blazor RichTextEditor Integration In your Blazor component (e.g., Home.razor), you can bind the RichTextEditor to the ViewModel’s Text property. The following code snippet demonstrates this: @page "/" @using Syncfusion.Blazor.RichTextEditor @using System.ComponentModel @implements IDisposable @inject ViewModel ViewModel <SfRichTextEditor @bind-Value="ViewModel.Text" SaveInterval="1"> </SfRichTextEditor> @code { protected override void OnInitialized() { base.OnInitialized(); ViewModel.PropertyChanged += OnValueChanged; } private void OnValueChanged(object sender, PropertyChangedEventArgs e) { StateHasChanged(); } public void Dispose() { ViewModel.PropertyChanged -= OnValueChanged; } } In this code: The ViewModel is injected into the Blazor component using @inject ViewModel ViewModel. The SfRichTextEditor binds directly to the Text property of the ViewModel through the @bind-Value directive, enabling two-way data binding. The OnValueChanged method updates the UI when the Text property in the ViewModel changes. The Dispose method removes the event handler to prevent memory leaks. MAUI Label Binding To display the content of the RichTextEditor in a MAUI Label, you can refer to the below code: XAML: <Label Text="{Binding Text}" TextType="Html" TextColor="Black" Margin="5" VerticalOptions="Center"/> C#: public partial class MainPage : ContentPage { public MainPage(ViewModel viewModel) { InitializeComponent(); BindingContext = _viewModel; } } Output Download the complete sample from GitHub
In this article, you can learn how to convert events into commands using behaviors in .NET MAUI Tab View. This can be achieved by using EventToCommandBehavior from the Maui Community Toolkit. This approach allows for a more MVVM-friendly way of handling events in the MAUI application. Step 1: Create a .NET MAUI application and install the Syncfusion.Maui.TabView NuGet package and CommunityToolkit.Maui NuGet package. Step 2: Register the ConfigureSyncfusionCore() and UseMauiCommunityToolkit() handlers in the MauiProgram.cs public static MauiApp CreateMauiApp() { ... .UseMauiCommunityToolkit() .ConfigureSyncfusionCore() ... } Step 3: Create a Command for the SelectionChanged event of the Syncfusion® .NET MAUI Tab View in ViewModel. ViewModel public class MainPageViewModel : INotifyPropertyChanged { private Command<object>? selectionChangedCommand; public Command<object>? SelectionChangedCommand { get { return selectionChangedCommand; } set { selectionChangedCommand = value; OnPropertyChanged(nameof(SelectionChangedCommand)); } } public MainPageViewModel() { SelectionChangedCommand = new Command<object>(TabViewSelectionChanged); } public void TabViewSelectionChanged(object obj) { // Do action var tabView = (obj as SfTabView); if (tabView != null) { foreach(var tabItem in tabView.Items) { if (tabItem != null) { if(tabItem.IsSelected) { App.Current?.MainPage? .DisplayAlert("Alert", "You have been selected " + tabItem.Header + " Tab", "OK"); } } } } } // Implement PropertyChanged interface and method } The ViewModel handles the command triggered by the behavior when the tab selection changes. Step 4: Initialize the Tab View control and bind the SelectionChanged event to a command using EventToCommandBehavior. XAML <ContentPage ... xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView" xmlns:viewModel="clr-namespace:TabViewEventToCommand"> <ContentPage.BindingContext> <viewModel:MainPageViewModel/> </ContentPage.BindingContext> <Grid> <tabView:SfTabView x:Name="tabView" IndicatorPlacement="Fill" TabBarBackground="HotPink"> <tabView:SfTabView.Behaviors> <toolkit:EventToCommandBehavior EventName="SelectionChanged" Command="{Binding SelectionChangedCommand}" CommandParameter="{x:Reference tabView}"/> </tabView:SfTabView.Behaviors> <tabView:SfTabView.Items> <tabView:SfTabItem Header="FAVOURITES"> <!--TabItem Content--> </tabView:SfTabItem> ... </tabView:SfTabView.Items> </tabView:SfTabView> </Grid> Output Download the complete sample from GitHub Conclusion I hope you enjoyed learning how to convert events into commands in .NET MAUI Tab View. You can refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Tab View documentation to understand how to present and manipulate data. You can check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Overview You can implement an intermediate state in a .NET MAUI CheckBox using the MVVM (Model-View-ViewModel) pattern. Below is a guide on how to set up the intermediate state for a group of CheckBoxes using MVVM in a .NET MAUI application. ViewModel Implementation Create a ViewModel class that implements the INotifyPropertyChanged interface to handle property changes and manage the intermediate state logic: public class ViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler? PropertyChanged; private void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } private bool skip = false; // Properties for individual CheckBoxes private bool isPepperoniChecked; public bool IsPepperoniChecked { get => isPepperoniChecked; set { isPepperoniChecked = value; CheckIfSelectAll(); OnPropertyChanged(nameof(IsPepperoniChecked)); } } private bool isMushroomsChecked; public bool IsMushroomsChecked { get => isMushroomsChecked; set { isMushroomsChecked = value; CheckIfSelectAll(); OnPropertyChanged(nameof(IsMushroomsChecked)); } } private bool isOnionsChecked; public bool IsOnionsChecked { get => isOnionsChecked; set { isOnionsChecked = value; CheckIfSelectAll(); OnPropertyChanged(nameof(IsOnionsChecked)); } } // Property for the "Select All" CheckBox private bool? isIntermediate; public bool? IsIntermediate { get => isIntermediate; set { isIntermediate = value; IntermediateState(); OnPropertyChanged(nameof(IsIntermediate)); } } public ViewModel() { IsIntermediate = true; } private void CheckIfSelectAll() { if (!skip) { skip = true; if (IsPepperoniChecked && IsMushroomsChecked && IsOnionsChecked) { IsIntermediate = true; } else if (!IsPepperoniChecked && !IsMushroomsChecked && !IsOnionsChecked) { IsIntermediate = false; } else { IsIntermediate = null; } skip = false; } } private void IntermediateState() { if (!skip) { skip = true; if (IsIntermediate == true) { IsPepperoniChecked = IsMushroomsChecked = IsOnionsChecked = true; } else { IsPepperoniChecked = IsMushroomsChecked = IsOnionsChecked = false; } skip = false; } } } The ViewModel class contains properties for each CheckBox and a special property IsIntermediate for the “Select All” CheckBox. The CheckIfSelectAll method checks the state of individual CheckBoxes to determine the state of the “Select All” CheckBox. The IntermediateState method updates the state of individual CheckBoxes based on the “Select All” CheckBox. XAML Setup Define the binding context and the layout with CheckBoxes in your XAML file: <ContentPage.BindingContext> <local:ViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <StackLayout Padding="20"> <Label x:Name="label" Margin="10" Text="Pizza Toppings"/> <syncfusion:SfCheckBox x:Name="selectAll" Text="Select All" IsThreeState="True" IsChecked="{Binding IsIntermediate}"/> <syncfusion:SfCheckBox x:Name="pepperoni" Text="Pepperoni" IsChecked="{Binding IsPepperoniChecked}" Margin="30,0"/> <syncfusion:SfCheckBox x:Name="mushroom" Text="Mushrooms" IsChecked="{Binding IsMushroomsChecked}" Margin="30,0"/> <syncfusion:SfCheckBox x:Name="onion" Text="Onions" IsChecked="{Binding IsOnionsChecked}" Margin="30,0"/> </StackLayout> Note The Intermediate state of the check box is enabled by setting the IsThreeState property as True. By following the above steps, you can successfully implement an intermediate state for CheckBoxes in a .NET MAUI application using the MVVM pattern. Output Download the sample from the GitHub Conclusion I hope you enjoyed learning how to achieve an intermediate state in .NET MAUI CheckBox. Refer to our .NET MAUI CheckBox’s feature tour page for other groundbreaking feature representations. You can explore our .NET MAUI CheckBox documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI CheckBox and other .NET MAUI components. Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can bind the Series property of Xamarin Chart from MVVM pattern by using ChartSeriesCollection and setting the ViewModel as BindingContext. The following code sample demonstrates how to bind the Series property from MVVM pattern. Xaml <ContentPage.BindingContext> <local:ViewModel/> </ContentPage.BindingContext> <chart:SfChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Series="{Binding SeriesCollection}"> <chart:SfChart.PrimaryAxis> <chart:NumericalAxis /> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis/> </chart:SfChart.SecondaryAxis> </chart:SfChart> C# public class ViewModel : INotifyPropertyChanged { ……. private ChartSeriesCollection seriesCollection; public ChartSeriesCollection SeriesCollection { get { return seriesCollection; } set { seriesCollection = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("SeriesCollection")); } } public ViewModel() { SeriesCollection = new ChartSeriesCollection(); ColumnSeries columnSeries = new ColumnSeries() { ItemsSource = ColumnData, XBindingPath = "XValue", YBindingPath = "YValue" }; SeriesCollection.Add(columnSeries); LineSeries lineSeries = new LineSeries() { ItemsSource = LineData, XBindingPath = "XValue", YBindingPath = "YValue" }; SeriesCollection.Add(lineSeries); } ………. } Conclusion I hope you enjoyed learning about how to bind Series from MVVM pattern in Xamarin.Forms Chart. You can refer to our Xamarin Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin Chart Documentation to understand how to present and manipulate data. For current customers, you can check out our Xamarin components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Xamarin Chart and other Xamarin components. If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!
You can bind the SfDataGrid.Columns to a property in the ViewModel by having the binding property to be of type Syncfusion.SfDataGrid.XForms.Columns in the ViewModel. Refer the below code example in which the SfGridColumns property is bind to the SfDataGrid.Columns property. Refer the below code example in which the SfGridColumns columns in the ViewModel is populated with some GridTextColumn and GridNumericColumn when creating the ViewModel instance. Note that the SfGridColumns property in the ViewModel is of type Syncfusion.SfGrid.UI.Xaml.Grid.Columns. Sample: DataGridDemo
