The .NET MAUI ListView control allows multiple item selection using the SelectionMode property. To access the selected items within the TapCommand, bind the SelectedItems property to your ViewModel, which holds the collection of currently selected items, and process them inside your command. XAML <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" SelectionMode="Multiple" SelectionGesture="Tap" SelectedItems="{Binding SelectedItems}" TapCommand="{Binding TapCommand}" ItemSize="100"> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Grid Padding="10"> <Grid.RowDefinitions> <RowDefinition Height="0.4*" /> <RowDefinition Height="0.6*" /> </Grid.RowDefinitions> <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Teal" FontSize="21" /> <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" FontSize="15"/> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> ViewModel public class BookInfoRepository { private ObservableCollection<object>? selectedItems = new ObservableCollection<object>(); public ObservableCollection<object>? SelectedItems { get { return selectedItems; } set { this.selectedItems = value; } } public ICommand TapCommand { get; set; } public BookInfoRepository() { TapCommand = new Command(ExecuteTapCommamd); } private void ExecuteTapCommamd(object obj) { // SelectedItems contains the currently selected items. var _selectedItems = this.SelectedItems; } } View sample in GitHub Conclusion: I hope you enjoyed learning how to get the selected items using TapCommand 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. 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!
This article explains how to update chart data and series type using a listbox. Update a chart using listbox selection Blazor Charts provides an option to update the chart data and its series type using selected item in ListBox component. You need to access the selected item value in the ValueChange event using the GetDataByValue method of ListBox component. Then, assign the obtained series type to ChartSeries Type and assign new data to ChartSeries DataSource. The chart will be updated with the new data and the selected series type. The code example below demonstrates how to update the chart data and series type using a ListBox selection. Index.razor @using Syncfusion.Blazor.Charts @using Syncfusion.Blazor.DropDowns <div class="container-fluid"> <div class="row"> <div class="col-lg-4"> <SfListBox @ref="ListBoxObj" Value="@value" DataSource="@chartTypes" TItem="ListItem" TValue="string[]"> <ListBoxSelectionSettings Mode="Syncfusion.Blazor.DropDowns.SelectionMode.Single" ShowCheckbox="true"></ListBoxSelectionSettings> <ListBoxEvents TItem="ListItem" TValue="string[]" ValueChange="OnListValueChange"></ListBoxEvents> <ListBoxFieldSettings Text="Type" Value="Id"></ListBoxFieldSettings> </SfListBox> </div> <div class="col-lg-8"> <SfChart Title="Sales Analysis"> <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis> <ChartSeriesCollection> <ChartSeries DataSource="@Sales" Width=2 XName="Month" YName="SalesValue" Type="@seriesType"> <ChartMarker Visible="true"></ChartMarker> </ChartSeries> </ChartSeriesCollection> </SfChart> </div> </div> </div> @code { SfListBox<string[], ListItem> ListBoxObj; public Syncfusion.Blazor.Charts.ChartSeriesType seriesType { get; set; } = Syncfusion.Blazor.Charts.ChartSeriesType.Line; public void OnListValueChange(ListBoxChangeEventArgs<string[], ListItem> args) { var data = ListBoxObj.GetDataByValue(args.Value); seriesType = data[0].Type; switch (seriesType) { case Syncfusion.Blazor.Charts.ChartSeriesType.Spline: Sales = new List<SalesInfo> { new SalesInfo { Month = "Jan", SalesValue = 45 }, new SalesInfo { Month = "Feb", SalesValue = 38 }, new SalesInfo { Month = "Mar", SalesValue = 44 }, new SalesInfo { Month = "Apr", SalesValue = 42 }, new SalesInfo { Month = "May", SalesValue = 50 }, new SalesInfo { Month = "Jun", SalesValue = 42 }, new SalesInfo { Month = "Jul", SalesValue = 45 } }; break; case Syncfusion.Blazor.Charts.ChartSeriesType.StepLine: Sales = new List<SalesInfo> { new SalesInfo { Month = "Jan", SalesValue = 55 }, new SalesInfo { Month = "Feb", SalesValue = 48 }, new SalesInfo { Month = "Mar", SalesValue = 54 }, new SalesInfo { Month = "Apr", SalesValue = 52 }, new SalesInfo { Month = "May", SalesValue = 60 }, new SalesInfo { Month = "Jun", SalesValue = 52 }, new SalesInfo { Month = "Jul", SalesValue = 55 } }; break; case Syncfusion.Blazor.Charts.ChartSeriesType.Area: Sales = new List<SalesInfo> { new SalesInfo { Month = "Jan", SalesValue = 65 }, new SalesInfo { Month = "Feb", SalesValue = 58 }, new SalesInfo { Month = "Mar", SalesValue = 64 }, new SalesInfo { Month = "Apr", SalesValue = 62 }, new SalesInfo { Month = "May", SalesValue = 70 }, new SalesInfo { Month = "Jun", SalesValue = 62 }, new SalesInfo { Month = "Jul", SalesValue = 65 } }; break; case Syncfusion.Blazor.Charts.ChartSeriesType.Column: Sales = new List<SalesInfo> { new SalesInfo { Month = "Jan", SalesValue = 75 }, new SalesInfo { Month = "Feb", SalesValue = 68 }, new SalesInfo { Month = "Mar", SalesValue = 74 }, new SalesInfo { Month = "Apr", SalesValue = 72 }, new SalesInfo { Month = "May", SalesValue = 80 }, new SalesInfo { Month = "Jun", SalesValue = 72 }, new SalesInfo { Month = "Jul", SalesValue = 75 } }; break; default: Sales = new List<SalesInfo> { new SalesInfo { Month = "Jan", SalesValue = 35 }, new SalesInfo { Month = "Feb", SalesValue = 28 }, new SalesInfo { Month = "Mar", SalesValue = 34 }, new SalesInfo { Month = "Apr", SalesValue = 32 }, new SalesInfo { Month = "May", SalesValue = 40 }, new SalesInfo { Month = "Jun", SalesValue = 32 }, new SalesInfo { Month = "Jul", SalesValue = 35 } }; break; } } public class SalesInfo { public string Month { get; set; } public double SalesValue { get; set; } } public List<SalesInfo> Sales = new List<SalesInfo> { new SalesInfo { Month = "Jan", SalesValue = 35 }, new SalesInfo { Month = "Feb", SalesValue = 28 }, new SalesInfo { Month = "Mar", SalesValue = 34 }, new SalesInfo { Month = "Apr", SalesValue = 32 }, new SalesInfo { Month = "May", SalesValue = 40 }, new SalesInfo { Month = "Jun", SalesValue = 32 }, new SalesInfo { Month = "Jul", SalesValue = 35 } }; private string[] value = new string[] { "List-01" }; private List<ListItem> chartTypes = new List<ListItem> { new ListItem { Type = Syncfusion.Blazor.Charts.ChartSeriesType.Line, Id = "List-01" }, new ListItem { Type = Syncfusion.Blazor.Charts.ChartSeriesType.Spline, Id = "List-02" }, new ListItem { Type = Syncfusion.Blazor.Charts.ChartSeriesType.StepLine, Id = "List-03" }, new ListItem { Type = Syncfusion.Blazor.Charts.ChartSeriesType.Area, Id = "List-04" }, new ListItem { Type = Syncfusion.Blazor.Charts.ChartSeriesType.Column, Id = "List-05" }, }; public class ListItem { public Syncfusion.Blazor.Charts.ChartSeriesType Type { get; set; } public string Id { get; set; } } } The following screenshot illustrates the output of the code snippet. Output Live Sample for Updating a Chart Using ListBox Conclusion I hope you enjoyed learning how to update chart data and series type using a listbox in Blazor Chart Component. You can refer to our Blazor Chart 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 Chart 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, support portal, or feedback portal. We are always happy to assist you!
This section explains how to bind the SelectedItem property of a .NET MAUI ComboBox with a ViewModel in a .NET MAUI application. This allows efficient data management and synchronization between user interactions and data representation. Steps: Step 1: Create a Model Class Begin by creating a model class that encapsulates essential properties such as Name and ID. These properties represent attributes of the social media options. Model Class: public class SocialMediaModel { public string Name { get; set; } public int ID { get; set; } } Step 2: Build a ViewModel Class Create a ViewModel class that inherits from INotifyPropertyChanged. Implement the necessary event and method for the property change notifications. Include a collection property to facilitate binding for multiple selected items. Since the SelectedItem property is of object type, the ViewModel should accommodate for multiple selections. ViewModel: public class SocialMediaViewModel : INotifyPropertyChanged { private void NotifyPropertyChanged([CallerMemberName] string propertyName = "") {PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));} public event PropertyChangedEventHandler PropertyChanged; private object _selectedItem; public object SelectedItem { get { return _selectedItem; } set { _selectedItem = value; NotifyPropertyChanged("SelectedItem"); } } public ObservableCollection<SocialMedia> SocialMedias { get; set; } public SocialMediaViewModel() { SocialMedias = new ObservableCollection<SocialMedia> { new SocialMedia() { Name = "Facebook", ID = 0 }, new SocialMedia() { Name = "Google Plus", ID = 1 }, new SocialMedia() { Name = "Instagram", ID = 2 }, new SocialMedia() { Name = "LinkedIn", ID = 3 }, new SocialMedia() { Name = "Skype", ID = 4 }, new SocialMedia() { Name = "Telegram", ID = 5 }, new SocialMedia() { Name = "Televzr", ID = 6 }, new SocialMedia() { Name = "Tik Tok", ID = 7 }, new SocialMedia() { Name = "Tout", ID = 8 }, new SocialMedia() { Name = "Tumblr", ID = 9 }, new SocialMedia() { Name = "Twitter", ID = 10 }, new SocialMedia() { Name = "Vimeo", ID = 11 }, new SocialMedia() { Name = "WhatsApp", ID = 12 }, new SocialMedia() { Name = "YouTube", ID = 13 } }; SelectedItem = SocialMedias.ElementAtOrDefault(3); } } Step 3: Bind ComboBox SelectedItem Property In your XAML layout, add the ComboBox control to visually display the social media options for the selection. Bind the SelectedItem property of the ComboBox control to the corresponding property within your ViewModel. XAML: <StackLayout> <editors:SfComboBox WidthRequest="150" HeightRequest="50" ItemsSource="{Binding SocialMedias}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}" SelectedValuePath="Name" /> </StackLayout> Output Conclusion Hope you enjoyed learning about how to bind SelectedItem of ComboBox with View Model in .NET MAUI. You can refer to our .NET MAUI ComboBox feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI ComboBox 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 ComboBox 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!
WPF Diagram (SfDiagram) supports to bindbinding the SelectedItems property of the SfDiagram View class to any custom ViewModel class’s property. You can achieve this requirement by creating a custom ViewModel class with the custom SelectedItems property of SelectorViewModel type. Then, you can bind the SelectedItems property of SfDiagram (View) to view model of SelectedItems property. XAML <!--Initialize the SfDiagram and binding custom view model SelectedItems property to SfDiagram's SelectedItems--> <syncfusion:SfDiagram SelectedItems="{Binding SelectedItems}"> </syncfusion:SfDiagram> C# //To Represent the view model class for SfDiagram to bind SelectedItems property of SfDiagram view to ViewModel. public class CustomVM : INotifyPropertyChanged { public CustomVM() { } private SelectorViewModel selectedItems = new SelectorViewModel() { Nodes = new ObservableCollection<NodeViewModel>(), Connectors = new ObservableCollection<ConnectorViewModel>(), }; /// <summary> /// Gets or sets the SelectedItems which is to bind the custom SelectorViewModel to SelectedItems property of SfDiagram view. /// </summary> public SelectorViewModel SelectedItems { get { return selectedItems; } set { if (selectedItems != value) { selectedItems = value; OnPropertyChanged("SelectedItems"); } } } } View sample in GitHub
You can get the selected records in grid by using getSelectedRecords or getSelectedRows method. The getSelectedRecords method returns the collection of selected records data as object while the getSelectedRows method returns the collection of selected row elements. You can use either of the methods as per your requirement. This is demonstrated in the below code snippet and sample on custom toolbar button click in the toolbarClick event. <script> // Toolbar click event function function clickHandler(args: ClickEventArgs) { if (args.item.id === 'selected_records') { // Returns the collection of selected row elements console.log(grid.getSelectedRows()); // Returns the collection of selected records data console.log(grid.getSelectedRecords()); } } </script> Output JavaScript (ES5) Sample: https://stackblitz.com/edit/hfdp9b?file=index.js Vue.js Sample: https://plnkr.co/edit/hJxyQFxbDD8lpmXfAPiT
This article illustrates how the selected chip selection indicator icon in the Xamarin ChipGroup can be hidden in the filtered type. That was achieved by adding the SfChip as the ItemTemplate of a ChipGroup. The default value of the SfChip's ShowSelectionIndicator property is false. Since, the selection indicator icon will be hidden by default while using the SfChip as an ItemTemplate. In addition, we have to set the Transparent color to the BackgroundColor and BorderColor of the Chip in the ItemTemplate. It will take the BackgroundColor from the SelectedChipBackgroundColor and ChipBackgroundColor properties of ChipGroup. TextColor of the chips has been updated based on the IsChecked value with ChipTextColor and SelectedChipTextColor properties as per the following code example. XAML: … <buttons:SfChipGroup Type="Filter" x:Name="chipGroup" SelectedChipBackgroundColor="DarkGray" ChipBackgroundColor="LightGray" ChipTextColor="Black" SelectedChipTextColor="White" SelectionChanged="SessionListFilterOptions_SelectionChanged" ItemsSource="{Binding Languages}" ChipPadding="8,8,0,0" SelectionIndicatorColor="White" > <buttons:SfChipGroup.ItemTemplate> <DataTemplate> <buttons:SfChip Text="{Binding Name}" InputTransparent="True" BorderColor="Transparent" BorderWidth="0" TextColor="{Binding Source={x:Reference chipGroup},Path=ChipTextColor}" BackgroundColor="Transparent"> <buttons:SfChip.Triggers> <DataTrigger TargetType="buttons:SfChip" Binding="{Binding IsChecked}" Value="True" > <Setter Property="TextColor" Value="{Binding Source= {x:Reference chipGroup}, Path=SelectedChipTextColor}"/> </DataTrigger> </buttons:SfChip.Triggers> </buttons:SfChip> </DataTemplate> </buttons:SfChipGroup.ItemTemplate> </buttons:SfChipGroup> … C#: private void SessionListFilterOptions_SelectionChanged(object sender, Syncfusion.Buttons.XForms.SfChip.SelectionChangedEventArgs e) { if (e.AddedItem != null) { (e.AddedItem as Language).IsChecked = true; } if (e.RemovedItem != null) { (e.RemovedItem as Language).IsChecked = false; } } Output View the sample in GitHub. See Also: What are the types available in ChipGroup? What are the customizations available in ChipGroup? How to notify selection changes in ChipGroup?
Steps to bind the SelectedItem property using view model in SfComboBox: Step 1: Create a view model class and add the properties to bind the values. Step 2: The SelectedItem property is an object type, so for binding multiple selected items, create a property, and its type should be a collection of objects. Step 3: Set the binding context to the content page. Step 4: Define the SfComboBox control and bind the SelectedItem property. The following code demonstrates how to bind the SelectedItem property using view model. Code: <ContentPage.BindingContext> <local:ComboBoxViewModel/> </ContentPage.BindingContext> <StackLayout Padding="0,50,0,0"> <combobox:SfComboBox x:Name="comboBox" HeightRequest="50" IsEditableMode="false" IgnoreDiacritic="true" MultiSelectMode="Token" DataSource="{Binding Colors}" SelectedItem="{Binding SelectedItem}" Watermark="Select an Item" ComboBoxMode="Suggest"> </combobox:SfComboBox> </StackLayout> View Model code to bind the SelectedItem property: public class ComboBoxViewModel : INotifyPropertyChanged { public ComboBoxViewModel() { Colors = new ObservableCollection<object>(); Colors.Add("Red"); Colors.Add("Pink"); Colors.Add("Orange"); Colors.Add("Blue"); Colors.Add("Violet"); Colors.Add("Yellow"); Colors.Add("Green"); SelectedItem = new ObservableCollection<object>{ "Red", "Blue" }; } private ObservableCollection<object> _colors; private ObservableCollection<object> _selectedItem; public event PropertyChangedEventHandler PropertyChanged; public void RaisePropertyChanged(string name) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(name)); } } public ObservableCollection<object> Colors { get { return _colors; } set { _colors = value; RaisePropertyChanged("Colors"); } } public ObservableCollection<object> SelectedItem { get { return _selectedItem; } set { _selectedItem = value; RaisePropertyChanged("SelectedItem"); } } } Before updating the image: Please find the sample from the following link: SampleConclusionI hope you enjoyed learning about how to bind selected item of ComboBox view model of Xamarin.Forms ComboBox.You can refer to our Xamarin ComboBox page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ComboBox Documentation to understand how to manipulate data.For current customers you can check out on our Xamarin.Forms components from the License and Download page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Xamarin.Forms ComboBox and other Xamarin.Forms components.If you have any queries or require clarifications, please let us know in the comment 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 get the properties of SelectedItem by casting the sender to SfCarousel in the SelectionChanged or ItemTapped event. SelectedIndex property You can get the index of the SelectedItem by using the SelectedIndex property. SelectedItem property The SelectedItem property stores the value of the current item that has been selected as an object. MainWindow.Xaml The above code selects the third item on load as displayed in the following screenshot. Figure 1: SelectedItem SelectionChanged event You can get the details of the SelectedItem, by casting the sender as SfCarousel. The following code displays how to get the item’s properties. MainPage.xaml CarousalProperties.cs MainPage.xaml.cs The following screenshot displays the information after tapping on the second item. Figure 2: SelectionChanged
