Skip to content

Commit adb4144

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #3838 from syncfusion-content/ContextUG
 UG 985939: Added the UG content for secondary drawer and tab bar border - Development
2 parents c96aaf3 + a22c450 commit adb4144

File tree

5 files changed

+171
-0
lines changed

5 files changed

+171
-0
lines changed

‎MAUI/NavigationDrawer/Images/multi-drawer/multi-drawer.gif‎

402 KB
Loading

‎MAUI/NavigationDrawer/Multi-Drawer.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
layout: post
3+
title: Multi Drawer in .NET MAUI Navigation Drawer | Syncfusion®
4+
description: The navigation drawer allows users to open drawers on multiple sides with different toggle methods, offering customizable layouts and smooth transitions.
5+
platform: MAUI
6+
control: SfNavigationDrawer
7+
documentation: UG
8+
---
9+
10+
# Multi Drawer in MAUI Navigation Drawer (SfNavigationDrawer)
11+
12+
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.
13+
14+
* DrawerSettings
15+
* SecondaryDrawerSettings
16+
17+
N> Users can open only one drawer at a time.
18+
19+
![Multi Drawer](Images/multi-drawer/multi-drawer.gif)
20+
21+
### DrawerSettings
22+
23+
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.
24+
25+
{% tabs %}
26+
27+
{% highlight xaml %}
28+
29+
<navigationDrawer:SfNavigationDrawer>
30+
<navigationDrawer:SfNavigationDrawer.DrawerSettings>
31+
<navigationDrawer:DrawerSettings DrawerWidth="250"
32+
Transition="SlideOnTop"
33+
ContentBackground="LightGray"
34+
Position="Left">
35+
</navigationDrawer:DrawerSettings>
36+
</navigationDrawer:SfNavigationDrawer.DrawerSettings>
37+
</navigationDrawer:SfNavigationDrawer>
38+
39+
{% endhighlight %}
40+
41+
{% highlight c# %}
42+
43+
44+
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
45+
DrawerSettings drawerSettings = new DrawerSettings();
46+
drawerSettings.DrawerWidth = 250;
47+
drawerSettings.Transition = Transition.SlideOnTop;
48+
drawerSettings.ContentBackground = Colors.LightGray;
49+
drawerSettings.Position = Position.Left;
50+
navigationDrawer.DrawerSettings = drawerSettings;
51+
this.Content = navigationDrawer;
52+
53+
54+
{% endhighlight %}
55+
56+
{% endtabs %}
57+
58+
### SecondaryDrawerSettings
59+
60+
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.
61+
62+
{% tabs %}
63+
64+
{% highlight xaml %}
65+
66+
<navigationDrawer:SfNavigationDrawer>
67+
<navigationDrawer:SfNavigationDrawer.SecondaryDrawerSettings>
68+
<navigationDrawer:DrawerSettings x:Name="secondaryDrawer"
69+
ContentBackground="Blue"
70+
DrawerWidth= "250"
71+
Position="Right"
72+
Transition="SlideOnTop">
73+
</navigationDrawer:DrawerSettings>
74+
</navigationDrawer:SfNavigationDrawer.SecondaryDrawerSettings>
75+
</navigationDrawer:SfNavigationDrawer>
76+
77+
{% endhighlight %}
78+
79+
{% highlight c# %}
80+
81+
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
82+
DrawerSettings secondaryDrawer = new DrawerSettings();
83+
secondaryDrawer.Position = Position.Right;
84+
secondaryDrawer.Transition = Transition.SlideOnTop;
85+
secondaryDrawer.ContentBackground = Colors.Blue;
86+
secondaryDrawer.DrawerWidth = 250;
87+
navigationDrawer.SecondaryDrawerSettings = secondaryDrawer;
88+
this.Content = navigationDrawer;
89+
90+
{% endhighlight %}
91+
92+
{% endtabs %}
93+
94+
N> When the primary drawer and the secondary drawer are set to the same position, the primary drawer will open on swiping.
95+
96+
## Toggling method
97+
98+
Users can toggle the secondary drawer using the `ToggleSecondaryDrawer` method.
99+
100+
{% highlight c# %}
101+
102+
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
103+
navigationDrawer.ToggleSecondaryDrawer();
104+
105+
{% endhighlight %}
106+
107+
### Opening the drawer programmatically
108+
109+
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.
110+
111+
The following code sample demonstrates how to set `IsOpen` property in XAML and C#.
112+
113+
{% tabs %}
114+
115+
{% highlight xaml %}
116+
117+
<navigationDrawer:SfNavigationDrawer>
118+
<navigationDrawer:SfNavigationDrawer.SecondaryDrawerSettings>
119+
<navigationDrawer:DrawerSettings IsOpen="True">
120+
</navigationDrawer:DrawerSettings>
121+
</navigationDrawer:SfNavigationDrawer.SecondaryDrawerSettings>
122+
</navigationDrawer:SfNavigationDrawer>
123+
124+
{% endhighlight %}
125+
126+
{% highlight c# %}
127+
128+
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
129+
DrawerSettings secondaryDrawer = new DrawerSettings();
130+
secondaryDrawer.IsOpen = true;
131+
navigationDrawer.SecondaryDrawerSettings = secondaryDrawer;
132+
this.Content = navigationDrawer;
133+
134+
{% endhighlight %}
135+
136+
{% endtabs %}
137+
138+
139+

‎MAUI/TabView/Tab-Bar-Customization.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,3 +197,34 @@ tabView.TabBarBackground = graBrush;
197197
![Gradient color](images/TabBarGradientColor.png)
198198

199199
N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabBarCustomization) in GitHub.
200+
201+
## Tab bar border customization
202+
203+
You can customize the border of the tab header area in .NET MAUI Tab View using the following properties:
204+
205+
- TabBarBorderColor: Sets the border color.
206+
- TabBarBorderThickness: Sets the border thickness.
207+
- TabBarCornerRadius: Sets the corner radius of the tab bar's border.
208+
209+
{% tabs %}
210+
211+
{% highlight xaml %}
212+
<tabView:SfTabView
213+
x:Name="tabView"
214+
TabBarPlacement="Bottom"
215+
TabBarBorderColor="#7C3AED"
216+
TabBarBorderThickness="2"
217+
TabBarCornerRadius="24">
218+
</tabView:SfTabView>
219+
{% endhighlight %}
220+
221+
{% highlight C# %}
222+
tabView.TabBarPlacement = TabBarPlacement.Bottom;
223+
tabView.TabBarBorderColor = Color.FromArgb("#7C3AED");
224+
tabView.TabBarBorderThickness = 2;
225+
tabView.TabBarCornerRadius = new CornerRadius(24);
226+
{% endhighlight %}
227+
228+
{% endtabs %}
229+
230+
![Tab bar border](images/Tab-bar-border.png)

‎MAUI/TabView/images/Tab-bar-border.png‎

33.4 KB
Loading

‎maui-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -937,6 +937,7 @@
937937
<li><a href="/maui/NavigationDrawer/Migration">Migrate from Xamarin.Forms</a></li>
938938
<li><a href="/maui/NavigationDrawer/Main-Content">Setting Main Content</a></li>
939939
<li><a href="/maui/NavigationDrawer/Duration">Animation Duration</a></li>
940+
<li><a href="/maui/NavigationDrawer/Multi-Drawer">Multi Drawer</a></li>
940941
<li><a href="/maui/NavigationDrawer/Navigation-Pane-Sides">Configuring the Drawer in Different Sides</a></li>
941942
<li><a href="/maui/NavigationDrawer/Side-Pane-Content">Setting Sliding Panel Content</a></li>
942943
<li><a href="/maui/NavigationDrawer/Side-Pane-Sizing">Setting Sliding Panel size</a></li>

0 commit comments

Comments
 (0)