diff --git a/MAUI/Toolbar/images/multirow.png b/MAUI/Toolbar/images/multirow.png new file mode 100644 index 0000000000..8136ba6d0c Binary files /dev/null and b/MAUI/Toolbar/images/multirow.png differ diff --git a/MAUI/Toolbar/overflow-mode.md b/MAUI/Toolbar/overflow-mode.md index 47b221b3e2..c113265590 100644 --- a/MAUI/Toolbar/overflow-mode.md +++ b/MAUI/Toolbar/overflow-mode.md @@ -629,3 +629,562 @@ private void OnMoreButtonTapped(object? sender, ToolbarMoreButtonTappedEventArgs {% endhighlight %} {% endtabs %} + +## MultiRow + +The Toolbar now supports showing items on multiple rows by setting the [OverflowMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_OverflowMode) property to [MultiRow]().When enabled, items wrap to additional rows based on available width, making it easier to manage many items. + +{% tabs %} + +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="4" %} + + + + + + + Calibri + Arial + Times New Roman + Georgia + Verdana + + + + + + + + + 11 + 12 + 13 + 14 + 15 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} + +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="7" %} + +public MainPage() +{ + InitializeComponent(); + SfToolbar toolbar = new SfToolbar + { + ItemSpacing = 10, + WidthRequest = 650, + HeightRequest = 200, + OverflowMode = ToolbarItemOverflowMode.MultiRow + }; + + // Picker: Fonts + var fontPicker = new Picker + { + Margin = new Thickness(0, 50, 0, 0), + WidthRequest = 180 + }; + fontPicker.Items.Add("Calibri"); + fontPicker.Items.Add("Arial"); + fontPicker.Items.Add("Times New Roman"); + fontPicker.Items.Add("Georgia"); + fontPicker.Items.Add("Verdana"); + + toolbar.Items.Add(new SfToolbarItem + { + View = fontPicker + }); + + // Picker: Font sizes + var sizePicker = new Picker + { + WidthRequest = 65 + }; + sizePicker.Items.Add("11"); + sizePicker.Items.Add("12"); + sizePicker.Items.Add("13"); + sizePicker.Items.Add("14"); + sizePicker.Items.Add("15"); + + toolbar.Items.Add(new SfToolbarItem + { + View = sizePicker + }); + + // Separators + toolbar.Items.Add(new SeparatorToolbarItem()); + + // Align Left + toolbar.Items.Add(new SfToolbarItem + { + Name = "AlignLeft", + Text = "Left", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Align-Left", + Size = new Size(60, 40), + Icon = new FontImageSource + { + Glyph = "\uE751", + FontFamily = "MauiMaterialAssets" + } + }); + + // Align Right + toolbar.Items.Add(new SfToolbarItem + { + Name = "AlignRight", + Text = "Right", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Align-Right", + Size = new Size(70, 40), + Icon = new FontImageSource + { + Glyph = "\uE753", + FontFamily = "MauiMaterialAssets" + } + }); + + // Align Center + toolbar.Items.Add(new SfToolbarItem + { + Name = "AlignCenter", + Text = "Center", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Align-Center", + Size = new Size(70, 40), + Icon = new FontImageSource + { + Glyph = "\uE752", + FontFamily = "MauiMaterialAssets" + } + }); + + // Align Justify + toolbar.Items.Add(new SfToolbarItem + { + Name = "AlignJustify", + Text = "Justify", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Align-Justify", + Size = new Size(70, 40), + Icon = new FontImageSource + { + Glyph = "\uE74F", + FontFamily = "MauiMaterialAssets" + } + }); + + // Bold + toolbar.Items.Add(new SfToolbarItem + { + Name = "Bold", + Text = "Bold", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Bold", + Size = new Size(60, 40), + Icon = new FontImageSource + { + Glyph = "\uE770", + FontFamily = "MauiMaterialAssets" + } + }); + + // Underline + toolbar.Items.Add(new SfToolbarItem + { + Name = "Underline", + Text = "Underline", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Underline", + Size = new Size(90, 40), + Icon = new FontImageSource + { + Glyph = "\uE762", + FontFamily = "MauiMaterialAssets" + } + }); + + // Italic + toolbar.Items.Add(new SfToolbarItem + { + Name = "Italic", + Text = "Italic", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Italic", + Size = new Size(60, 40), + Icon = new FontImageSource + { + Glyph = "\uE771", + FontFamily = "MauiMaterialAssets" + } + }); + + // Strikethrough + toolbar.Items.Add(new SfToolbarItem + { + Name = "Strikethrough", + Text = "Strikethrough", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Strikethrough", + Size = new Size(110, 40), + Icon = new FontImageSource + { + Glyph = "\uE763", + FontFamily = "MauiMaterialAssets" + } + }); + + // Subscript + toolbar.Items.Add(new SfToolbarItem + { + Name = "Subscript", + Text = "Subscript", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Subscript", + Size = new Size(80, 40), + Icon = new FontImageSource + { + Glyph = "\uE7A8", + FontFamily = "MauiMaterialAssets" + } + }); + + // Superscript + toolbar.Items.Add(new SfToolbarItem + { + Name = "Superscript", + Text = "Superscript", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Superscript", + Size = new Size(80, 40), + Icon = new FontImageSource + { + Glyph = "\uE7A9", + FontFamily = "MauiMaterialAssets" + } + }); + + // Insert Left + toolbar.Items.Add(new SfToolbarItem + { + Name = "InsertLeft", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Insert-Left", + IconSize = 25, + Size = new Size(40, 40), + Icon = new FontImageSource + { + Glyph = "\uE7C0", + FontFamily = "MauiMaterialAssets" + } + }); + + // Insert Right + toolbar.Items.Add(new SfToolbarItem + { + Name = "InsertRight", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Insert-Right", + IconSize = 25, + Size = new Size(40, 40), + Icon = new FontImageSource + { + Glyph = "\uE7C1", + FontFamily = "MauiMaterialAssets" + } + }); + + // Insert Up + toolbar.Items.Add(new SfToolbarItem + { + Name = "InsertUp", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Insert-Up", + IconSize = 25, + Size = new Size(40, 40), + Icon = new FontImageSource + { + Glyph = "\uE7C2", + FontFamily = "MauiMaterialAssets" + } + }); + + // Insert Down + toolbar.Items.Add(new SfToolbarItem + { + Name = "InsertDown", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Insert-Down", + IconSize = 25, + Size = new Size(40, 40), + Icon = new FontImageSource + { + Glyph = "\uE7C3", + FontFamily = "MauiMaterialAssets" + } + }); + + // Separators group + toolbar.Items.Add(new SeparatorToolbarItem { Stroke = Colors.Transparent }); + toolbar.Items.Add(new SeparatorToolbarItem()); + toolbar.Items.Add(new SeparatorToolbarItem { Stroke = Colors.Transparent }); + + // Header 1 + toolbar.Items.Add(new SfToolbarItem + { + Name = "Header1", + Text = "Header1", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Header1", + Size = new Size(80, 40), + Icon = new FontImageSource + { + Glyph = "\uE7C8", + FontFamily = "MauiMaterialAssets" + } + }); + + // Header 2 + toolbar.Items.Add(new SfToolbarItem + { + Name = "Header2", + Text = "Header2", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Header2", + Size = new Size(80, 40), + Icon = new FontImageSource + { + Glyph = "\uE7C9", + FontFamily = "MauiMaterialAssets" + } + }); + + // Header 3 + toolbar.Items.Add(new SfToolbarItem + { + Name = "Header3", + Text = "Header3", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Header3", + Size = new Size(80, 40), + Icon = new FontImageSource + { + Glyph = "\uE7CA", + FontFamily = "MauiMaterialAssets" + } + }); + + // Header 4 + toolbar.Items.Add(new SfToolbarItem + { + Name = "Header4", + Text = "Header4", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Header4", + Size = new Size(80, 40), + Icon = new FontImageSource + { + Glyph = "\uE7CB", + FontFamily = "MauiMaterialAssets" + } + }); + + this.Content = toolbar; +} + +{% endhighlight %} + +{% endtabs %} + +![multi-row-support](images/multirow.png) \ No newline at end of file