From 9d1ca5bf4042ae4c912c609c3fd818896be921df Mon Sep 17 00:00:00 2001 From: KarthikaRSF4617 Date: Wed, 27 May 2026 16:39:17 +0530 Subject: [PATCH 1/4] Added the missed API's for toolkit controls --- .../NavigationDrawer/Side-Pane-Content.md | 41 ++++++++++++++++++- maui-toolkit/TabView/Tab-Bar-Customization.md | 17 ++++++++ 2 files changed, 57 insertions(+), 1 deletion(-) diff --git a/maui-toolkit/NavigationDrawer/Side-Pane-Content.md b/maui-toolkit/NavigationDrawer/Side-Pane-Content.md index 25a1ddd4..7738e881 100644 --- a/maui-toolkit/NavigationDrawer/Side-Pane-Content.md +++ b/maui-toolkit/NavigationDrawer/Side-Pane-Content.md @@ -297,4 +297,43 @@ this.Content = navigationDrawer; {% endtabs %} -![Content](Images/panel-content/navigation_drawer_content.png) \ No newline at end of file +![Content](Images/panel-content/navigation_drawer_content.png) + +## Drawer contentBackground + +You can customize the background color of the drawer’s content area by setting the [ContentBackground](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_Toolkit_NavigationDrawer_DrawerSettings_ContentBackground) property in `DrawerSettings`. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +SfNavigationDrawer navigationDrawer = new SfNavigationDrawer(); +DrawerSettings drawerSettings = new DrawerSettings() +{ + ContentBackground = Colors.Red +}; +navigationDrawer.DrawerSettings = drawerSettings; +this.Content = navigationDrawer; + +{% endhighlight %} + +{% endtabs %} \ No newline at end of file diff --git a/maui-toolkit/TabView/Tab-Bar-Customization.md b/maui-toolkit/TabView/Tab-Bar-Customization.md index 6db24aa4..4a31271b 100644 --- a/maui-toolkit/TabView/Tab-Bar-Customization.md +++ b/maui-toolkit/TabView/Tab-Bar-Customization.md @@ -145,6 +145,23 @@ SfTabView tabView = new SfTabView(); {% endtabs %} +## Header Item Spacing + +The [HeaderItemSpacing](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabView.html#Syncfusion_Maui_Toolkit_TabView_SfTabView_HeaderItemSpacing) property is used to control the spacing between adjacent tab header items in the SfTabView. This property helps improve readability and visual alignment by adjusting the gap between each tab header. + +{% tabs %} + +{% highlight xaml %} + +{% endhighlight %} + +{% highlight C# %} +SfTabView tabView = new SfTabView(); +tabView.HeaderItemSpacing= 20 ; +{% endhighlight %} + +{% endtabs %} + ## Tab bar placement options The .NET MAUI Tab View provides two options for determining how the tab bar aligns relative to the tab content. The options are top and bottom. This can be done using the [TabBarPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabView.html#Syncfusion_Maui_Toolkit_TabView_SfTabView_TabBarPlacement) property. From 4531136386d5c339a8d3169dad320da5889cee08 Mon Sep 17 00:00:00 2001 From: KarthikaRSF4617 Date: Wed, 27 May 2026 16:46:33 +0530 Subject: [PATCH 2/4] added the changes --- maui-toolkit/NavigationDrawer/Side-Pane-Content.md | 2 +- maui-toolkit/TabView/Tab-Bar-Customization.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/maui-toolkit/NavigationDrawer/Side-Pane-Content.md b/maui-toolkit/NavigationDrawer/Side-Pane-Content.md index 7738e881..e0ff92a3 100644 --- a/maui-toolkit/NavigationDrawer/Side-Pane-Content.md +++ b/maui-toolkit/NavigationDrawer/Side-Pane-Content.md @@ -299,7 +299,7 @@ this.Content = navigationDrawer; ![Content](Images/panel-content/navigation_drawer_content.png) -## Drawer contentBackground +## Drawer content background You can customize the background color of the drawer’s content area by setting the [ContentBackground](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_Toolkit_NavigationDrawer_DrawerSettings_ContentBackground) property in `DrawerSettings`. diff --git a/maui-toolkit/TabView/Tab-Bar-Customization.md b/maui-toolkit/TabView/Tab-Bar-Customization.md index 4a31271b..6f97c3b8 100644 --- a/maui-toolkit/TabView/Tab-Bar-Customization.md +++ b/maui-toolkit/TabView/Tab-Bar-Customization.md @@ -145,7 +145,7 @@ SfTabView tabView = new SfTabView(); {% endtabs %} -## Header Item Spacing +## Header item spacing The [HeaderItemSpacing](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabView.html#Syncfusion_Maui_Toolkit_TabView_SfTabView_HeaderItemSpacing) property is used to control the spacing between adjacent tab header items in the SfTabView. This property helps improve readability and visual alignment by adjusting the gap between each tab header. From fb0a84b36262ea0258b22dfdf164f6b10841c3dd Mon Sep 17 00:00:00 2001 From: KarthikaRSF4617 Date: Wed, 27 May 2026 17:11:25 +0530 Subject: [PATCH 3/4] added ug content for otpinput and bottomsheet --- .../Bottom-Sheet/BottomSheet-Customization.md | 27 +++++++++++++++++++ .../Otp-Input/OtpInput-Customization.md | 20 ++++++++++++++ 2 files changed, 47 insertions(+) diff --git a/maui-toolkit/Bottom-Sheet/BottomSheet-Customization.md b/maui-toolkit/Bottom-Sheet/BottomSheet-Customization.md index 445ca534..c7dcf44e 100644 --- a/maui-toolkit/Bottom-Sheet/BottomSheet-Customization.md +++ b/maui-toolkit/Bottom-Sheet/BottomSheet-Customization.md @@ -415,3 +415,30 @@ SfBottomSheet bottomSheet = new SfBottomSheet {% endhighlight %} {% endtabs %} + +## Animation duration + +The [AnimationDuration](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.BottomSheet.SfBottomSheet.html#Syncfusion_Maui_Toolkit_BottomSheet_SfBottomSheet_AnimationDuration) property in `SfBottomSheet` is used to control the duration of the animation when opening and closing the bottom sheet. It allows you to customize how fast or slow the transition occurs. + +{% tabs %} +{% highlight xaml %} + + + + + + + + +{% endhighlight %} +{% highlight c# %} + +SfBottomSheet bottomSheet = new SfBottomSheet +{ + AnimationDuration = 500, +}; + +{% endhighlight %} +{% endtabs %} diff --git a/maui-toolkit/Otp-Input/OtpInput-Customization.md b/maui-toolkit/Otp-Input/OtpInput-Customization.md index 567d12d2..8f1d8a25 100644 --- a/maui-toolkit/Otp-Input/OtpInput-Customization.md +++ b/maui-toolkit/Otp-Input/OtpInput-Customization.md @@ -302,3 +302,23 @@ SfOtpInput otpInput = new SfOtpInput() {% endtabs %} ![Error state](images/error.png) + +## Auto focus + +The [AutoFocus](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.OtpInput.SfOtpInput.html#Syncfusion_Maui_Toolkit_OtpInput_SfOtpInput_AutoFocus) property in SfOtpInput is used to automatically set focus to the first input field when the control is loaded. This improves usability by allowing users to start entering the OTP immediately without manually selecting a field. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + AutoFocus = true +}; + +{% endhighlight %} +{% endtabs %} \ No newline at end of file From a9a87c8886be22b9fdb69fc6bb720b685413d264 Mon Sep 17 00:00:00 2001 From: KarthikaRSF4617 Date: Wed, 27 May 2026 17:34:05 +0530 Subject: [PATCH 4/4] Added the changes to resolve the CI error --- maui-toolkit/TabView/Tab-Bar-Customization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/maui-toolkit/TabView/Tab-Bar-Customization.md b/maui-toolkit/TabView/Tab-Bar-Customization.md index 6f97c3b8..0914e34e 100644 --- a/maui-toolkit/TabView/Tab-Bar-Customization.md +++ b/maui-toolkit/TabView/Tab-Bar-Customization.md @@ -1,7 +1,7 @@ --- layout: post title: Customize the Tab Bar in .NET MAUI Tab View (SfTabView) | Syncfusion® -description: Learn how to customize the header in Syncfusion® .NET MAUI Tab View (SfTabView) control. +description: Learn how to customize tab bar layout, header appearance, spacing, alignment, and background in Syncfusion® .NET MAUI Tab View (SfTabView) control. platform: maui-toolkit control: SfTabView documentation: UG