diff --git a/MAUI/Toolbar/customization.md b/MAUI/Toolbar/customization.md index 4d84d42826..570d231bfc 100644 --- a/MAUI/Toolbar/customization.md +++ b/MAUI/Toolbar/customization.md @@ -1124,4 +1124,248 @@ public partial class MainPage : ContentPage {% endtabs %} -![divider-line-customization](images/divider-customization.png) \ No newline at end of file +![divider-line-customization](images/divider-customization.png) + +## Corner Radius Customization + +The toolbar control supports customizing its corners using the [CornerRadius]() property, allowing rounded or sharp edges to match your design preferences. + +The following code sample demonstrates how to set the corner radius of the toolbar. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + var grid = new Grid(); + + var toolbar = new SfToolbar + { + HeightRequest = 56, + WidthRequest = 330, + CornerRadius = 30 + }; + + toolbar.Items = new ObservableCollection + { + new SfToolbarItem + { + Name = "Bold", + Text = "Bold", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Bold", + Size = new Size(90, 40), + Icon = new FontImageSource + { + Glyph = "\uE770", + FontFamily = "MauiMaterialAssets" + } + }, + new SfToolbarItem + { + Name = "Underline", + Text = "Underline", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Underline", + Size = new Size(90, 40), + Icon = new FontImageSource + { + Glyph = "\uE762", + FontFamily = "MauiMaterialAssets" + } + }, + new SfToolbarItem + { + Name = "Italic", + Text = "Italic", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Italic", + Size = new Size(90, 40), + Icon = new FontImageSource + { + Glyph = "\uE771", + FontFamily = "MauiMaterialAssets" + } + } + }; + + grid.Children.Add(toolbar); + Content = grid; + } +} + +{% endhighlight %} + +{% endtabs %} + +![corner-radius](images/corner-radius.png) + +## Selection Corner Radius Customization + +The toolbar control supports customizing corners of the selection using the [SelectionCornerRadius]() property, allowing the corners of the selected item to be rounded or sharp based on your preference. + +The following code sample demonstrates how to set the selection corner radius for toolbar items. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + var grid = new Grid(); + + var toolbar = new SfToolbar + { + HeightRequest = 56, + WidthRequest = 330, + SelectionCornerRadius = 20 + }; + + toolbar.Items = new ObservableCollection + { + new SfToolbarItem + { + Name = "Bold", + Text = "Bold", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Bold", + Size = new Size(90, 40), + Icon = new FontImageSource + { + Glyph = "\uE770", + FontFamily = "MauiMaterialAssets" + } + }, + new SfToolbarItem + { + Name = "Underline", + Text = "Underline", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Underline", + Size = new Size(90, 40), + Icon = new FontImageSource + { + Glyph = "\uE762", + FontFamily = "MauiMaterialAssets" + } + }, + new SfToolbarItem + { + Name = "Italic", + Text = "Italic", + TextPosition = ToolbarItemTextPosition.Right, + ToolTipText = "Italic", + Size = new Size(90, 40), + Icon = new FontImageSource + { + Glyph = "\uE771", + FontFamily = "MauiMaterialAssets" + } + } + }; + + grid.Children.Add(toolbar); + Content = grid; + } +} + +{% endhighlight %} + +{% endtabs %} + +![selection-corner-radius](images/selection-corner-radius.png) diff --git a/MAUI/Toolbar/images/corner-radius.png b/MAUI/Toolbar/images/corner-radius.png new file mode 100644 index 0000000000..9705879a3b Binary files /dev/null and b/MAUI/Toolbar/images/corner-radius.png differ diff --git a/MAUI/Toolbar/images/selection-corner-radius.png b/MAUI/Toolbar/images/selection-corner-radius.png new file mode 100644 index 0000000000..c6f365fda4 Binary files /dev/null and b/MAUI/Toolbar/images/selection-corner-radius.png differ diff --git a/MAUI/Toolbar/tooltip.md b/MAUI/Toolbar/tooltip.md index 85c90dd056..21303789b9 100644 --- a/MAUI/Toolbar/tooltip.md +++ b/MAUI/Toolbar/tooltip.md @@ -7,9 +7,9 @@ control: Toolbar (SfToolbar) documentation: ug --- -# Enable the Tooltip +# Enable Tooltip for Toolbar items -The tooltip is enabled in the view when the [TooltipText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbarItem.html#Syncfusion_Maui_Toolbar_SfToolbarItem_ToolTipText) or [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbarItem.html#Syncfusion_Maui_Toolbar_SfToolbarItem_Text) property is set for the ToolbarItems. By default, the tooltip is supported only in the default view. +The tooltip is enabled in the view when the [TooltipText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbarItem.html#Syncfusion_Maui_Toolbar_SfToolbarItem_ToolTipText) or [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbarItem.html#Syncfusion_Maui_Toolbar_SfToolbarItem_Text) property is set for the ToolbarItems. ## Tooltip Text