Skip to content

Commit 9bcfabc

Browse files
vasavi-SF4854vasavi-SF4854
committed
976335 - Added selection mode and event in toolbar
1 parent 23d4e2b commit 9bcfabc

File tree

3 files changed

+502
-1
lines changed

3 files changed

+502
-1
lines changed

‎MAUI/Toolbar/Selection Mode.md‎

Lines changed: 365 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,365 @@
1+
---
2+
layout: post
3+
title: Selection Mode in .NET MAUI Toolbar Control | Syncfusion®
4+
description: Learn here all about Selection mode support in Syncfusion® .NET MAUI Toolbar (SfToolbar) control and more.
5+
platform: maui
6+
control: Toolbar (SfToolbar)
7+
documentation: ug
8+
---
9+
10+
# Selection Mode in .NET MAUI Toolbar (SfToolbar)
11+
12+
The Selection mode is specified in the Toolbar property enumeration. You can select the toolbar item by tapping the item in the toolbar. SfToolbar provides three types of modes such as Single, SingleDeselect, and Multiple. The default SelectionMode is Single, which allows the user to select only one item at a time.
13+
14+
## Single Selection
15+
16+
The Single selection can be performed in the Toolbar by setting the ToolbarSelectionMode property to Single. In this selection, you can select a single item at a time in the toolbar.
17+
18+
{% tabs %}
19+
20+
{% highlight xaml %}
21+
<toolbar:SfToolbar x:Name="Toolbar" HeightRequest="56" SelectionMode="Single">
22+
<toolbar:SfToolbar.Items>
23+
<toolbar:SfToolbarItem Name="Bold">
24+
<toolbar:SfToolbarItem.Icon>
25+
<FontImageSource Glyph="&#xE770;"
26+
FontFamily="MauiMaterialAssets" />
27+
</toolbar:SfToolbarItem.Icon>
28+
</toolbar:SfToolbarItem>
29+
<toolbar:SfToolbarItem Name="Underline">
30+
<toolbar:SfToolbarItem.Icon>
31+
<FontImageSource Glyph="&#xE762;"
32+
FontFamily="MauiMaterialAssets" />
33+
</toolbar:SfToolbarItem.Icon>
34+
</toolbar:SfToolbarItem>
35+
<toolbar:SfToolbarItem Name="Italic">
36+
<toolbar:SfToolbarItem.Icon>
37+
<FontImageSource Glyph="&#xE771;"
38+
FontFamily="MauiMaterialAssets" />
39+
</toolbar:SfToolbarItem.Icon>
40+
</toolbar:SfToolbarItem>
41+
<toolbar:SfToolbarItem Name="AlignLeft">
42+
<toolbar:SfToolbarItem.Icon>
43+
<FontImageSource Glyph="&#xE751;"
44+
FontFamily="MauiMaterialAssets" />
45+
</toolbar:SfToolbarItem.Icon>
46+
</toolbar:SfToolbarItem>
47+
<toolbar:SfToolbarItem Name="AlignRight">
48+
<toolbar:SfToolbarItem.Icon>
49+
<FontImageSource Glyph="&#xE753;"
50+
FontFamily="MauiMaterialAssets" />
51+
</toolbar:SfToolbarItem.Icon>
52+
</toolbar:SfToolbarItem>
53+
<toolbar:SfToolbarItem Name="AlignCenter">
54+
<toolbar:SfToolbarItem.Icon>
55+
<FontImageSource Glyph="&#xE752;"
56+
FontFamily="MauiMaterialAssets" />
57+
</toolbar:SfToolbarItem.Icon>
58+
</toolbar:SfToolbarItem>
59+
<toolbar:SfToolbarItem Name="AlignJustify">
60+
<toolbar:SfToolbarItem.Icon>
61+
<FontImageSource Glyph="&#xE74F;"
62+
FontFamily="MauiMaterialAssets" />
63+
</toolbar:SfToolbarItem.Icon>
64+
</toolbar:SfToolbarItem>
65+
</toolbar:SfToolbar.Items>
66+
</toolbar:SfToolbar>
67+
{% endhighlight %}
68+
69+
{% highlight c# %}
70+
71+
using Syncfusion.Maui.Toolbar;
72+
73+
namespace ToolbarSample
74+
{
75+
public partial class MainPage : ContentPage
76+
{
77+
public MainPage()
78+
{
79+
InitializeComponent();
80+
SfToolbar toolbar = new SfToolbar();
81+
toolbar.HeightRequest = 56;
82+
toolbar.Selection = ToolbarSelectionMode.Single;
83+
ObservableCollection<BaseToolbarItem> itemCollection = new ObservableCollection<BaseToolbarItem>
84+
{
85+
new SfToolbarItem
86+
{
87+
Name = "Bold",
88+
Icon = new FontImageSource { Glyph = "\uE770", FontFamily = "MauiMaterialAssets" }
89+
},
90+
new SfToolbarItem
91+
{
92+
Name = "Underline",
93+
Icon = new FontImageSource { Glyph = "\uE762", FontFamily = "MauiMaterialAssets" }
94+
},
95+
new SfToolbarItem
96+
{
97+
Name = "Italic",
98+
Icon = new FontImageSource { Glyph = "\uE771", FontFamily = "MauiMaterialAssets" }
99+
},
100+
new SfToolbarItem
101+
{
102+
Name = "AlignLeft",
103+
Icon = new FontImageSource { Glyph = "\uE751", FontFamily = "MauiMaterialAssets" }
104+
},
105+
new SfToolbarItem
106+
{
107+
Name = "AlignRight",
108+
Icon = new FontImageSource { Glyph = "\uE753", FontFamily = "MauiMaterialAssets" }
109+
},
110+
new SfToolbarItem
111+
{
112+
Name = "AlignCenter",
113+
Icon = new FontImageSource { Glyph = "\uE752", FontFamily = "MauiMaterialAssets" }
114+
},
115+
new SfToolbarItem
116+
{
117+
Name = "AlignJustify",
118+
Icon = new FontImageSource { Glyph = "\uE74F", FontFamily = "MauiMaterialAssets" }
119+
}
120+
};
121+
toolbar.Items = itemCollection;
122+
this.Content = toolbar;
123+
}
124+
}
125+
}
126+
127+
{% endhighlight %}
128+
129+
{% endtabs %}
130+
131+
## Single Deselection
132+
133+
The Single Deselection can be performed in the Toolbar by setting the ToolbarSelectionMode property to SingleDeselect. In this selection, you can clear the selection by click the selected item.
134+
135+
{% tabs %}
136+
137+
{% highlight xaml %}
138+
<toolbar:SfToolbar x:Name="Toolbar" HeightRequest="56" SelectionMode="SingleDeselect">
139+
<toolbar:SfToolbar.Items>
140+
<toolbar:SfToolbarItem Name="Bold">
141+
<toolbar:SfToolbarItem.Icon>
142+
<FontImageSource Glyph="&#xE770;"
143+
FontFamily="MauiMaterialAssets" />
144+
</toolbar:SfToolbarItem.Icon>
145+
</toolbar:SfToolbarItem>
146+
<toolbar:SfToolbarItem Name="Underline">
147+
<toolbar:SfToolbarItem.Icon>
148+
<FontImageSource Glyph="&#xE762;"
149+
FontFamily="MauiMaterialAssets" />
150+
</toolbar:SfToolbarItem.Icon>
151+
</toolbar:SfToolbarItem>
152+
<toolbar:SfToolbarItem Name="Italic">
153+
<toolbar:SfToolbarItem.Icon>
154+
<FontImageSource Glyph="&#xE771;"
155+
FontFamily="MauiMaterialAssets" />
156+
</toolbar:SfToolbarItem.Icon>
157+
</toolbar:SfToolbarItem>
158+
<toolbar:SfToolbarItem Name="AlignLeft">
159+
<toolbar:SfToolbarItem.Icon>
160+
<FontImageSource Glyph="&#xE751;"
161+
FontFamily="MauiMaterialAssets" />
162+
</toolbar:SfToolbarItem.Icon>
163+
</toolbar:SfToolbarItem>
164+
<toolbar:SfToolbarItem Name="AlignRight">
165+
<toolbar:SfToolbarItem.Icon>
166+
<FontImageSource Glyph="&#xE753;"
167+
FontFamily="MauiMaterialAssets" />
168+
</toolbar:SfToolbarItem.Icon>
169+
</toolbar:SfToolbarItem>
170+
<toolbar:SfToolbarItem Name="AlignCenter">
171+
<toolbar:SfToolbarItem.Icon>
172+
<FontImageSource Glyph="&#xE752;"
173+
FontFamily="MauiMaterialAssets" />
174+
</toolbar:SfToolbarItem.Icon>
175+
</toolbar:SfToolbarItem>
176+
<toolbar:SfToolbarItem Name="AlignJustify">
177+
<toolbar:SfToolbarItem.Icon>
178+
<FontImageSource Glyph="&#xE74F;"
179+
FontFamily="MauiMaterialAssets" />
180+
</toolbar:SfToolbarItem.Icon>
181+
</toolbar:SfToolbarItem>
182+
</toolbar:SfToolbar.Items>
183+
</toolbar:SfToolbar>
184+
{% endhighlight %}
185+
186+
{% highlight c# %}
187+
188+
using Syncfusion.Maui.Toolbar;
189+
190+
namespace ToolbarSample
191+
{
192+
public partial class MainPage : ContentPage
193+
{
194+
public MainPage()
195+
{
196+
InitializeComponent();
197+
SfToolbar toolbar = new SfToolbar();
198+
toolbar.HeightRequest = 56;
199+
toolbar.Selection = ToolbarSelectionMode.SingleDeselect;
200+
ObservableCollection<BaseToolbarItem> itemCollection = new ObservableCollection<BaseToolbarItem>
201+
{
202+
new SfToolbarItem
203+
{
204+
Name = "Bold",
205+
Icon = new FontImageSource { Glyph = "\uE770", FontFamily = "MauiMaterialAssets" }
206+
},
207+
new SfToolbarItem
208+
{
209+
Name = "Underline",
210+
Icon = new FontImageSource { Glyph = "\uE762", FontFamily = "MauiMaterialAssets" }
211+
},
212+
new SfToolbarItem
213+
{
214+
Name = "Italic",
215+
Icon = new FontImageSource { Glyph = "\uE771", FontFamily = "MauiMaterialAssets" }
216+
},
217+
new SfToolbarItem
218+
{
219+
Name = "AlignLeft",
220+
Icon = new FontImageSource { Glyph = "\uE751", FontFamily = "MauiMaterialAssets" }
221+
},
222+
new SfToolbarItem
223+
{
224+
Name = "AlignRight",
225+
Icon = new FontImageSource { Glyph = "\uE753", FontFamily = "MauiMaterialAssets" }
226+
},
227+
new SfToolbarItem
228+
{
229+
Name = "AlignCenter",
230+
Icon = new FontImageSource { Glyph = "\uE752", FontFamily = "MauiMaterialAssets" }
231+
},
232+
new SfToolbarItem
233+
{
234+
Name = "AlignJustify",
235+
Icon = new FontImageSource { Glyph = "\uE74F", FontFamily = "MauiMaterialAssets" }
236+
}
237+
};
238+
toolbar.Items = itemCollection;
239+
this.Content = toolbar;
240+
}
241+
}
242+
}
243+
244+
{% endhighlight %}
245+
246+
{% endtabs %}
247+
248+
## Multiple Selection
249+
250+
The Multiple selection can be performed in the Toolbar by setting the ToolbarSelectionMode property to Multiple. In this selection, you can select a multiple items in the toolbar. You can remove the selected items by click the selected items.
251+
252+
{% tabs %}
253+
254+
{% highlight xaml %}
255+
<toolbar:SfToolbar x:Name="Toolbar" HeightRequest="56" SelectionMode="Multiple">
256+
<toolbar:SfToolbar.Items>
257+
<toolbar:SfToolbarItem Name="Bold">
258+
<toolbar:SfToolbarItem.Icon>
259+
<FontImageSource Glyph="&#xE770;"
260+
FontFamily="MauiMaterialAssets" />
261+
</toolbar:SfToolbarItem.Icon>
262+
</toolbar:SfToolbarItem>
263+
<toolbar:SfToolbarItem Name="Underline">
264+
<toolbar:SfToolbarItem.Icon>
265+
<FontImageSource Glyph="&#xE762;"
266+
FontFamily="MauiMaterialAssets" />
267+
</toolbar:SfToolbarItem.Icon>
268+
</toolbar:SfToolbarItem>
269+
<toolbar:SfToolbarItem Name="Italic">
270+
<toolbar:SfToolbarItem.Icon>
271+
<FontImageSource Glyph="&#xE771;"
272+
FontFamily="MauiMaterialAssets" />
273+
</toolbar:SfToolbarItem.Icon>
274+
</toolbar:SfToolbarItem>
275+
<toolbar:SfToolbarItem Name="AlignLeft">
276+
<toolbar:SfToolbarItem.Icon>
277+
<FontImageSource Glyph="&#xE751;"
278+
FontFamily="MauiMaterialAssets" />
279+
</toolbar:SfToolbarItem.Icon>
280+
</toolbar:SfToolbarItem>
281+
<toolbar:SfToolbarItem Name="AlignRight">
282+
<toolbar:SfToolbarItem.Icon>
283+
<FontImageSource Glyph="&#xE753;"
284+
FontFamily="MauiMaterialAssets" />
285+
</toolbar:SfToolbarItem.Icon>
286+
</toolbar:SfToolbarItem>
287+
<toolbar:SfToolbarItem Name="AlignCenter">
288+
<toolbar:SfToolbarItem.Icon>
289+
<FontImageSource Glyph="&#xE752;"
290+
FontFamily="MauiMaterialAssets" />
291+
</toolbar:SfToolbarItem.Icon>
292+
</toolbar:SfToolbarItem>
293+
<toolbar:SfToolbarItem Name="AlignJustify">
294+
<toolbar:SfToolbarItem.Icon>
295+
<FontImageSource Glyph="&#xE74F;"
296+
FontFamily="MauiMaterialAssets" />
297+
</toolbar:SfToolbarItem.Icon>
298+
</toolbar:SfToolbarItem>
299+
</toolbar:SfToolbar.Items>
300+
</toolbar:SfToolbar>
301+
{% endhighlight %}
302+
303+
{% highlight c# %}
304+
305+
using Syncfusion.Maui.Toolbar;
306+
307+
namespace ToolbarSample
308+
{
309+
public partial class MainPage : ContentPage
310+
{
311+
public MainPage()
312+
{
313+
InitializeComponent();
314+
SfToolbar toolbar = new SfToolbar();
315+
toolbar.HeightRequest = 56;
316+
toolbar.Selection = ToolbarSelectionMode.Multiple;
317+
ObservableCollection<BaseToolbarItem> itemCollection = new ObservableCollection<BaseToolbarItem>
318+
{
319+
new SfToolbarItem
320+
{
321+
Name = "Bold",
322+
Icon = new FontImageSource { Glyph = "\uE770", FontFamily = "MauiMaterialAssets" }
323+
},
324+
new SfToolbarItem
325+
{
326+
Name = "Underline",
327+
Icon = new FontImageSource { Glyph = "\uE762", FontFamily = "MauiMaterialAssets" }
328+
},
329+
new SfToolbarItem
330+
{
331+
Name = "Italic",
332+
Icon = new FontImageSource { Glyph = "\uE771", FontFamily = "MauiMaterialAssets" }
333+
},
334+
new SfToolbarItem
335+
{
336+
Name = "AlignLeft",
337+
Icon = new FontImageSource { Glyph = "\uE751", FontFamily = "MauiMaterialAssets" }
338+
},
339+
new SfToolbarItem
340+
{
341+
Name = "AlignRight",
342+
Icon = new FontImageSource { Glyph = "\uE753", FontFamily = "MauiMaterialAssets" }
343+
},
344+
new SfToolbarItem
345+
{
346+
Name = "AlignCenter",
347+
Icon = new FontImageSource { Glyph = "\uE752", FontFamily = "MauiMaterialAssets" }
348+
},
349+
new SfToolbarItem
350+
{
351+
Name = "AlignJustify",
352+
Icon = new FontImageSource { Glyph = "\uE74F", FontFamily = "MauiMaterialAssets" }
353+
}
354+
};
355+
toolbar.Items = itemCollection;
356+
this.Content = toolbar;
357+
}
358+
}
359+
}
360+
361+
{% endhighlight %}
362+
363+
{% endtabs %}
364+
365+
![selection-modes in .NET Maui toolbar](images/selectionmodes.gif)

0 commit comments

Comments
 (0)