diff --git a/MAUI/NavigationDrawer/Images/multi-drawer/multi-drawer.gif b/MAUI/NavigationDrawer/Images/multi-drawer/multi-drawer.gif new file mode 100644 index 0000000000..0dcb875030 Binary files /dev/null and b/MAUI/NavigationDrawer/Images/multi-drawer/multi-drawer.gif differ diff --git a/MAUI/NavigationDrawer/Multi-Drawer.md b/MAUI/NavigationDrawer/Multi-Drawer.md new file mode 100644 index 0000000000..9010fe88dd --- /dev/null +++ b/MAUI/NavigationDrawer/Multi-Drawer.md @@ -0,0 +1,139 @@ +--- +layout: post +title: Multi Drawer in .NET MAUI Navigation Drawer | Syncfusion® +description: The navigation drawer allows users to open drawers on multiple sides with different toggle methods, offering customizable layouts and smooth transitions. +platform: MAUI +control: SfNavigationDrawer +documentation: UG +--- + +# Multi Drawer in MAUI Navigation Drawer (SfNavigationDrawer) + +The Navigation drawer allows users to open the drawer on multiple sides with different toggle methods. The [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) class and its properties need to be used when users need to provide multiple drawers. The multiple drawers can be implemented using the following drawer settings. + +* DrawerSettings +* SecondaryDrawerSettings + +N> Users can open only one drawer at a time. + +![Multi Drawer](Images/multi-drawer/multi-drawer.gif) + +### DrawerSettings + +Implement the primary drawer using the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) property in SfNavigationDrawer. The following code sample demonstrates how to customize the primary drawer. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + + + SfNavigationDrawer navigationDrawer = new SfNavigationDrawer(); + DrawerSettings drawerSettings = new DrawerSettings(); + drawerSettings.DrawerWidth = 250; + drawerSettings.Transition = Transition.SlideOnTop; + drawerSettings.ContentBackground = Colors.LightGray; + drawerSettings.Position = Position.Left; + navigationDrawer.DrawerSettings = drawerSettings; + this.Content = navigationDrawer; + + +{% endhighlight %} + +{% endtabs %} + +### SecondaryDrawerSettings + +Implement the secondary drawer using the SecondaryDrawerSettings property in SfNavigationDrawer. Its properties and functionalities are same as the primary drawer. The secondary drawer can be set to different positions similar to the primary drawer. The following code demonstrates how to customize the secondary drawer. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + + SfNavigationDrawer navigationDrawer = new SfNavigationDrawer(); + DrawerSettings secondaryDrawer = new DrawerSettings(); + secondaryDrawer.Position = Position.Right; + secondaryDrawer.Transition = Transition.SlideOnTop; + secondaryDrawer.ContentBackground = Colors.Blue; + secondaryDrawer.DrawerWidth = 250; + navigationDrawer.SecondaryDrawerSettings = secondaryDrawer; + this.Content = navigationDrawer; + +{% endhighlight %} + +{% endtabs %} + +N> When the primary drawer and the secondary drawer are set to the same position, the primary drawer will open on swiping. + +## Toggling method + +Users can toggle the secondary drawer using the `ToggleSecondaryDrawer` method. + +{% highlight c# %} + +SfNavigationDrawer navigationDrawer = new SfNavigationDrawer(); +navigationDrawer.ToggleSecondaryDrawer(); + +{% endhighlight %} + +### Opening the drawer programmatically + +The `IsOpen` property in the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) of `SecondaryDrawerSettings` used to open or close the secondary drawer programmatically. + +The following code sample demonstrates how to set `IsOpen` property in XAML and C#. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + + SfNavigationDrawer navigationDrawer = new SfNavigationDrawer(); + DrawerSettings secondaryDrawer = new DrawerSettings(); + secondaryDrawer.IsOpen = true; + navigationDrawer.SecondaryDrawerSettings = secondaryDrawer; + this.Content = navigationDrawer; + +{% endhighlight %} + +{% endtabs %} + + + diff --git a/MAUI/TabView/Tab-Bar-Customization.md b/MAUI/TabView/Tab-Bar-Customization.md index f1161015fa..37418600bb 100644 --- a/MAUI/TabView/Tab-Bar-Customization.md +++ b/MAUI/TabView/Tab-Bar-Customization.md @@ -197,3 +197,34 @@ tabView.TabBarBackground = graBrush; ![Gradient color](images/TabBarGradientColor.png) N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabBarCustomization) in GitHub. + +## Tab bar border customization + +You can customize the border of the tab header area in .NET MAUI Tab View using the following properties: + +- TabBarBorderColor: Sets the border color. +- TabBarBorderThickness: Sets the border thickness. +- TabBarCornerRadius: Sets the corner radius of the tab bar's border. + +{% tabs %} + +{% highlight xaml %} + + +{% endhighlight %} + +{% highlight C# %} + tabView.TabBarPlacement = TabBarPlacement.Bottom; + tabView.TabBarBorderColor = Color.FromArgb("#7C3AED"); + tabView.TabBarBorderThickness = 2; + tabView.TabBarCornerRadius = new CornerRadius(24); +{% endhighlight %} + +{% endtabs %} + +![Tab bar border](images/Tab-bar-border.png) \ No newline at end of file diff --git a/MAUI/TabView/images/Tab-bar-border.png b/MAUI/TabView/images/Tab-bar-border.png new file mode 100644 index 0000000000..41afd7cba3 Binary files /dev/null and b/MAUI/TabView/images/Tab-bar-border.png differ diff --git a/maui-toc.html b/maui-toc.html index 5db759b1c9..3d01eaa405 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -918,6 +918,7 @@
  • Migrate from Xamarin.Forms
  • Setting Main Content
  • Animation Duration
  • +
  • Multi Drawer
  • Configuring the Drawer in Different Sides
  • Setting Sliding Panel Content
  • Setting Sliding Panel size