The .NET MAUI Chat allows to handle the message in SendMessage event or SendMessageCommand. Programmatically add the actual sent message into the Messages collection before adding the new message created in the event. XAML <sfChat:SfChat x:Name="sfChat" Messages="{Binding Messages}" SendMessageCommand="{Binding SendMessageCommand}" CurrentUser="{Binding CurrentUser}" /> ViewModel public class GettingStartedViewModel : INotifyPropertyChanged { public ICommand SendMessageCommand { get; set; } public GettingStartedViewModel() { SendMessageCommand = new Command(ExecuteSendMessageCommand); } private void ExecuteSendMessageCommand(object obj) { // Skips adding new message in Messages collection. var eventArgs = obj as Syncfusion.Maui.Chat.SendMessageEventArgs; eventArgs!.Handled = true; // Retrieve message using SendMessageEventArgs.Message. // Now add the actual sent message into collection as required. var message = eventArgs.Message; if (message != null) { this.Messages.Add(message); } // You can add the special message into collection as like below. TextMessage textMessage = new TextMessage() { Author = this.CurrentUser }; textMessage.Text = "Special Message"; this.Messages.Add(textMessage); } } Download the complete sample from GitHub Conclusion: I hope you enjoyed learning how to intercept the message created in .NET MAUI Chat (SfChat). You can refer to our .NET MAUI SfChat feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. For current customers, you can check out our components from the License and Downloads page. 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 guide demonstrates how to bind a Command to the content of an AccordionItem in .NET MAUI Accordion. C# The ItemInfoRepository class contains a command that will be bound in the XAML. public class ItemInfoRepository { public Command<object> ShowDetailsCommand { get; set; } public ItemInfoRepository() { ShowDetailsCommand = new Command<object>(OnShowDetailClicked); } private void OnShowDetailClicked(object obj) { var item = obj as ItemInfo; App.Current!.MainPage!.DisplayAlert(item!.Name, item.Description, "Ok"); } } XAML Bind the ViewModel Command to the ImageButton that is loaded inside the Content of the AccordionItem. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:accordion="clr-namespace:Syncfusion.Maui.Accordion;assembly=Syncfusion.Maui.Expander" xmlns:local="clr-namespace:Accordion" x:Class="Accordion.MainPage"> <ContentPage.BindingContext> <local:ItemInfoRepository x:Name="viewModel"/> </ContentPage.BindingContext> <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" ExpandMode="SingleOrNone"> <BindableLayout.ItemTemplate> <DataTemplate> <accordion:AccordionItem> <accordion:AccordionItem.Header> <Grid Padding="5,0,0,0" HeightRequest="50"> <Label Text="{Binding Name}" FontSize="20" /> </Grid> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid BackgroundColor="#C0C0C0" Padding="5,0,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="45" /> </Grid.ColumnDefinitions> <Label Text="{Binding Description}" VerticalOptions="Center"/> <Grid Grid.Column="1" Padding="10" BackgroundColor="#C0C0C0"> <ImageButton BackgroundColor="{OnPlatform WinUI=#C0C0C0}" HeightRequest="30" WidthRequest="30" Source="Details.png" Command="{Binding Path=BindingContext.ShowDetailsCommand, Source={x:Reference accordion}}" CommandParameter="{Binding .}"/> </Grid> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </accordion:SfAccordion> </ContentPage> Download the complete sample on GitHub. Conclusion I hope you enjoyed learning how to bind the command in .NET MAUI Accordion. You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI Accordion example to understand how to create and manipulate data. For current customers, 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. 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!
In .NET MAUI Popup, you have the ability to include footer buttons that users can interact with using ShowFooter. This article demonstrates how to handle the click events of the accept and decline buttons in the footer area of the SfPopup by using custom commands. Implementing Custom Commands To handle the actions of the accept and decline buttons, you can create custom commands by implementing the ICommand interface. Below is an example of how to create custom commands for both accept and decline buttons: public class AcceptButtonCustomCommand : ICommand { public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; // The command can always execute } public void Execute(object parameter) { // Implement the action to be performed on accept button click } } public class DeclineButtonCustomCommand : ICommand { public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; // The command can always execute } public void Execute(object parameter) { // Implement the action to be performed on decline button click } } Assigning Custom Commands to Footer Buttons Once you have defined your custom commands, you can assign them to the AcceptCommand and DeclineCommand of the SfPopup as shown below: popup = bindable.FindByName<sfpopup>("popup"); acceptCommand = new AcceptButtonCustomCommand(); declineCommand = new DeclineButtonCustomCommand(); popup.AcceptCommand = acceptCommand; popup.DeclineCommand = declineCommand; Download the complete sample on GitHub Conclusion I hope you enjoyed learning how to bind MVVM Commands in footer buttons in .NET MAUI Popup (SfPopup). You can refer to our .NET MAUI Popup 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!
You can load the SfExpander in the ItemTemplate of SfListView and remove the expander at run time by updating the ListView collection in Xamarin.Forms. C# The Commands defined in the ViewModel are used to customize the Expander and delete the same using the Remove method. public class ViewModel { public Command<object> ReadCommand { get; set; } public Command<object> DeleteCommand { get; set; } public ViewModel() { ReadCommand = new Command<object>(OnReadClicked); DeleteCommand = new Command<object>(OnDeleteClicked); GenerateSource(); } private void OnDeleteClicked(object obj) { var expanderItem = obj as InboxInfo; this.InboxInfo.Remove(expanderItem); } private void OnReadClicked(object obj) { var expanderItem = obj as InboxInfo; expanderItem.FontStyle = FontAttributes.None; expanderItem.IsExpanded = false; } } XAML Loaded the SfExpander to the SfListView.ItemTemplate. ViewModel commands bound to the Button.Command and set BindingContext as the CommandParameter. <sflistView:SfListView x:Name="listView" ItemsSource="{Binding InboxInfo}" AutoFitMode="DynamicHeight" ItemSpacing="1" BackgroundColor="LightGray"> <sflistView:SfListView.ItemTemplate> <DataTemplate> <expander:SfExpander HeaderIconPosition="Start" HeaderBackgroundColor="White" IsExpanded="{Binding IsExpanded}"> <expander:SfExpander.Header> <Grid Padding="10,0,0,0" HeightRequest="70"> ... <Grid HorizontalOptions="StartAndExpand"> <Label LineBreakMode="NoWrap" TextColor="#474747" FontSize="18" FontAttributes="{Binding FontStyle}" Text="{Binding Title}" VerticalOptions="Center"/> <Label LineBreakMode="NoWrap" TextColor="#474747" Grid.Row="1" Text="{Binding Subject}" FontSize="16" VerticalOptions="Center"/> </Grid> <Label TextColor="#474747" HorizontalOptions="EndAndExpand" Padding="5,10,5,10" Grid.Column="1" LineBreakMode="NoWrap" Text="{Binding Date}" FontSize="12"/> </Grid> </expander:SfExpander.Header> <expander:SfExpander.Content> <Grid HeightRequest="100" > ... <Label TextColor="#474747" Text="{Binding Description}" VerticalOptions="Center"/> <Grid Grid.Row="1"> <Button x:Name="save" Text="Mark as read" Command="{Binding Path=BindingContext.ReadCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}" FontSize="15" BackgroundColor="#28abb9" CornerRadius="5" TextColor="White"/> <Button x:Name="delete" Text="Delete" Command="{Binding Path=BindingContext.DeleteCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}" Grid.Column="1" FontSize="15" BackgroundColor="#ea2c62" CornerRadius="5" TextColor="White"/> </Grid> </Grid> </expander:SfExpander.Content> </expander:SfExpander> </DataTemplate> </sflistView:SfListView.ItemTemplate> </sflistView:SfListView> View sample in GitHub
You can animate the ListViewItem only when loading for the first time, not on reusing by using the Model class property in Xamarin.Forms SfListView. You can refer to the following documentation to animate the ListViewItems, https://www.syncfusion.com/kb/9537/how-to-animate-xamarin-listview-items XAML Bind Button.Command to add items to the collection. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.MainPage" Padding="0,20,0,0"> <ContentPage.BindingContext> <local:ContactsViewModel/> </ContentPage.BindingContext> <ContentPage.Behaviors> <local:Behaviour/> </ContentPage.Behaviors> <ContentPage.Content> <StackLayout> <Button x:Name="addButton" Text="Add items" Command="{Binding AddItemsCommand}" HeightRequest="50"/> <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}"> <syncfusion:SfListView.ItemTemplate > <DataTemplate> <Grid x:Name="grid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/> <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </StackLayout> </ContentPage.Content> </ContentPage> C# Add items in the command execution method. namespace ListViewXamarin { public class ContactsViewModel : INotifyPropertyChanged { public ObservableCollection<Contacts> ContactsInfo { get; set; } public Command AddItemsCommand { get; set; } public ContactsViewModel() { ContactsInfo = new ObservableCollection<Contacts>(); AddItemsCommand = new Command(AddItems); GenerateInfo(); } private void AddItems() { Random r = new Random(); for (int i = 0; i < 5; i++) { var contact = new Contacts(CustomerNames[r.Next(0, 30)], r.Next(720, 799).ToString() + " - " + r.Next(3010, 3999).ToString()); contact.ContactImage = ImageSource.FromResource("ListViewXamarin.Images.Image" + r.Next(0, 28) + ".png"); ContactsInfo.Add(contact); } } } } C# Defined IsAnimated property in the Model class. Get the item data from the BindingContext of the ListViewItemExt. Based on the IsAnimated property, you can animate the ListViewItem only once. public class ListViewItemExt : ListViewItem { public ListViewItemExt() { } protected override void OnItemAppearing() { var item = this.BindingContext as Contacts; if (!item.IsAnimated) { this.Opacity = 0; this.FadeTo(1, 400, Easing.SinInOut); item.IsAnimated = true; } base.OnItemAppearing(); } } Output View sample in GitHub
You can load Xamrin.Forms SfListView inside Mr.Gesture’s page and use Gesture commands to handle touch. Step 1: Install the Mr.Gesture Nuget package in the shared code project. Step 2: Create your Xaml page by inheriting Mr.Gesture.ContentPage. namespace ListViewXamarin { public partial class MainPage : MR.Gestures.ContentPage { public MainPage() { InitializeComponent(); } } } Step 3: Create command in the ViewModel class and handle the touch in the command execute method. namespace ListViewXamarin { public class ContactsViewModel { public Command<object> MrGestureTapCommand { get; set; } public ContactsViewModel() { MrGestureTapCommand = new Command<object>(OnMrGestureCommandTapped); } private void OnMrGestureCommandTapped(object obj) { var tappedItem = obj as Contacts; App.Current.MainPage.DisplayAlert("Mr.Gesture tapped", tappedItem.ContactName + " tapped", "Ok"); } } } Step 4: Add ListView to the content of the page. Add Mr.Gesture.Grid to the ItemTemplate of SfListView and bind ViewModel command to TappedCommand of Mr.Gesture.Grid. <mr:ContentPage xmlns:mr="clr-namespace:MR.Gestures;assembly=MR.Gestures" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.MainPage"> <mr:ContentPage.BindingContext> <local:ContactsViewModel/> </mr:ContentPage.BindingContext> <mr:ContentPage.Content> <StackLayout> <syncfusion:SfListView x:Name="listView" ItemSpacing="1" ItemSize="60" ItemsSource="{Binding ContactsInfo}"> <syncfusion:SfListView.ItemTemplate > <DataTemplate> <mr:Grid TappedCommand="{Binding Path=BindingContext.MrGestureTapCommand, Source={x:Reference listView}}" TappedCommandParameter="{Binding .}"> <mr:Grid.ColumnDefinitions> <ColumnDefinition Width="70" /> <ColumnDefinition Width="*" /> </mr:Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/> <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> </Grid> </mr:Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </StackLayout> </mr:ContentPage.Content> </mr:ContentPage> View sample in GitHub
You can delete an item from ListView by the button loaded inside ItemTemplate in Xamarin.Forms. XAML ViewModel command bound to the Button Command by the reference of ListView <ContentPage xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"> <ContentPage.Content> <Grid> <Syncfusion :SfListView x:Name="listView" ItemsSource="{Binding contactsInfo}" > < Syncfusion :SfListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid> <Button Text="Delete" Command="{Binding Path=BindingContext.DeleteCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}"/> </Grid> </ViewCell> </DataTemplate> </ Syncfusion: SfListView.ItemTemplate> </ Syncfusion: SfListView> </Grid> </ContentPage.Content> </ContentPage> C# In VeiwModel command handler, removed the selected item from the collection. namespace ListViewSample { public class ContactsViewModel : INotifyPropertyChanged { public Command<object> DeleteCommand { get; set; } public ContactsViewModel() { DeleteCommand = new Command<object>(OnTapped); } private void OnTapped(object obj) { var contact = obj as Contacts; contactsinfo.Remove(contact); App.Current.MainPage.DisplayAlert("Message","Item Deleted :" +contact.ContactName,"Ok"); } } } Output View Sample in GitHub
