Skip to content

Commit 619ffe3

Browse files
karthikasf4617karthikasf4617
committed
Resolved the feedback shared on the UG content
1 parent d82b246 commit 619ffe3

File tree

2 files changed

+18
-286
lines changed

2 files changed

+18
-286
lines changed

‎MAUI/NavigationDrawer/Multi-Drawer.md‎

Lines changed: 13 additions & 281 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ The navigation drawer allows users to open the drawer on multiple sides with dif
1414
* DrawerSettings
1515
* SecondaryDrawerSettings
1616

17+
N> Users can open only one drawer at a time.
18+
1719
![Multi Drawer](Images/multi-drawer/multi-drawer.gif)
1820

1921
### DrawerSettings
@@ -53,157 +55,6 @@ Implement the primary drawer using the drawer settings class. The following code
5355

5456
{% endtabs %}
5557

56-
### Drawer header view
57-
58-
The header content can be provided to the primary drawer using the [DrawerHeaderView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeaderView) property inside the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) class. The following code demonstrates how to set the header content to the primary drawer.
59-
60-
{% tabs %}
61-
62-
{% highlight xaml %}
63-
64-
<navigationdrawer:SfNavigationDrawer>
65-
<navigationdrawer:SfNavigationDrawer.DrawerSettings>
66-
<navigationdrawer:DrawerSettings Position="Left"
67-
DrawerHeaderHeight="150">
68-
<navigationdrawer:DrawerSettings.DrawerHeaderView>
69-
<Grid BackgroundColor="#007DE6">
70-
<Label Text="Header"
71-
TextColor="White"
72-
FontSize="20"
73-
HorizontalOptions="Center"
74-
VerticalOptions="Center" />
75-
</Grid>
76-
</navigationdrawer:DrawerSettings.DrawerHeaderView>
77-
</navigationdrawer:DrawerSettings>
78-
</navigationdrawer:SfNavigationDrawer.DrawerSettings>
79-
</navigationdrawer:SfNavigationDrawer>
80-
81-
{% endhighlight %}
82-
83-
{% highlight c# %}
84-
85-
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
86-
DrawerSettings drawerSettings = new DrawerSettings();
87-
drawerSettings.DrawerHeaderHeight = 150;
88-
drawerSettings.Position = Syncfusion.Maui.NavigationDrawer.Position.Left;
89-
Grid headerContent = new Grid();
90-
headerContent.BackgroundColor = Colors.Beige;
91-
Label header = new Label();
92-
header.Text = "Header";
93-
header.TextColor = Colors.White;
94-
header.FontSize = 20;
95-
header.HorizontalOptions = LayoutOptions.Center;
96-
header.VerticalOptions = LayoutOptions.Center;
97-
headerContent.Children.Add(header);
98-
drawerSettings.DrawerHeaderView = headerContent;
99-
navigationDrawer.DrawerSettings = drawerSettings;
100-
this.Content = navigationDrawer;
101-
102-
{% endhighlight %}
103-
104-
{% endtabs %}
105-
106-
### Drawer content view
107-
108-
The drawer content can be provided to the primary drawer using the [DrawerContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerContentView) property inside the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) class. The following code demonstrates how to set the drawer content to the primary drawer.
109-
110-
{% tabs %}
111-
112-
{% highlight xaml %}
113-
114-
<navigationdrawer:SfNavigationDrawer>
115-
<navigationdrawer:SfNavigationDrawer.DrawerSettings>
116-
<navigationdrawer:DrawerSettings Position="Left"
117-
DrawerWidth="250">
118-
<navigationdrawer:DrawerSettings.DrawerContentView>
119-
<Grid BackgroundColor="#D4F1F4">
120-
<Label Text="Drawer Content"
121-
TextColor="Black"
122-
FontSize="18"
123-
HorizontalOptions="Center"
124-
VerticalOptions="Center" />
125-
</Grid>
126-
</navigationdrawer:DrawerSettings.DrawerContentView>
127-
</navigationdrawer:DrawerSettings>
128-
</navigationdrawer:SfNavigationDrawer.DrawerSettings>
129-
</navigationdrawer:SfNavigationDrawer>
130-
131-
{% endhighlight %}
132-
133-
{% highlight c# %}
134-
135-
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
136-
DrawerSettings drawerSettings = new DrawerSettings();
137-
drawerSettings.Position = Syncfusion.Maui.NavigationDrawer.Position.Left;
138-
drawerSettings.DrawerWidth = 250;
139-
Grid drawerContent = new Grid();
140-
drawerContent.BackgroundColor = Colors.Blue;
141-
Label content = new Label();
142-
content.Text = "Drawer Content";
143-
content.TextColor = Colors.Black;
144-
content.FontSize = 18;
145-
content.HorizontalOptions = LayoutOptions.Center;
146-
content.VerticalOptions = LayoutOptions.Center;
147-
drawerContent.Children.Add(content);
148-
drawerSettings.DrawerContentView = drawerContent;
149-
navigationDrawer.DrawerSettings = drawerSettings;
150-
this.Content = navigationDrawer;
151-
152-
{% endhighlight %}
153-
154-
{% endtabs %}
155-
156-
### Drawer footer view
157-
158-
The footer content can be provided to the primary drawer using the [DrawerFooterView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerFooterView) property inside the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) class. The following code demonstrates how to set the footer content to the primary drawer.
159-
160-
{% tabs %}
161-
162-
{% highlight xaml %}
163-
164-
<navigationdrawer:SfNavigationDrawer>
165-
<navigationdrawer:SfNavigationDrawer.DrawerSettings>
166-
<navigationdrawer:DrawerSettings Position="Left"
167-
DrawerFooterHeight="150">
168-
<navigationdrawer:DrawerSettings.DrawerFooterView>
169-
<Grid BackgroundColor="#007DE6">
170-
<Label Text="Footer"
171-
TextColor="White"
172-
FontSize="20"
173-
HorizontalOptions="Center"
174-
VerticalOptions="Center" />
175-
</Grid>
176-
</navigationdrawer:DrawerSettings.DrawerFooterView>
177-
</navigationdrawer:DrawerSettings>
178-
</navigationdrawer:SfNavigationDrawer.DrawerSettings>
179-
</navigationdrawer:SfNavigationDrawer>
180-
181-
182-
{% endhighlight %}
183-
184-
{% highlight c# %}
185-
186-
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
187-
DrawerSettings drawerSettings = new DrawerSettings();
188-
drawerSettings.DrawerFooterHeight = 150;
189-
drawerSettings.Position = Syncfusion.Maui.NavigationDrawer.Position.Left;
190-
Grid footerContent = new Grid();
191-
footerContent.BackgroundColor = Colors.LightBlue;
192-
Label footer = new Label();
193-
footer.Text = "Footer";
194-
footer.TextColor = Colors.White;
195-
footer.FontSize = 20;
196-
footer.HorizontalOptions = LayoutOptions.Center;
197-
footer.VerticalOptions = LayoutOptions.Center;
198-
footerContent.Children.Add(footer);
199-
drawerSettings.DrawerFooterView = footerContent;
200-
navigationDrawer.DrawerSettings = drawerSettings;
201-
this.Content = navigationDrawer;
202-
203-
{% endhighlight %}
204-
205-
{% endtabs %}
206-
20758
### SecondaryDrawerSettings
20859

20960
Implement the secondary drawer using the secondary drawer settings class. 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 set the secondary drawer settings's properties in XAML and C#.
@@ -249,126 +100,30 @@ Implement the secondary drawer using the secondary drawer settings class. Its pr
249100

250101
N> When the primary drawer and the secondary drawer are set to the same position, the primary drawer will open on swiping.
251102

252-
### Secondary drawer header view
253-
254-
The header content can be provided to the secondary drawer using the [DrawerHeaderView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeaderView) property inside the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) class of `SecondaryDrawerSettings`. The following code demonstrates how to set the header content to the secondary drawer.
255-
256-
{% tabs %}
257-
258-
{% highlight xaml %}
259-
260-
<navigationdrawer:SfNavigationDrawer>
261-
<navigationdrawer:SfNavigationDrawer.SecondaryDrawerSettings>
262-
<navigationdrawer:DrawerSettings>
263-
<navigationdrawer:DrawerSettings.DrawerHeaderView>
264-
<Grid BackgroundColor="#007DE6">
265-
<Grid.RowDefinitions>
266-
<RowDefinition Height="120"/>
267-
</Grid.RowDefinitions>
268-
<Label Text="Secondary Header"
269-
Grid.Row="0"
270-
HorizontalTextAlignment="Center"
271-
HorizontalOptions="Center"
272-
FontSize="20"
273-
TextColor="White"/>
274-
</Grid>
275-
</navigationdrawer:DrawerSettings.DrawerHeaderView>
276-
</navigationdrawer:DrawerSettings>
277-
</navigationdrawer:SfNavigationDrawer.SecondaryDrawerSettings>
278-
</navigationdrawer:SfNavigationDrawer>
103+
## Toggling method
279104

280-
{% endhighlight %}
105+
Users can toggle the secondary drawer using the `ToggleSecondaryDrawer` method.
281106

282-
{% highlight c# %}
107+
{% highlight c# %}
283108

284-
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
285-
DrawerSettings secondaryDrawer = new DrawerSettings();
286-
Grid secondaryHeader = new Grid();
287-
secondaryHeader.BackgroundColor = Colors.LightBlue;
288-
Label header = new Label();
289-
header.Text = "Secondary Header";
290-
header.FontSize = 20;
291-
header.TextColor = Colors.White;
292-
header.HorizontalTextAlignment = TextAlignment.Center;
293-
secondaryHeader.Children.Add(header);
294-
secondaryDrawer.DrawerHeaderView = secondaryHeader;
295-
navigationDrawer.SecondaryDrawerSettings = secondaryDrawer;
296-
this.Content = navigationDrawer;
109+
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
110+
navigationDrawer.ToggleSecondaryDrawer();
297111

298112
{% endhighlight %}
299113

300-
{% endtabs %}
114+
### Opening the drawer programmatically
301115

302-
### Secondary drawer content view
116+
The `IsOpen` property in the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) of `SecondaryDrawerSettings` is used to open or close the drawer programmatically.
303117

304-
The drawer content can be provided to the secondary drawer using the [DrawerContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerContentView) property inside the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) class of `SecondaryDrawerSettings`. The following code demonstrates how to set the drawer content to the secondary drawer.
118+
The following code sample demonstrates how to set `IsOpen` property in XAML and C#.
305119

306120
{% tabs %}
307121

308122
{% highlight xaml %}
309-
310-
<navigationdrawer:SfNavigationDrawer>
311-
<navigationdrawer:SfNavigationDrawer.SecondaryDrawerSettings>
312-
<navigationdrawer:DrawerSettings>
313-
<navigationdrawer:DrawerSettings.DrawerContentView>
314-
<Grid BackgroundColor="#D4F1F4">
315-
<Label Text="Secondary Drawer Content"
316-
HorizontalTextAlignment="Center"
317-
HorizontalOptions="Center"
318-
FontSize="20"
319-
TextColor="Black"/>
320-
</Grid>
321-
</navigationdrawer:DrawerSettings.DrawerContentView>
322-
</navigationdrawer:DrawerSettings>
323-
</navigationdrawer:SfNavigationDrawer.SecondaryDrawerSettings>
324-
</navigationdrawer:SfNavigationDrawer>
325-
326-
{% endhighlight %}
327-
328-
{% highlight c# %}
329-
330-
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
331-
DrawerSettings secondaryDrawer = new DrawerSettings();
332-
Grid secondaryContent = new Grid();
333-
secondaryContent.BackgroundColor = Color.FromHex("#D4F1F4");
334-
Label content = new Label();
335-
content.Text = "Secondary Drawer Content";
336-
content.FontSize = 20;
337-
content.TextColor = Colors.Black;
338-
content.HorizontalTextAlignment = TextAlignment.Center;
339-
secondaryContent.Children.Add(content);
340-
secondaryDrawer.DrawerContentView = secondaryContent;
341-
this.Content = navigationDrawer;
342-
343123

344-
{% endhighlight %}
345-
346-
{% endtabs %}
347-
348-
### Secondary drawer footer view
349-
350-
The footer content can be provided to the secondary drawer using the [DrawerFooterView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerFooterView) property inside the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) class of `SecondaryDrawerSettings`. The following code demonstrates how to set footer content to the secondary drawer.
351-
352-
{% tabs %}
353-
354-
{% highlight xaml %}
355-
356124
<navigationdrawer:SfNavigationDrawer>
357125
<navigationdrawer:SfNavigationDrawer.SecondaryDrawerSettings>
358-
<navigationdrawer:DrawerSettings>
359-
<navigationdrawer:DrawerSettings.DrawerFooterView>
360-
<Grid BackgroundColor="#007DE6">
361-
<Grid.RowDefinitions>
362-
<RowDefinition Height="120"/>
363-
</Grid.RowDefinitions>
364-
<Label Text="Secondary Footer"
365-
Grid.Row="0"
366-
HorizontalTextAlignment="Center"
367-
HorizontalOptions="Center"
368-
FontSize="20"
369-
TextColor="White"/>
370-
</Grid>
371-
</navigationdrawer:DrawerSettings.DrawerFooterView>
126+
<navigationdrawer:DrawerSettings IsOpen="True">
372127
</navigationdrawer:DrawerSettings>
373128
</navigationdrawer:SfNavigationDrawer.SecondaryDrawerSettings>
374129
</navigationdrawer:SfNavigationDrawer>
@@ -379,36 +134,13 @@ The footer content can be provided to the secondary drawer using the [DrawerFoot
379134

380135
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
381136
DrawerSettings secondaryDrawer = new DrawerSettings();
382-
Grid secondaryFooter = new Grid();
383-
secondaryFooter.BackgroundColor = Colors.LightBlue;
384-
Label footer = new Label();
385-
footer.Text = "Secondary Footer";
386-
footer.FontSize = 20;
387-
footer.TextColor = Colors.White;
388-
footer.HorizontalTextAlignment = TextAlignment.Center;
389-
secondaryFooter.Children.Add(footer);
390-
secondaryDrawer.DrawerFooterView = secondaryFooter;
137+
secondaryDrawer.IsOpen = true;
391138
navigationDrawer.SecondaryDrawerSettings = secondaryDrawer;
392139
this.Content = navigationDrawer;
393140

394141
{% endhighlight %}
395142

396-
{% endtabs %}
397-
398-
## Toggling method
399-
400-
Users can toggle the secondary drawer using the `ToggleSecondaryDrawer` method.
401-
402-
{% highlight c# %}
403-
404-
navigationDrawer.ToggleSecondaryDrawer();
405-
406-
{% endhighlight %}
407-
408-
### Opening the drawer programmatically
409-
410-
The `IsOpen` property in the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) of `SecondaryDrawerSettings` is used to open or close the drawer programmatically.
143+
{% endtabs %}
411144

412-
N> Users can open only one drawer at a time.
413145

414146

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -200,27 +200,27 @@ N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree
200200

201201
## Tab bar border customization
202202

203-
You can customize the border of the tab bar using the following properties:
203+
You can customize the border of the tab header area in .NET MAUI Tab View using the following properties:
204204

205-
- TabBarBorderBrush: Sets the border color.
205+
- TabBarBorderColor: Sets the border color.
206206
- TabBarBorderThickness: Sets the border thickness.
207-
- TabBarCornerRadius: Sets the corner radius of the tab bar.
207+
- TabBarCornerRadius: Sets the corner radius of the tab bar's border.
208208

209209
{% tabs %}
210210

211211
{% highlight xaml %}
212212
<tabView:SfTabView
213213
x:Name="tabView"
214214
TabBarPlacement="Bottom"
215-
TabBarBorderBrush="#7C3AED"
215+
TabBarBorderColor="#7C3AED"
216216
TabBarBorderThickness="2"
217217
TabBarCornerRadius="24">
218218
</tabView:SfTabView>
219219
{% endhighlight %}
220220

221221
{% highlight C# %}
222222
tabView.TabBarPlacement = TabBarPlacement.Bottom;
223-
tabView.TabBarBorderBrush = Color.FromArgb("#7C3AED");
223+
tabView.TabBarBorderColor = Color.FromArgb("#7C3AED");
224224
tabView.TabBarBorderThickness = 2;
225225
tabView.TabBarCornerRadius = new CornerRadius(24);
226226
{% endhighlight %}

0 commit comments

Comments
 (0)