The Syncfusion® .NET MAUI TreeView allows you to add nodes at runtime in bound mode by updating the collection in the ViewModel. For the UI to reflect updates when items are added dynamically, set the NotificationSubscriptionMode property to CollectionChange. ViewModel public class FileManagerViewModel { public Command OnAddItem { get; set; } public FileManagerViewModel() { GenerateSource(); OnAddItem = new Command(OnAddItemMethod); } private void OnAddItemMethod(object obj) { var game = new FileManager() { ItemName = "Game", ImageIcon = "game.png"}; var games = new FileManager() { ItemName = "Criket.exe", ImageIcon = "cricket.png" }; game.SubFiles = new ObservableCollection<FileManager> { games }; ImageNodeInfo!.Add(game); } } XAML <ContentPage.Content> <Grid RowDefinitions="50,*"> <Button x:Name="addItem" Text="Add Items" HorizontalOptions="Fill" BackgroundColor="Blue" Command="{Binding OnAddItem}"/> <syncfusion:SfTreeView x:Name="treeView" Grid.Row="1" NotificationSubscriptionMode="CollectionChange,PropertyChange" ChildPropertyName="SubFiles" ItemsSource="{Binding ImageNodeInfo}" AutoExpandMode="AllNodesExpanded"> <syncfusion:SfTreeView.ItemTemplate> <DataTemplate> <Grid x:Name="grid" RowSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="40" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid Grid.Column="0"> <Image Source="{Binding ImageIcon}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="24" WidthRequest="24"/> </Grid> <Grid Grid.Column="1"> <Label LineBreakMode="NoWrap" Text="{Binding ItemName}" VerticalTextAlignment="Center"> </Label> </Grid> </Grid> </DataTemplate> </syncfusion:SfTreeView.ItemTemplate> </syncfusion:SfTreeView> </Grid> </ContentPage.Content> Download the complete sample from GitHub Conclusion: I hope you enjoyed learning how to add nodes in bound mode using the .NET MAUI TreeView. You can refer to our .NET MAUI TreeView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI TreeView example to understand how to create and manipulate data. 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 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!
The .NET MAUI CheckBox allows you to adjust the spacing between the check box and its text using the ContentSpacing property and its declaration code has been updated as follows. XAML <syncfusion:SfCheckBox Text="I accept the terms and conditions" ContentSpacing="15"/> C# SfCheckBox sfCheckBox = new SfCheckBox(); sfCheckBox.Text = "I accept the terms and conditions"; sfCheckBox.ContentSpacing = 15; Output Download the complete sample from the GitHub. Conclusion I hope you enjoyed learning about how to customize the content spacing in .NET MAUI CheckBox. You can refer to our .NET MAUI CheckBox feature tour page to know about its other groundbreaking feature representations and Documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI CheckBox example to understand how to create and manipulate data. For current customers, you can check out our 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 other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!
In this article, you will learn how to use the .NET MAUI PDF Viewer in a native Android application to view PDF documents by following the step-by-step process outlined below: Step 1: Create a .NET MAUI class library project and delete the Platforms folder and the Class1.cs file from it. Then add the classes named EmbeddedExtensions, EmbeddedPlatformApplication, EmbeddedWindowHandler, and EmbeddedWindowProvider to the created .NET MAUI class library project. The required code for these classes is available here. Step 2: Next in the same solution, create a .NET MAUI single project. This project is used to register the handlers required to render the PDF viewer control. After including the project in the solution, follow the steps mentioned here Step 3: Install the Syncfusion.Maui.PdfViewer nuget package from nuget.org into the created .NET MAUI single project. Step 4: Register the core handler in the MauiProgram.cs file of the .NET MAUI single project by calling the ConfigureSyncfusionCore method. public static MauiApp CreateMauiApp<TApp>(Action<MauiAppBuilder>? additional = null) where TApp : App { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<TApp>() .ConfigureSyncfusionCore() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); }); Step 5: Create the native Android application project in which you want to add the PDF viewer and install the Syncfusion.Maui.PdfViewer nuget package from nuget.org. Step 6: In the project file of the native Android application, add <UseMaui>true <UseMaui> to enable the .Net Maui support demonstrated as follows. <PropertyGroup> <TargetFramework>net8.0-android</TargetFramework> <OutputType>Exe</OutputType> <Nullable>enable</Nullable> <UseMaui>true</UseMaui> <ImplicitUsings>enable</ImplicitUsings> <SupportedOSPlatformVersion>13.0</SupportedOSPlatformVersion> </PropertyGroup> Step 7: Initialize .NET MAUI in the native Android project by creating a MauiApp object and using the UseMauiEmbedding method in the MainActivity.cs file as follows. public class MainActivity : Activity { public static readonly Lazy<MauiApp> MauiApp = new(() => { return MauiProgram.CreateMauiApp(builder => { builder.UseMauiEmbedding(); }); }); public static bool UseWindowContext = true; private SfPdfViewer _pdfViewer; protected override void OnCreate(Bundle? savedInstanceState) { base.OnCreate(savedInstanceState); // Initialize the Maui app var mauiApp = MauiApp.Value; var _mauiContext = UseWindowContext ? mauiApp.CreateEmbeddedWindowContext(this) // Create window context : new MauiContext(mauiApp.Services); // Create app context …… …… } Step 8: Create a new folder with the name “Assets” in the Android app project and include the PDF document to be loaded, inside the folder. Set the Build Action of the PDF file to Embedded Resource. In this example, a PDF named “PDF_Succinctly.pdf” is used. Step 9: Create the .NET MAUI PDF viewer control, convert it to a native view, and add it as the Content of the OnCreate(). protected override void OnCreate(Bundle? savedInstanceState) { ….. ….. // Initialize and configure the SfPdfViewer _pdfViewer = new SfPdfViewer(); // Set the document source for SfPdfViewer control var assembly = Assembly.GetExecutingAssembly(); _pdfViewer.DocumentSource = this.GetType().Assembly.GetManifestResourceStream("NativeEmbeddingPDFViewerDemoAndroid.Droid.Assets.PDF_Succinctly.pdf"); // Convert SfPdfViewer to an Android view Android.Views.View pdfViewerView = _pdfViewer.ToPlatform(_mauiContext); // Directly set the pdfViewerView as the content view SetContentView(pdfViewerView); } Step 10: In the solution, set the native Android project as the start-up project. Build, deploy, and run the project. View the sample on GitHub Conclusion We hope you enjoyed learning how to integrate .NET MAUI PDF Viewer in a native Android application. Refer to our .NET MAUI PDF Viewer’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI PDF Viewer Documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI PDF Viewer and other .NET MAUI components. Please let us know in the following comments if you have any queries or require clarifications. You can also contact us through our support forums, support ticket or feedback portal. We are always happy to assist you!
In this article, you will learn how to use the .NET MAUI PDF Viewer in a native WinUI application to view PDF documents by following the step-by-step process outlined below: Step 1: Create a .NET MAUI class library project and delete the Platforms folder and the Class1.cs file from it. Then add the classes named EmbeddedExtensions, EmbeddedPlatformApplication, EmbeddedWindowHandler, and EmbeddedWindowProvider to the created .NET MAUI class library project. The required code for these classes are available here. Step 2: Next in the same solution, create a .NET MAUI single project. This project is used to register the handlers required to render the PDF viewer control. After including the project in the solution, follow the steps mentioned here. Step 3: Install the Syncfusion.Maui.PdfViewer nuget package from nuget.org into the created .NET MAUI single project. Step 4: Register the core handler in the MauiProgram.cs file of the .NET MAUI single project by calling the ConfigureSyncfusionCore method. public static MauiApp CreateMauiApp<TApp>(Action<MauiAppBuilder>? additional = null) where TApp : App { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<TApp>() .ConfigureSyncfusionCore() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); }); #if DEBUG builder.Logging.AddDebug(); #endif additional?.Invoke(builder); return builder.Build(); } Step 5: Create the native WinUI application project in which you want to add the PDF viewer and install the Syncfusion.Maui.PdfViewer nuget package from nuget.org. Step 6: In the .csproj file of the native WinUI project, add <UseMaui>, <MauiEnablePlatformUsings> and <EnableDefaultXamlItems> tags and set the respective values as given below. <PropertyGroup> <Nullable>enable</Nullable> <ImplicitUsings>enable</ImplicitUsings> <UseMaui>true</UseMaui> <MauiEnablePlatformUsings>true</MauiEnablePlatformUsings> <EnableDefaultXamlItems>false</EnableDefaultXamlItems> </PropertyGroup> Step 7: Initialize .NET MAUI in the native WinUI project by creating a MauiApp object and using the UseMauiEmbedding method in the MainWindow.xaml.cs file as follows. public static readonly Lazy<MauiApp> MauiApp = new(() => { var mauiApp = MauiProgram.CreateMauiApp(builder => { builder.UseMauiEmbedding(); }); return mauiApp; }); public static bool UseWindowContext = true; public MainWindow() { this.InitializeComponent(); var mauiApp = MainWindow.MauiApp.Value; var mauiContext = UseWindowContext ? mauiApp.CreateEmbeddedWindowContext(this) : new MauiContext(mauiApp.Services); } Step 8: Create a new folder with the name “Assets” in the WinUI app project and include the PDF document to be loaded, inside the folder. Set the Build Action of the PDF file to Embedded Resource. In this example, a PDF named “PDF_Succinctly.pdf” is used. Step 9: Create the .NET MAUI PDF viewer control, convert it to a native view and add it as the Content of the MainWindow. SfPdfViewer pdfViewer; public MainWindow() { …. …. // Create .NET MAUI PDF viewer pdfViewer = new SfPdfViewer(); //Set document source for the PDF viewer. pdfViewer.DocumentSource = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PDFViewerNativeEmbeddingWinUI.WinUI.Assets.PDF_Succinctly.pdf"); // Convert the .NET MAUI PDF viewer to a native control var nativeView = pdfViewer.ToPlatformEmbedded(mauiContext); this.Content = nativeView; } Step 10: In the solution, set the native WinUI project as the start-up project. Build, deploy and run the project. View the sample on GitHub Conclusion We hope you enjoyed learning how to integrate .NET MAUI PDF Viewer in a native WinUI application. Refer to our .NET MAUI PDF Viewer’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI PDF Viewer Documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI PDF Viewer and other .NET MAUI components. Please let us know in the following comments if you have any queries or require clarifications. You can also contact us through our support forums, support ticket 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!
The .NET MAUI CheckBox allows you to modify its size using the ControlSize property. Below is a demonstration of how to set this property: XAML: <syncfusion:SfCheckBox Text="CheckBox" ControlSize="40"/> C#: SfCheckBox sfCheckBox = new SfCheckBox(); sfCheckBox.Text = "CheckBox"; sfCheckBox.ControlSize = 40; Output: Conclusion I hope you enjoyed learning how to customize the control size of .NET MAUI CheckBox. Refer to our .NET MAUI CheckBox 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!
Overview The .NET MAUI Navigation Drawer includes a content area and a sliding pane. Although it doesn’t directly support ContentPages, you can include the content of a ContentPage in the Navigation Drawer. Here’s how: Setting Up the Navigation Drawer in XAML Define the Navigation Drawer in your XAML file: <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"> <navigationdrawer:SfNavigationDrawer.DrawerSettings> <navigationdrawer:DrawerSettings> <!-- DrawerContentView --> <navigationdrawer:DrawerSettings.DrawerContentView> <ScrollView> <VerticalStackLayout Spacing="10" Padding="5,0"> <Border StrokeThickness="0" x:Name="inboxEffectsBorder"> <Border.StrokeShape> <RoundRectangle CornerRadius="30"/> </Border.StrokeShape> <core:SfEffectsView x:Name="inboxEffects" RippleBackground="#ab56e3"> <core:SfEffectsView.GestureRecognizers> <TapGestureRecognizer Tapped="InboxTapGestureRecognizer_Tapped"/> </core:SfEffectsView.GestureRecognizers> <Grid Padding="20,5,10,5" HeightRequest="48"> <!-- Menu Item Content --> </Grid> </core:SfEffectsView> </Border> <!-- Additional Menu Items --> </VerticalStackLayout> </ScrollView> </navigationdrawer:DrawerSettings.DrawerContentView> </navigationdrawer:DrawerSettings> </navigationdrawer:SfNavigationDrawer.DrawerSettings> </navigationdrawer:SfNavigationDrawer> Create Your Content Pages Create the content pages that you want to load into the Navigation Drawer. For example, Inbox.xaml and Contacts.xaml, etc. Handling Content Page Navigation in Code-Behind In the code-behind, manage navigation between pages by updating the ContentView: public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); Initialize(); } private void Initialize() { navigationDrawer.ContentView = new Inbox().Content; } private void ResetSelection() { // Reset the visual state of menu items } private void InboxTapGestureRecognizer_Tapped(object? sender, TappedEventArgs e) { ResetSelection(); navigationDrawer.ContentView = new Inbox().Content; } private void ContactsTapGestureRecognizer_Tapped(object? sender, TappedEventArgs e) { ResetSelection(); navigationDrawer.ContentView = new Contacts().Content; } // Additional tap handlers for other menu items } Additional Notes Ensure that each content page (e.g., Inbox, Contacts, Remainders, ToDoList) is properly defined and returns a valid Content property. The ResetSelection method is used to reset the visual state of the menu items before setting the new selection. Call the ToggleDrawer method if needed after selecting an item. Output Download the complete sample from GitHub Conclusion I hope you enjoyed learning how to load the content page into the .NET MAUI Navigation Drawer. You can refer to our .NET MAUI Navigation Drawer feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Navigation Drawer 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®, you can try our 30-day free trial to check out our .NET MAUI Navigation Drawer 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!
This section explains how to use the ItemTemplate in the .NET MAUI Rotator. You can achieve it by following these steps: Step 1: Create Model and ViewModel classes in the sample. Step 2: Create a list of collections in the ViewModel class and add the corresponding image value. Step 3: Initialized the Rotator control in xaml page. Step 4: Bind the list of collections into the Image property in ItemTemplate using a DataTemplate. The following code demonstrates how to use the ItemTemplate in SfRotator. XAML: <syncfusion:SfRotator x:Name="rotator" ItemsSource="{Binding ImageCollection}"> <syncfusion:SfRotator.ItemTemplate> <DataTemplate> <Image Source="{Binding Image}"/> </DataTemplate> </syncfusion:SfRotator.ItemTemplate> </syncfusion:SfRotator> C#: public class RotatorModel { public RotatorModel(string image) { Image = image; } private string _image; public string Image { get { return _image; } set { _image = value; } } } public class RotatorViewModel { public RotatorViewModel() { ImageCollection.Add(new RotatorModel("image1.png")); ImageCollection.Add(new RotatorModel("image2.png")); ImageCollection.Add(new RotatorModel("image3.png")); ImageCollection.Add(new RotatorModel("image4.png")); ImageCollection.Add(new RotatorModel("image5.png")); } private List<RotatorModel> imageCollection = new List<RotatorModel>(); public List<RotatorModel> ImageCollection { get { return imageCollection; } set { imageCollection = value; } } } Output: Conclusion: I hope you enjoyed learning how to use the ItemTemplate in the Rotator. Refer to our .NET MAUI Rotator feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Rotator documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to explore our .NET MAUI Rotator 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, or the feedback portal. We are always happy to assist you!
This section explains how to render multiple items within a single .NET MAUI Carousel item. We achieve this by adding various controls to a parent layout and assigning it as the content of each carousel item. Using the ItemTemplate property, you can add controls such as Image, Button, and Label to the parent layout and assign it as the ItemTemplate view. C# Model class CarouselModel { public CarouselModel(string imagestr, string buttonstring, string labelstring) { Image = imagestr; ButtonString = buttonstring; LabelString = labelstring; } public string Image { get; set; } public string ButtonString { get; set; } public string LabelString { get; set; } } C# public MainPage() { InitializeComponent(); SfCarousel sfCarousel = new SfCarousel(); var carouselModel = new List<CarouselModel> { new CarouselModel("image1.png","Button1","Label1" ), new CarouselModel ("image2.png","Button2","Label2"), new CarouselModel ("image3.png","Button3","Label3"), new CarouselModel ("image4.png","Button4","Label4"), new CarouselModel ("image5.png","Button5","Label5") }; var carouselModelDataTemplate = new DataTemplate(() => { var stack = new StackLayout(); var nameImage = new Image(); nameImage.SetBinding(Image.SourceProperty, "Image"); var nameButton = new Button() { BackgroundColor = Colors.Transparent,TextColor = Colors.Blue }; nameButton.SetBinding(Button.TextProperty, "ButtonString"); var nameLabel = new Label() { TextColor = Colors.Red,HorizontalTextAlignment = TextAlignment.Center }; nameLabel.SetBinding(Label.TextProperty, "LabelString"); stack.Children.Add(nameButton); stack.Children.Add(nameImage); stack.Children.Add(nameLabel); return stack; }); sfCarousel.ItemTemplate = carouselModelDataTemplate; sfCarousel.ItemsSource = carouselModel; this.Content = sfCarousel; } You can download the complete sample in GitHub Output Conclusion I hope you enjoyed learning how to render multiple items in the .NET MAUI Carousel. Refer to our .NET MAUI Carousel feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Carousel documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to explore our .NET MAUI Navigation Drawer 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, or the feedback portal. We are always happy to assist you!
In this section, explore how to set toggle animations in the .NET MAUI Navigation Drawer. The drawer toggling animation can be adjusted using the Transition property, which offers three different values: SlideOnTop Push Reveal SlideOnTop The navigation pane overlays the main content area when opened. XAML <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"> <navigationdrawer:SfNavigationDrawer.DrawerSettings> <navigationdrawer:DrawerSettings Transition="SlideOnTop"> ... </navigationdrawer:DrawerSettings> </navigationdrawer:SfNavigationDrawer.DrawerSettings> ... </navigationdrawer:SfNavigationDrawer> Note The default animation is SlideOnTop. Output Push The navigation pane is hidden. When opened, it pushes the main content area on the opposite side up to the width of the drawer. XAML <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"> <navigationdrawer:SfNavigationDrawer.DrawerSettings> <navigationdrawer:DrawerSettings Transition="Push"> ... </navigationdrawer:DrawerSettings> </navigationdrawer:SfNavigationDrawer.DrawerSettings> ... </navigationdrawer:SfNavigationDrawer> Output Reveal The navigation pane is hidden behind the main content. The main content moves away on the opposite side up to the drawer width to reveal the drawer content. XAML <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"> <navigationdrawer:SfNavigationDrawer.DrawerSettings> <navigationdrawer:DrawerSettings Transition="Reveal"> ... </navigationdrawer:DrawerSettings> </navigationdrawer:SfNavigationDrawer.DrawerSettings> ... </navigationdrawer:SfNavigationDrawer> Output Download the complete sample from GitHub Conclusion I hope you enjoyed learning how to set toggle animations in the .NET MAUI Navigation Drawer. You can refer to our .NET MAUI Navigation Drawer feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Navigation Drawer documentation to understand how to present and manipulate data. You can check out our .NET MAUI components on the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Navigation Drawer and other .NET MAUI components. Please let us know in the comments if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!
The .NET MAUI Navigation Drawer can be toggled using three methods: IsOpen property ToggleDrawer method Swipe gesture Step 1: Create the DrawerHeaderView and DrawerContentView Define the DrawerHeaderView and DrawerContentView within the DrawerSettings of the Navigation Drawer. XAML <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" > <navigationdrawer:SfNavigationDrawer.DrawerSettings> <navigationdrawer:DrawerSettings DrawerWidth="250" DrawerHeaderHeight="160"> <navigationdrawer:DrawerSettings.DrawerHeaderView> <Grid BackgroundColor="#6750A4" RowDefinitions="120,40"> <Image Source="user.png" HeightRequest="110" Margin="0,10,0,0" BackgroundColor="#6750A4" VerticalOptions="Center" HorizontalOptions="Center"/> <Label Text="James Pollock" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/> </Grid> </navigationdrawer:DrawerSettings.DrawerHeaderView> <navigationdrawer:DrawerSettings.DrawerContentView> <ListView x:Name="listView"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <VerticalStackLayout HeightRequest="40"> <Label Margin="10,7,0,0" Text="{Binding}" FontSize="16" TextColor="Black"/> </VerticalStackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </navigationdrawer:DrawerSettings.DrawerContentView> </navigationdrawer:DrawerSettings> </navigationdrawer:SfNavigationDrawer.DrawerSettings> ...... </navigationdrawer:SfNavigationDrawer> Step 2: Set up the main ContentView Include a button to toggle the Navigation Drawer. XAML <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" > ...... <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" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start" Source="hamburgericon.png" BackgroundColor="#6750A4" Clicked="hamburgerButton_Clicked"/> <Label x:Name="headerLabel" HeightRequest="50" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Home" FontSize="16" TextColor="White" BackgroundColor="#6750A4"/> </HorizontalStackLayout> <Label Grid.Row="1" x:Name="contentLabel" VerticalOptions="Center" HorizontalOptions="Center" Text="Content View" FontSize="14" TextColor="Black"/> </Grid> </navigationdrawer:SfNavigationDrawer.ContentView> </navigationdrawer:SfNavigationDrawer> Is Open property: The IsOpen property can programmatically open or close the drawer. XAML private void hamburgerButton_Clicked(object sender, EventArgs e) { navigationDrawer.IsOpen = !navigationDrawer.IsOpen; } Output ToggleDrawer method: Implement a button click event handler to toggle the drawer. C# private void hamburgerButton_Clicked(object sender, EventArgs e) { navigationDrawer.ToggleDrawer(); } Output SwipeGesture: The EnableSwipeGesture property can be used to enable or disable the swipe functionality in the Navigation Drawer. XAML <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"> <navigationdrawer:SfNavigationDrawer.DrawerSettings> <navigationdrawer:DrawerSettings EnableSwipeGesture="True"> </navigationdrawer:DrawerSettings> </navigationdrawer:SfNavigationDrawer.DrawerSettings> </navigationdrawer:SfNavigationDrawer> Output Sample Download the complete sample from GitHub Conclusion I hope you enjoyed learning how to toggle the Navigation Drawer in .NET MAUI. You can refer to our .NET MAUI Navigation Drawer feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Navigation Drawer documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Navigation Drawer 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, or the feedback portal. We are always happy to assist you!
This article explains how to add different states in the .NET MAUI Switch control. On State: To switch to the On state, tap the switch button or set the value to true. XAML: <syncfusion:SfSwitch IsOn="True" /> Output: Off State: The default state is Off, which can be toggled by tapping the switch button or setting the value to false. XAML: <syncfusion:SfSwitch IsOn="False" /> Output: Indeterminate State: To display work progress, enable the indeterminate state using the AllowIndeterminateState property. Set the IsOn property to null to load the switch in an indeterminate state. XAML: <syncfusion:SfSwitch IsOn="{x:Null}" AllowIndeterminateState="True" /> Output: Disabled On: Switch to the disabled On state by setting IsOn to true and IsEnabled to false. XAML: <syncfusion:SfSwitch IsOn="True" IsEnabled="False" /> Output: Disabled Off: Switch to the disabled Off state by setting IsOn to false and IsEnabled to false. XAML: <syncfusion:SfSwitch IsOn="False" IsEnabled="False" /> Output: Disabled Indeterminate: Enable the disabled indeterminate state to show progress by setting IsOn to null and IsEnabled to false. XAML: <syncfusion:SfSwitch AllowIndeterminateState="True" IsOn="{x:Null}" IsEnabled="False"/> Output: Conclusion Hope you enjoyed learning how to add different states in the .NET MAUI Switch control. Refer to our .NET MAUI Switch feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Switch 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 Switch and other .NET MAUI components. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI ListView (SfListView) allows you to access the named listview defined inside DataTemplate of Popup by using Behavior. XAML: In SfPopup.ContentTemplate, behavior added to parent of ListView. <StackLayout> <Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start" HorizontalOptions="Center"/> <popup:SfPopup x:Name="popup" WidthRequest="350" HeightRequest="350" ShowFooter="False" ShowHeader="False"> <popup:SfPopup.BindingContext> <local:ContactsViewModel/> </popup:SfPopup.BindingContext> <popup:SfPopup.ContentTemplate> <DataTemplate> <Grid> <Grid.Behaviors> <local:GridBehavior/> </Grid.Behaviors> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Button Text="Find ListView" Grid.Row="0" x:Name="listviewButton"/> <sfListView:SfListView x:Name="listView" ItemSpacing="5" ItemsSource="{Binding Items}" SelectionMode="Single" Grid.Row="1"> <sfListView:SfListView.ItemTemplate> <DataTemplate> <Grid x:Name="grid" RowSpacing="1"> ... </Grid> </DataTemplate> </sfListView:SfListView.ItemTemplate> </sfListView:SfListView> </Grid> </DataTemplate> </popup:SfPopup.ContentTemplate> </popup:SfPopup> </StackLayout> C# In ChildAdded event you will get the instance of ListView. public class GridBehavior : Behavior<Grid> { Grid grid; SfListView listView; protected override void OnAttachedTo(BindableObject bindable) { grid = bindable as Grid; grid.ChildAdded += Grid_ChildAdded; } //Method 1 : Get SfListView reference using Grid.ChildAdded Event private void Grid_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is SfListView) { listView = e.Element as SfListView; listView.RefreshView(); } } protected override void OnDetachingFrom(BindableObject bindable) { grid.ChildAdded -= Grid_ChildAdded; listView = null; grid = null; base.OnDetachingFrom(bindable); } } C# You can also get the ListView using FindByName method from Parent element. public class GridBehavior : Behavior<Grid> { Grid grid; SfListView listView; Button button; protected override void OnAttachedTo(BindableObject bindable) { grid = bindable as Grid; grid.ChildAdded += Grid_ChildAdded; } private void Grid_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is Button) { button = e.Element as Button; button.Clicked += Button_Clicked; } } //Method 2 : Get SfListView reference using FindByName private void Button_Clicked(object sender, EventArgs e) { listView = grid.FindByName<SfListView>("listView"); App.Current.MainPage.DisplayAlert("Information", "ListView instance obtained", "Ok"); listView.ItemTapped += ListView_ItemTapped; } private void ListView_ItemTapped(object sender, Syncfusion.Maui.ListView.ItemTappedEventArgs e) { App.Current.MainPage.DisplayAlert("Information", "ListView ItemTapped", "Ok"); } protected override void OnDetachingFrom(BindableObject bindable) { button.Clicked -= Button_Clicked; grid.ChildAdded -= Grid_ChildAdded; listView.ItemTapped -= ListView_ItemTapped; listView = null; button = null; grid = null; base.OnDetachingFrom(bindable); } } View Sample in GitHub Conclusion: I hope you enjoyed learning about how to access a named ListView inside a XAML DataTemplate in .NET MAUI SfListView. You can refer to our .NET MAUI SfListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. For current customers, you can check out our 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 other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
It is essential to understand the unique behaviors arising from the layout structure to integrate the .NET PDF Viewer control in a vertical stack layout. When placing a child control inside a vertical stack layout, the child control renders at its original size or its minimum size within the layout regardless of the VerticalOptions used. The height of the vertical stack layout is determined by the combined height of its child controls. Like other controls, the PDF Viewer also does not automatically adjust its size within a vertical stack layout with respect to the VerticalOptions used. The height of the PDF Viewer may exceed or fall short of the available space in the vertical stack layout, depending on the document size or control’s minimum size. This can lead to difficulties in viewing the document. To ensure the PDF Viewer occupies the necessary vertical space, it is required to explicitly set the height of the PDF Viewer by dynamically measuring the available space within the vertical stack layout. Here is a step-by-step process demonstrating the integration of a PDF Viewer into a vertical stack layout. In this example, the PDF Viewer dynamically adjusts its height to fill the available space whenever the size of the vertical stack layout changes. Step 1: Define the XAML namespace to enable access to the PDF Viewer. [XAML] xmlns:syncfusion="clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer" Step 2: Add the PDF Viewer to the vertical stack layout. In this example, the stack Layout has only one child, which is the PDF Viewer. You can modify it depending on your use case. [XAML] <VerticalStackLayout> <syncfusion:SfPdfViewer x:Name="PdfViewer"/> </VerticalStackLayout> Step 3: To find out if a vertical stack layout’s size is allocated or changed, wire the SizeChanged event. [XAML] <VerticalStackLayout SizeChanged="VStackLayout_SizeChanged"> <syncfusion:SfPdfViewer x:Name="PdfViewer"/> </VerticalStackLayout> Step 4: In the SizeChanged event handler, give the PDF Viewer the necessary height. [C#] /// <summary> /// Occurs when the size of the vertical stack layout changes. /// </summary> private void VStackLayout_SizeChanged(object sender, EventArgs e) { // Check if the sender is a vertical stack layout. if (sender is VerticalStackLayout stackLayout) { // Check if the PDF Viewer is set to fill the vertical stack layout. if (PdfViewer.VerticalOptions == LayoutOptions.Fill) { // Set the height of the PDF Viewer to the height of the vertical stack layout. PdfViewer.HeightRequest = stackLayout.Height; } } } Note: You can skip steps 3 and 4 if you want to provide a predefined HeightRequest for the PDF Viewer when placing inside the stack layout. Have a look at the following code example. [XAML] <VerticalStackLayout> <syncfusion:SfPdfViewer x:Name="PdfViewer" HeightRequest="600"/> </VerticalStackLayout> Download the complete sample on GitHub. Conclusion I hope you enjoyed learning how to integrate PDF Viewer in a vertical stack layout. Refer to our .NET MAUI PDF Viewer’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI PDF Viewer Documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI PDF Viewer and other .NET MAUI components. Please let us know in the following comments if you have any queries or require clarifications. You can also contact us through our support forums, support ticket or feedback portal, or the feedback portal. We are always happy to assist you!
This section illustrates how to add events in the .NET MAUI Switch control. StateChanged Event The StateChanged event triggers when the value or state of the IsOn property changes, either by tapping the switch button or programmatically setting the IsOn property. It provides access to the current and previous values through the SwitchStateChangedEventArgs object. XAML <syncfusion:SfSwitch StateChanged="SfSwitch_StateChanged"/> C# private async void SfSwitch_StateChanged(object sender, SwitchStateChangedEventArgs e) { bool? newValue = e.NewValue; bool? oldValue = e.OldValue?; await DisplayAlert("Alert", "Switch State Changed", "close"); } Output StateChanging Event The StateChanging event fires when the IsOn property’s state is about to change. It allows you to cancel the event if necessary, through the SwitchStateChangingEventArgs object. XAML <syncfusion:SfSwitch StateChanging="SfSwitch_StateChanging"/> C# private void SfSwitch_StateChanging(object sender, SwitchStateChangingEventArgs e) { bool? newValue = e.NewValue; bool? oldValue = e.OldValue; if (newValue == null) { e.Cancel = true; } } Conclusion Hope you enjoyed learning how to add events in .NET MAUI Switch. Refer to our .NET MAUI Switch feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Switch 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 Switch and other .NET MAUI components. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article shows how to create a .NET MAUI Switch application. Step 1: Install the Syncfusion.Maui.Buttons package and add the namespace for buttons. XAML: <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons" x:Class="Switch.MainPage"> Step 2: Initialize the .NET MAUI Switch in XAML. XAML: <syncfusion:SfSwitch /> C# SfSwitch sfSwitch = new SfSwitch(); this.Content = sfSwitch; Output: Conclusion Hope you enjoyed learning how to create a .NET MAUI Switch (SfSwitch). Refer to our .NET MAUI Switch feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Switch 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 Switch(SfSwitch) and other .NET MAUI components. If you have any queries or require clarifications, please let us know in the comments section below. 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 save a signature as a byte array using the .NET MAUI SignaturePad control. Follow the steps below. Step 1: Initialize the SignaturePad Control XAML <VerticalStackLayout Padding="50,0,50,0" Spacing="10"> <Label Text="Signature:" FontSize="20" FontAttributes="Bold" FontFamily="OpenSansSemibold"/> <Frame> <sign:SfSignaturePad x:Name="signaturePad" Background="WhiteSmoke" HeightRequest="200" DrawCompleted="SfSignaturePad_DrawCompleted"/> </Frame> <Label Text="Save Signature as Byte Array:" FontSize="20" FontAttributes="Bold" FontFamily="OpenSansSemibold"/> <Frame> <Image x:Name="image" HeightRequest="250"/> </Frame> </VerticalStackLayout> Step 2: Implement the Logic to Convert Signature into a Byte Array C# private void SfSignaturePad_DrawCompleted(object sender, EventArgs e) { StreamImageSource streamImageSource = (StreamImageSource)signaturePad.ToImageSource(); System.Threading.CancellationToken cancellationToken = System.Threading.CancellationToken.None; Task<Stream> task = streamImageSource.Stream(cancellationToken); Stream stream = task.Result; byte[] bytes = new byte[stream.Length]; stream.Read(bytes, 0, bytes.Length); MemoryStream memoryStream = new MemoryStream(bytes); image.Source = ImageSource.FromStream(() => memoryStream); } Output: Download the complete sample in GitHub Conclusion Hope you enjoyed learning about how to save a signature as a byte array in the .NET MAUI SignaturePad. You can refer to our .NET MAUI SignaturePad’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI SignaturePad documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI 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 .NET MAUI SignaturePad and other .NET MAUI components. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!
This article guides you on how to customize the colors in the .NET MAUI Switch control in a .NET MAUI application. Step 1: Inherit the SwitchSettings for each Visual State To simplify customization, create classes for each VisualState with default settings that can be easily overridden. C# public class SwitchSettingsOn: SwitchSettings { public SwitchSettingsOn() { TrackStroke = Color.FromRgba("6750A4"); TrackBackground = (Brush)new SolidColorBrush(Color.FromRgba("6750A4")); ThumbStroke = Color.FromRgba("FFFFFF"); ThumbBackground = (Brush)new SolidColorBrush(Color.FromRgba("FFFFFF")); ThumbWidthRequest = 22.0; ThumbHeightRequest = 22.0; IconColor = Color.FromArgb("6750A4"); CustomPath = "M14.2051 0.744141L15.207 1.74609L5.69727 11.2559L0.792969 6.35156L1.79492 5.34961L5.69727 9.25195L14.2051 0.744141Z"; } } public class SwitchSettingsOff: SwitchSettings { public SwitchSettingsOff() { TrackStroke = Color.FromArgb("79747E"); TrackBackground = new SolidColorBrush(Color.FromRgba("E6E0E9")); ThumbStroke = Color.FromRgba("79747E"); ThumbBackground = new SolidColorBrush(Color.FromRgba("79747E")); ThumbWidthRequest = 14; ThumbHeightRequest = 14; } } public class SwitchSettingsIndeterminate : SwitchSettings { public SwitchSettingsIndeterminate() { TrackStroke = Color.FromRgba("6750A4"); TrackBackground = new SolidColorBrush(Color.FromRgba("6750A4")); ThumbStroke = Color.FromRgba("FFFFFF"); ThumbBackground = new SolidColorBrush(Color.FromRgba("FFFFFF")); ThumbWidthRequest = 22; ThumbHeightRequest = 22; IconColor = Color.FromArgb("6750A4"); CustomPath = "M0.617188 0.910156H15.3828V3.08984H0.617188V0.910156Z"; } } public class SwitchSettingsOnHovered : SwitchSettings { public SwitchSettingsOnHovered() { TrackStroke = Color.FromRgba("6750A4"); TrackBackground = new SolidColorBrush(Color.FromRgba("6750A4")); ThumbStroke = Color.FromRgba("EADDFF"); ThumbBackground = new SolidColorBrush(Color.FromRgba("EADDFF")); ThumbWidthRequest = 22; ThumbHeightRequest = 22; IconColor = Color.FromArgb("6750A4"); CustomPath = "M14.2051 0.744141L15.207 1.74609L5.69727 11.2559L0.792969 6.35156L1.79492 5.34961L5.69727 9.25195L14.2051 0.744141Z"; } } public class SwitchSettingsOffHovered : SwitchSettings { public SwitchSettingsOffHovered() { TrackStroke = Color.FromArgb("79747E"); TrackBackground = new SolidColorBrush(Color.FromRgba("E6E0E9")); ThumbStroke = Color.FromRgba("49454E"); ThumbBackground = new SolidColorBrush(Color.FromRgba("49454E")); ThumbWidthRequest = 14; ThumbHeightRequest = 14; } } public class SwitchSettingsIndeterminateHovered : SwitchSettings { public SwitchSettingsIndeterminateHovered() { TrackStroke = Color.FromRgba("6750A4"); TrackBackground = new SolidColorBrush(Color.FromRgba("6750A4")); ThumbStroke = Color.FromRgba("EADDFF"); ThumbBackground = new SolidColorBrush(Color.FromRgba("EADDFF")); ThumbWidthRequest = 22; ThumbHeightRequest = 22; IconColor = Color.FromArgb("6750A4"); CustomPath = "M0.617188 0.910156H15.3828V3.08984H0.617188V0.910156Z"; } } public class SwitchSettingsOnPressed : SwitchSettings { public SwitchSettingsOnPressed() { TrackStroke = Color.FromRgba("6750A4"); TrackBackground = new SolidColorBrush(Color.FromRgba("6750A4")); ThumbStroke = Color.FromRgba("EADDFF"); ThumbBackground = new SolidColorBrush(Color.FromRgba("EADDFF")); ThumbWidthRequest = 26; ThumbHeightRequest = 26; IconColor = Color.FromArgb("6750A4"); CustomPath = "M14.2051 0.744141L15.207 1.74609L5.69727 11.2559L0.792969 6.35156L1.79492 5.34961L5.69727 9.25195L14.2051 0.744141Z"; } } public class SwitchSettingsOffPressed : SwitchSettings { public SwitchSettingsOffPressed() { TrackStroke = Color.FromArgb("79747E"); TrackBackground = new SolidColorBrush(Color.FromRgba("E6E0E9")); ThumbStroke = Color.FromRgba("49454E"); ThumbBackground = new SolidColorBrush(Color.FromRgba("49454E")); ThumbWidthRequest = 26; ThumbHeightRequest = 26; } } public class SwitchSettingsIndeterminatePressed : SwitchSettings { public SwitchSettingsIndeterminatePressed() { TrackStroke = Color.FromRgba("6750A4"); TrackBackground = new SolidColorBrush(Color.FromRgba("6750A4")); ThumbStroke = Color.FromRgba("EADDFF"); ThumbBackground = new SolidColorBrush(Color.FromRgba("EADDFF")); ThumbWidthRequest = 26; ThumbHeightRequest = 26; IconColor = Color.FromArgb("6750A4"); CustomPath = "M0.617188 0.910156H15.3828V3.08984H0.617188V0.910156Z"; } } public class SwitchSettingsOnDisabled : SwitchSettings { public SwitchSettingsOnDisabled() { TrackStroke = Color.FromArgb("CAC4D0"); TrackBackground = new SolidColorBrush(Color.FromArgb("CAC4D0")); ThumbStroke = Color.FromArgb("FFFBFE"); ThumbBackground = new SolidColorBrush(Color.FromArgb("FFFBFE")); ThumbWidthRequest = 22; ThumbHeightRequest = 22; IconColor = Color.FromArgb("CAC4D0"); CustomPath = "M14.2051 0.744141L15.207 1.74609L5.69727 11.2559L0.792969 6.35156L1.79492 5.34961L5.69727 9.25195L14.2051 0.744141Z"; } } public class SwitchSettingsOffDisabled : SwitchSettings { public SwitchSettingsOffDisabled() { TrackStroke = Color.FromArgb("1C1B1F").WithAlpha(0.12f); TrackBackground = new SolidColorBrush(Color.FromArgb("FEF7FF")); ThumbStroke = Color.FromArgb("C6C4C6").WithAlpha(0.18f); ThumbBackground = new SolidColorBrush(Color.FromArgb("1C1B1F").WithAlpha(0.3f)); ThumbWidthRequest = 14; ThumbHeightRequest = 14; } } public class SwitchSettingsIndeterminateDisabled : SwitchSettings { public SwitchSettingsIndeterminateDisabled() { TrackStroke = Color.FromArgb("CAC4D0"); TrackBackground = new SolidColorBrush(Color.FromArgb("CAC4D0")); ThumbStroke = Color.FromArgb("FFFBFE"); ThumbBackground = new SolidColorBrush(Color.FromArgb("FFFBFE")); ThumbWidthRequest = 22; ThumbHeightRequest = 22; IconColor = Color.FromArgb("CAC4D0"); CustomPath = "M0.617188 0.910156H15.3828V3.08984H0.617188V0.910156Z"; } } By creating inherited classes for VisualStates, we can more easily customize the appearance of Syncfusion® controls while maintaining the default behavior and structure. This method enhances the flexibility and efficiency of the customization process. Step 2: Customize colors for each Visual State XAML <ContentPage ... xmlns:buttons="clr-namespace:SwitchSample" xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"> <ContentPage.Resources> <ResourceDictionary> <Style TargetType="syncfusion:SfSwitch"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="On"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsOn ThumbBackground="#F57B31" ThumbStroke="#F78F50" TrackBackground="#F7D40D" TrackStroke="#DABA04"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="Off"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsOff ThumbBackground="#F0F5F8" ThumbStroke="#C7C9C9" TrackBackground="#4FCFF7" TrackStroke="#359EBF"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="Indeterminate"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsIndeterminate ThumbBackground="White" ThumbStroke="White" TrackBackground="#419fc0" TrackStroke="#419fc0"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="OnHovered"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsOnHovered ThumbBackground="#F57B31" ThumbStroke="#E7600F" TrackBackground="#F7D40D" TrackStroke="#DABA04"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="OffHovered"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsOffHovered ThumbBackground="#FFFFFF" ThumbStroke="#959595" TrackBackground="#72D4F3" TrackStroke="#359EBF"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="IndeterminateHovered"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsIndeterminateHovered ThumbBackground="#FFFFFF" ThumbStroke="#959595" TrackBackground="#4AA2C0" TrackStroke="#359EBF"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="OnPressed"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsOnPressed ThumbBackground="#F57B31" ThumbStroke="#E7600F" TrackBackground="#F7D40D" TrackStroke="#DABA04"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="OffPressed"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsOffPressed ThumbBackground="#FFFFFF" ThumbStroke="#959595" TrackBackground="#72D4F3" TrackStroke="#359EBF"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="IndeterminatePressed"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsIndeterminatePressed ThumbBackground="#FFFFFF" ThumbStroke="#959595" TrackBackground="#1D87AC" TrackStroke="#359EBF"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="OnDisabled"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsOnDisabled ThumbBackground="#B0AFB2" ThumbStroke="#B0AFB2" TrackBackground="#FEF7FF" TrackStroke="#B0AFB2"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="OffDisabled"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsOffDisabled ThumbBackground="#B0AFB2" ThumbStroke="#B0AFB2" TrackBackground="#FEF7FF" TrackStroke="#B0AFB2"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="IndeterminateDisabled"> <VisualState.Setters> <Setter Property="SwitchSettings"> <Setter.Value> <buttons:SwitchSettingsIndeterminateDisabled ThumbBackground="#B0AFB2" ThumbStroke="#B0AFB2" TrackBackground="#FEF7FF" TrackStroke="#B0AFB2"/> </Setter.Value> </Setter> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </Setter> </Style> </ResourceDictionary> </ContentPage.Resources> <StackLayout> <syncfusion:SfSwitch x:Name="sfSwitch" AllowIndeterminateState="True" /> </StackLayout> </ContentPage> Note The code snippets are for illustrative purposes and may require adjustments to fit the specific requirements of your application. Output Conclusion Hope you enjoyed learning how to customize the colors in the .NET MAUI Switch (SfSwitch). Refer to our .NET MAUI Switch feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Switch 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 Switch(SfSwitch) and other .NET MAUI components. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article guides you on how to customize the appearance of the drop-down for the .NET MAUI Autocomplete control in a .NET MAUI application using Theme keys. The customization includes setting the border color and thickness, the selection background color, and the font size for the drop-down items. Below is an example of how to customize the SfAutoComplete drop-down using Theme keys. XAML <ContentPage xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs" xmlns:themes="clr-namespace:Syncfusion.Maui.Core.Themes;assembly=Syncfusion.Maui.Inputs"> <ContentPage.BindingContext> <local:EmployeeViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <ContentPage.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <themes:SfAutocompleteStyles></themes:SfAutocompleteStyles> <ResourceDictionary> <x:String x:Key="SfAutoCompleteTheme">CommonTheme</x:String> <x:Double x:Key="SfAutocompleteNormalDropdownStrokeThickness">5</x:Double> <x:Double x:Key="SfAutocompleteNormalDropdownItemsFontSize">22</x:Double> <Color x:Key="SfAutocompleteDropdownBorder">Pink</Color> <Color x:Key="SfAutocompleteNormalDropdownSelectionBackground">Brown</Color> </ResourceDictionary> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </ContentPage.Resources> <StackLayout Spacing="10" VerticalOptions="Center"> <editors:SfAutocomplete Placeholder="Enter an employee" TextMemberPath="Name" DisplayMemberPath="Name" ItemsSource="{Binding Employees}" WidthRequest="300" HeightRequest="40" x:Name="autoComplete"> </editors:SfAutocomplete> </StackLayout> </ContentPage> Theme keys details SfAutocompleteNormalDropdownStrokeThickness: Sets the stroke thickness of the dropdown border. SfAutocompleteNormalDropdownItemsFontSize: Sets the font size of the dropdown items. SfAutocompleteDropdownBorder: Sets the color of the dropdown border. SfAutocompleteNormalDropdownSelectionBackground: Sets the background color of the selected item in the dropdown. Note Please note that the code snippets provided in this article are for illustrative purposes and may require adjustments to fit the specific requirements of your application. Output Conclusion I hope you enjoyed learning how to customize the appearance of dropdown in .NET MAUI AutoComplete. You can refer to the .NET MAUI Autocomplete feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI Autocomplete example to understand how to create and manipulate data. For current customers, you can check out our 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 other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can show items count in footer of ListView by directly binding the count property of ItemsSource in FooterTemplate of SfListView. <listView:SfListView.FooterTemplate> <DataTemplate> <StackLayout Orientation="Horizontal" HorizontalOptions="Start" VerticalOptions="Center" Padding="10,0,0,0"> <Label Text="Items Count" TextColor="Black" FontSize="Medium"/> <Label Text="{Binding Items.Count}" TextColor="Black" FontSize="Medium"/> </StackLayout> </DataTemplate> </listView:SfListView.FooterTemplate> View sample in GitHub Conclusion I hope you enjoyed learning how to show items count of ListView in Footer in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI ListView example to understand how to create and manipulate data. For current customers, you can check out our 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 other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can access the named SfListView defined inside DataTemplate of SfPopup by using Behavior. XAML In SfPopup’s ContentTemplate, behaviour added to parent of ListView. <popup:SfPopup x:Name="popupLayout"> <popup:SfPopup.ContentTemplate> <DataTemplate> <Grid> <Grid.Behaviors> <local:GridBehavior/> </Grid.Behaviors> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button Text="Find ListView" x:Name="listviewButton" BackgroundColor="LightGray"/> <sfListView:SfListView x:Name="listView" ItemSpacing="5" ItemsSource="{Binding Items}" SelectionMode="Single" Grid.Row="1"> <sfListView:SfListView.ItemTemplate> <DataTemplate> <Grid x:Name="grid" RowSpacing="1"> <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="50" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50"/> <Label Grid.Column="1" HorizontalTextAlignment="Center" HorizontalOptions="StartAndExpand" LineBreakMode="NoWrap" Text="{Binding ContactName}" FontSize="Medium" /> </Grid> </DataTemplate> </sfListView:SfListView.ItemTemplate> </sfListView:SfListView> </Grid> </DataTemplate> </popup:SfPopup.ContentTemplate> </popup:SfPopup> C# In ChildAdded event you will get the instance of ListView. public class GridBehavior : Behavior<Grid> { Grid grid; SfListView listView; Button button; protected override void OnAttachedTo(BindableObject bindable) { grid = bindable as Grid; grid.ChildAdded += Grid_ChildAdded; } //Method 1 : Get SfListView reference using Grid.ChildAdded Event private void Grid_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is SfListView) { listView = e.Element as SfListView; listView.RefreshView(); } } protected override void OnDetachingFrom(BindableObject bindable) { grid.ChildAdded -= Grid_ChildAdded; listView = null; grid = null; base.OnDetachingFrom(bindable); } } C# You can also get the ListView using FindByName method from Parent element. public class GridBehavior : Behavior<Grid> { Grid grid; SfListView listView; Button button; protected override void OnAttachedTo(BindableObject bindable) { grid = bindable as Grid; grid.ChildAdded += Grid_ChildAdded; } //Method 1 : Get SfListView reference using Grid.ChildAdded Event private void Grid_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is Button) { button = e.Element as Button; button.Clicked += Button_Clicked; } } //Method 2 : Get SfListView reference using FindByName private void Button_Clicked(object sender, EventArgs e) { listView = grid.FindByName<SfListView>("listView"); App.Current.MainPage.DisplayAlert("Information", "ListView instance obtained", "Ok"); listView.ItemTapped += ListView_ItemTapped; } private void ListView_ItemTapped(object sender, Syncfusion.Maui.ListView.ItemTappedEventArgs e) { App.Current.MainPage.DisplayAlert("Information", "ListView ItemTapped", "Ok"); } protected override void OnDetachingFrom(BindableObject bindable) { button.Clicked -= Button_Clicked; grid.ChildAdded -= Grid_ChildAdded; listView.ItemTapped -= ListView_ItemTapped; listView = null; button = null; grid = null; base.OnDetachingFrom(bindable); } } View sample in GitHub Conclusion I hope you enjoyed learning how to access a named ListView inside a XAML DataTemplate in .NET MAUI ListView. You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI ListView example to understand how to create and manipulate data. For current customers, you can check out our 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 other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Using the ObservableCollection data type in the marker data source, we can dynamically add markers to Blazor Maps. When the marker data source is updated, the ObservableCollection will immediately refresh the Maps component. In this section, we will explain you how to dynamically add markers to Maps using the ObservableCollection data type. In the following example, we have a marker data source as an ObservableCollection data type with two objects and a button to dynamically add the marker. These markers are displayed above OpenStreetMap. When you click the button, three objects are added to the marker data source, which results in three markers being added to the Maps component. When the marker data source is updated, the Maps will automatically refresh. Similarly, we can dynamically add the markers above the geometry map. The below code example demonstrates how to add markers to Blazor Maps dynamically. This code example is demonstrated in a Blazor MAUI application in the sample application below. This code can be used in either a server application or a web assembly application. Index.razor @using Syncfusion.Blazor.Maps @using System.Collections.ObjectModel; <div> <SfMaps @ref="sfMaps"> <MapsZoomSettings Enable="true" ZoomFactor="12"></MapsZoomSettings> <MapsCenterPosition Latitude="35.1154711" Longitude="-89.9568190"></MapsCenterPosition> <MapsLayers> <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string"> <MapsMarkerSettings> <MapsMarker Visible="true" Height="25" Width="25" DataSource="Cities" TValue="MapMarker"> </MapsMarker> </MapsMarkerSettings> </MapsLayer> </MapsLayers> </SfMaps> </div> <br /> <button @onclick="addMarkers">Add Marker</button> @code { SfMaps sfMaps; public class MapMarker { public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } } private ObservableCollection<MapMarker> Cities = new ObservableCollection<MapMarker> { new MapMarker { Latitude = 35.11547118078336, Longitude = -89.9568190513077, Name="Marker-One" }, new MapMarker { Latitude = 35.13256277762481, Longitude = -89.94753689681518, Name="Marker-Two" } }; private void addMarkers() { Cities.Add(new MapMarker { Latitude = 35.132226015736194, Longitude = -89.9804791131883, Name = "Marker-Three" }); Cities.Add(new MapMarker { Latitude = 35.12111209207373, Longitude = -89.91933012404557, Name = "Marker-Four" }); Cities.Add(new MapMarker { Latitude = 35.15209258395299, Longitude = -89.94753689681518, Name = "Marker-Five" }); } } The following screenshots illustrate the output of the above code snippet. Screenshot of the Maps’ initial rendering with two markers: Screenshot after dynamically adding a marker on button click: View the sample in GitHub Conclusion I hope you enjoyed learning how dynamically add markers to Blazor Maps component. You can refer to our Blazor Maps feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Maps example to understand how to create and visualize the data. For current customers, you can check out our 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 other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
The .NET MAUI SfExpander is a versatile component that can be used within a FlyoutPage to create collapsible sections. XAML Load the SfExpander in the Flyout of the FlyoutPage. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ExpanderMaui.Views.ExpanderFlyoutMaster" xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Expander;assembly=Syncfusion.Maui.Expander" Title="Menu"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="150"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid BackgroundColor="#f54291" HeightRequest="150" Padding="20" Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="userimage.png" HeightRequest="70" WidthRequest="70" Margin="10,10,10,10"/> <Label Text="John" Grid.Column="1" FontSize="Large" VerticalOptions="Center" HorizontalOptions="Start" Padding="20"/> </Grid> <ScrollView BackgroundColor="#EDF2F5" VerticalScrollBarVisibility="Always" Grid.Row="1"> <StackLayout> <syncfusion:SfExpander HeaderIconPosition="End"> <syncfusion:SfExpander.Header> <Grid HeightRequest="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="home.png" HeightRequest="25" WidthRequest="25" HorizontalOptions="Center" VerticalOptions="Center"/> <Label Text="Home" Grid.Column="1" TextColor="#495F6E" VerticalTextAlignment="Center" /> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <Label HeightRequest="50" Text="Tasks" TextColor="#303030" VerticalTextAlignment="Center"/> <Label HeightRequest="50" Text="Settings" TextColor="#303030" VerticalTextAlignment="Center"/> </StackLayout> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </Grid> </ContentPage> OUTPUT: View sample in GitHub CONCLUSION: I hope you enjoyed learning about how to work with SfExpander in flyout page. You can refer to our .NET MAUI Expander feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI Expander example to understand how to create and manipulate data. For current customers, you can check out our 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 other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In .NET MAUI Autocomplete, the control provides a simple and effective way to display a list of suggestions based on user input. This article will guide you through the process of grouping items within the suggestion box of the .NET MAUI Autocomplete control. Step 1: Define ViewModel In your ViewModel (EmployeeViewModel), organize your employee data into groups. This may involve creating a property for each group and categorizing employees accordingly. C# public class EmployeeViewModel { public ObservableCollection<Employee> Employees { get; set; } public EmployeeViewModel() { this.Employees = new ObservableCollection<Employee>(); Employees.Add(new Employee { Name = "Anne Dodsworth", ProfilePicture = "people_circle1.png", Designation = "Developer", ID = "E001", }); Employees.Add(new Employee { Name = "Andrew Fuller", ProfilePicture = "people_circle2.png", Designation = "Team Lead", ID = "E002", }); Employees.Add(new Employee { Name = "Emilio Alvaro", ProfilePicture = "people_circle4.png", Designation = "Product Manager", ID = "E003", }); Employees.Add(new Employee { Name = "Janet Lavering", ProfilePicture = "people_circle5.png", Designation = "HR", ID = "E004", }); } } Step 2: Update XAML to Bind to Employees Define the Autocomplete in your XAML file. Modify the Autocomplete XAML to bind to the Employees property in the ViewModel, and use the TextSearchMode property for searching items within the groups. XAML <editors:SfAutocomplete Placeholder="Enter an employee" TextSearchMode="StartsWith" DisplayMemberPath="Name" ItemsSource="{Binding Employees}" WidthRequest="280" HeightRequest="34" x:Name="autoComplete"> <editors:SfAutocomplete.BindingContext> <local:EmployeeViewModel/> </editors:SfAutocomplete.BindingContext> <editors:SfAutocomplete.ItemTemplate> <DataTemplate > <ViewCell> <Grid Margin="0,5" VerticalOptions="Center" HorizontalOptions="Center" ColumnDefinitions="48,220" RowDefinitions="50"> <Image Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" Source="{Binding ProfilePicture}" Aspect="AspectFit"/> <StackLayout HorizontalOptions="Start" VerticalOptions="Center" Grid.Column="1" Margin="15,0,0,0"> <Label HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Opacity=".87" FontSize="14" Text="{Binding Name}"/> <Label HorizontalOptions="Start" VerticalTextAlignment="Center" Opacity=".54" FontSize="12" Text="{Binding Designation}"/> </StackLayout> </Grid> </ViewCell> </DataTemplate> </editors:SfAutocomplete.ItemTemplate> </editors:SfAutocomplete> Output Conclusion Hope you enjoyed learning about how to group items in the suggestion box in .NET MAUI Autocomplete control. You can refer to our .NET MAUI AutoComplete’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI AutoComplete documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI 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 .NET MAUI AutoComplete (SfAutoComplete) and other .NET MAUI components. Please let us know in the comments section below 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!
This guide explains how to remove the default left padding in the .NET MAUI Numeric Entry control by setting the Padding property to a negative value. This method effectively reduces or eliminates the default left padding. XAML <inputs:SfNumericEntry WidthRequest="200" HeightRequest="50" Padding="-7" Background="Pink"> </inputs:SfNumericEntry> Output With left padding Without left padding Conclusion I hope you enjoyed learning how to remove the default left padding in .NET MAUI Numeric Entry. Refer to our .NET MAUI Numeric Entry feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Numeric Entry documentation to understand its features and how to use it. 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 Numeric Entry 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!
