Skip to content

Commit 65425e6

Browse files
MuniappanSubramanianMuniappanSubramanian
authored
Merge pull request #3529 from syncfusion-content/Add-selectionmodes-in-maui-toolbar
976335 - Added selection mode and event in toolbar
2 parents ff8f913 + 26746f5 commit 65425e6

File tree

5 files changed

+510
-1
lines changed

5 files changed

+510
-1
lines changed

‎MAUI/Toolbar/events.md‎

Lines changed: 137 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,9 +185,45 @@ private void OnMoreButtonTapped(object? sender, ToolbarMoreButtonTappedEventArgs
185185

186186
{% endtabs %}
187187

188+
## Selection Changed
189+
190+
A [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_SelectionChanged) event occurs, each time a toolbar item is selected.
191+
192+
Below is a list of the arguments:
193+
194+
* **Sender** : This contains the SfToolbar object.
195+
196+
* **SelectionChanged**: The selection changed action performed on an toolbar element can be found in the [ToolbarSelectionChangedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.ToolbarSelectionChangedEventArgs.html), you can see details about the selected items.
197+
198+
* **NewToolbarItems** : Returns the newly selected toolbar items.
199+
* **OldToolbarItems** : Returns the previously selected toolbar items.
200+
201+
{% tabs %}
202+
203+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %}
204+
205+
<toolbar:SfToolbar x:Name="toolbar"
206+
SelectionChanged="OnToolbarSelectionChanged" >
207+
</toolbar:SfToolbar>
208+
209+
{% endhighlight %}
210+
211+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="1" %}
212+
213+
this.toolbar.SelectionChanged += this.OnToolbarSelectionChanged;
214+
private void OnToolbarSelectionChanged(object? sender, ToolbarSelectionChangedEventArgs e)
215+
{
216+
var newToolbarItems = e.NewToolbarItems;
217+
var oldToolbarItems = e.OldToolbarItems;
218+
}
219+
220+
{% endhighlight %}
221+
222+
{% endtabs %}
223+
188224
## Commands
189225

190-
Toolbar commands allows to map [Tapped](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_Tapped) event, [ItemTouchInteraction](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_ItemTouchInteraction) event, [ItemLongPressed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_ItemLongPressed) event, [MoreItemsChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_MoreItemsChanged) event and [MoreButtonTapped](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_MoreButtonTapped) event to `Commands` which supports the MVVM (Model-View-ViewModel) pattern.
226+
Toolbar commands allows to map [Tapped](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_Tapped) event, [ItemTouchInteraction](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_ItemTouchInteraction) event, [ItemLongPressed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_ItemLongPressed) event, [MoreItemsChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_MoreItemsChanged) event, [MoreButtonTapped](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_MoreButtonTapped) and [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_SelectionChanged) event to `Commands` which supports the MVVM (Model-View-ViewModel) pattern.
191227

192228
### Tapped Command
193229

@@ -619,4 +655,104 @@ public class ToolbarInteractionViewModel
619655

620656
{% endhighlight %}
621657

658+
{% endtabs %}
659+
660+
### SelectionChanged Command
661+
662+
The [SelectionChangedCommand](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_SelectionChangedCommand) will be triggered when you select the toolbar items and pass the [ToolbarSelectionChangedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.ToolbarSelectionChangedEventArgs.html#properties) as parameter.
663+
664+
{% tabs %}
665+
666+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="6" %}
667+
668+
<Grid>
669+
<Grid.BindingContext>
670+
<local:ToolbarInteractionViewModel />
671+
</Grid.BindingContext>
672+
<toolbar:SfToolbar x:Name="toolbar"
673+
SelectionChangedCommand="{Binding ToolbarSelectionChangedCommand}"
674+
HeightRequest="56"
675+
Orientation="Horizontal">
676+
<toolbar:SfToolbar.Items>
677+
<toolbar:SfToolbarItem Name="ToolbarItem1" Text="Zoom-in">
678+
<toolbar:SfToolbarItem.Icon>
679+
<FontImageSource Glyph="&#xE713;" FontFamily="MaterialAssets"/>
680+
</toolbar:SfToolbarItem.Icon>
681+
</toolbar:SfToolbarItem>
682+
<toolbar:SfToolbarItem Name="ToolbarItem2" Text="Zoom-out">
683+
<toolbar:SfToolbarItem.Icon>
684+
<FontImageSource Glyph="&#xE714;" FontFamily="MaterialAssets"/>
685+
</toolbar:SfToolbarItem.Icon>
686+
</toolbar:SfToolbarItem>
687+
<toolbar:SfToolbarItem Name="ToolbarItem3" Text="Search">
688+
<toolbar:SfToolbarItem.Icon>
689+
<FontImageSource Glyph="&#xE715;" FontFamily="MaterialAssets"/>
690+
</toolbar:SfToolbarItem.Icon>
691+
</toolbar:SfToolbarItem>
692+
</toolbar:SfToolbar.Items>
693+
</toolbar:SfToolbar>
694+
</Grid>
695+
696+
{% endhighlight %}
697+
698+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="7" %}
699+
700+
public partial class MainPage : ContentPage
701+
{
702+
public MainPage()
703+
{
704+
InitializeComponent();
705+
SfToolbar toolbar = new SfToolbar();
706+
ToolbarInteractionViewModel viewModel = new ToolbarInteractionViewModel();
707+
toolbar.SelectionChangedCommand = viewModel.ToolbarSelectionChangedCommand;
708+
ObservableCollection<BaseToolbarItem> itemCollection = new ObservableCollection<BaseToolbarItem>
709+
{
710+
new SfToolbarItem
711+
{
712+
Name = "Zoom-in",
713+
ToolTipText = "Zoom-in",
714+
Icon = new FontImageSource { Glyph = "&#xE713;", FontFamily = "MauiMaterialAssets" }
715+
},
716+
new SfToolbarItem
717+
{
718+
Name = "Zoom-out",
719+
ToolTipText = "Zoom-out",
720+
Icon = new FontImageSource { Glyph = "&#xE714;", FontFamily = "MauiMaterialAssets" }
721+
},
722+
new SfToolbarItem
723+
{
724+
Name = "Search",
725+
ToolTipText = "Search",
726+
Icon = new FontImageSource { Glyph = "&#xE715;", FontFamily = "MauiMaterialAssets" }
727+
},
728+
};
729+
toolbar.Items = itemCollection;
730+
this.Content = toolbar;
731+
}
732+
}
733+
734+
{% endhighlight %}
735+
736+
{% highlight C# tabtitle="ToolbarInteractionViewModel.cs" %}
737+
738+
public class ToolbarInteractionViewModel
739+
{
740+
public ICommand ToolbarSelectionChangedCommand { get; set; }
741+
public ToolbarInteractionViewModel()
742+
{
743+
this.ToolbarSelectionChangedCommand = new Command<ToolbarSelectionChangedEventArgs>(ExecuteSelectionChanged, CanExecuteSelectionChanged);
744+
}
745+
private bool CanExecuteSelectionChanged(ToolbarSelectionChangedEventArgs arg)
746+
{
747+
return true;
748+
}
749+
private void ExecuteSelectionChanged(ToolbarSelectionChangedEventArgs obj)
750+
{
751+
var oldItems = obj.OldToolbarItems;
752+
var newItems = obj.NewToolbarItems;
753+
}
754+
}
755+
756+
{% endhighlight %}
757+
622758
{% endtabs %}

‎MAUI/Toolbar/getting-started.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ documentation: ug
1111

1212
This section provides a quick overview of how to get started with the [.NET MAUI SfToolbar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html) for .NET MAUI and a walk-through to configure the .NET MAUI Toolbar in a real-time scenario. Follow the steps below to add .NET MAUI Toolbar control to your project.
1313

14+
To get start quickly with our .NET MAUI Toolbar, you can check the below video.
15+
16+
{% youtube
17+
"youtube:https://www.youtube.com/watch?v=U4ZFNr0nsB0"%}
18+
1419
{% tabcontents %}
1520
{% tabcontent Visual Studio %}
1621

‎MAUI/Toolbar/images/selectionmodes.gif‎

435 KB
Loading

0 commit comments

Comments
 (0)