Skip to content

Commit 0b2f258

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #242 from syncfusion-content/943738_UGUpdate
Added Volume 1, toolkit controls feature in UG
2 parents cb51909 + 29a1e43 commit 0b2f258

File tree

4 files changed

+216
-1
lines changed

4 files changed

+216
-1
lines changed

‎maui-toolkit-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,7 @@
395395
<li><a href="/maui-toolkit/TabView/Nested-Tabs">Nested Tab bar</a></li>
396396
<li><a href="/maui-toolkit/TabView/How-To">How To</a></li>
397397
<li><a href="/maui-toolkit/TabView/Events">Events</a></li>
398+
<li><a href="/maui-toolkit/TabView/CenterButton-Customization">Center Button</a></li>
398399
</ul>
399400
</li>
400401
<li>

‎maui-toolkit/Bottom-Sheet/BottomSheet-Customization.md‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,29 @@ bottomSheet.AllowedState = BottomSheetAllowedState.HalfExpanded;
8989
{% endhighlight %}
9090
{% endtabs %}
9191

92+
93+
## Overlay tap to collapse
94+
95+
The `CollapseOnOverlayTap` property enables the bottom sheet to collapse when the user taps on the overlay (outside the sheet). This enhances user interaction by allowing easy dismissal of the sheet without fully closing it.
96+
97+
{% tabs %}
98+
{% highlight xaml %}
99+
100+
<bottomSheet:SfBottomSheet x:Name="bottomSheet" CollapseOnOverlayTap="True">
101+
<bottomSheet:SfBottomSheet.BottomSheetContent>
102+
<!--Add your content here-->
103+
</bottomSheet:SfBottomSheet.BottomSheetContent>
104+
</bottomSheet:SfBottomSheet>
105+
106+
{% endhighlight %}
107+
{% highlight c# %}
108+
109+
SfBottomSheet bottomSheet = new SfBottomSheet();
110+
bottomSheet.CollapseOnOverlayTap = true;
111+
112+
{% endhighlight %}
113+
{% endtabs %}
114+
92115
## Content Padding
93116
The [ContentPadding](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.BottomSheet.SfBottomSheet.html#Syncfusion_Maui_Toolkit_BottomSheet_SfBottomSheet_ContentPadding) property of the [BottomSheet](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.BottomSheet.SfBottomSheet.html) adds space around the content creating a gap between the bottom sheet content and the edges.
94117

@@ -349,4 +372,29 @@ SfBottomSheet bottomSheet = new SfBottomSheet
349372

350373
{% endhighlight %}
351374
{% endtabs %}
352-
![Grabber Customization Image for BottomSheet](images/grabberCustomization.png)
375+
![Grabber Customization Image for BottomSheet](images/grabberCustomization.png)
376+
377+
378+
### Grabber area height
379+
380+
The `GrabberAreaHeight` feature in the [BottomSheet](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.BottomSheet.SfBottomSheet.html) control allows developers to adjust the height of the drag area, thus enhancing both usability and appearance.
381+
382+
{% tabs %}
383+
{% highlight xaml %}
384+
385+
<bottomSheet:SfBottomSheet x:Name="bottomSheet" GrabberAreaHeight="100">
386+
<bottomSheet:SfBottomSheet.BottomSheetContent>
387+
<!--Add your content here-->
388+
</bottomSheet:SfBottomSheet.BottomSheetContent>
389+
</bottomSheet:SfBottomSheet>
390+
391+
{% endhighlight %}
392+
{% highlight c# %}
393+
394+
SfBottomSheet bottomSheet = new SfBottomSheet
395+
{
396+
GrabberAreaHeight = 100
397+
};
398+
399+
{% endhighlight %}
400+
{% endtabs %}

‎maui-toolkit/TabView/CenterButton-Customization.md‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
---
2+
layout: post
3+
title: Center button customization in .NET MAUI Tab View | Syncfusion®
4+
description: Learn here all about the center button customization in the Syncfusion® .NET MAUI Tab View(SfTabView) control.
5+
platform: maui-toolkit
6+
control: Tab View
7+
documentation: ug
8+
---
9+
10+
# Center Button Customization in .NET MAUI Tab View (SfTabView)
11+
12+
This section explains how to enable and customize The center button in .NET MAUI [SfTabView.](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabView.html)
13+
14+
## Enable the center button
15+
16+
You can enable the center button in Tab View by setting the `IsCenterButtonEnable` property to `True.`
17+
18+
{% tabs %}
19+
20+
{% highlight xaml %}
21+
22+
<tabView:SfTabView x:Name="tabView"
23+
IsCenterButtonEnabled="True" />
24+
25+
{% endhighlight %}
26+
27+
{% highlight C# %}
28+
29+
public MainPage()
30+
{
31+
InitializeComponent();
32+
SfTabView tabView = new SfTabView();
33+
tabView.IsCenterButtonEnabled = true;
34+
this.Content = tabView;
35+
}
36+
{% endhighlight %}
37+
38+
{% endtabs %}
39+
40+
## Customize the center button
41+
You can customize the center button using the properties of `CenterButtonSetting.` The following properties are used to customize the view of the center button `Background,` `Stroke,` `StrokeThickness,` `CornerRadius,` `TextColor,` `Height,` `Title,` `FontAttributes,` `FontFamily,` `FontSize,` `Width,` `ImageSource,` `ImageSize,` and `DisplayMode.`
42+
43+
{% tabs %}
44+
45+
{% highlight xaml %}
46+
47+
<tabView:SfTabView.CenterButtonSettings>
48+
<tabView:CenterButtonSettings Title="Home"
49+
Height="70"
50+
Width="80"
51+
Background="White"
52+
Stroke="HotPink"
53+
StrokeThickness="3"
54+
CornerRadius="10"
55+
TextColor="Green"
56+
ImageSource="image.png"
57+
ImageSize="24"
58+
DisplayMode="ImageWithText"
59+
FontFamily="SevillanaRegular"
60+
FontAttributes="Bold"
61+
FontSize="16" />
62+
</tabView:SfTabView.CenterButtonSettings>
63+
64+
{% endhighlight %}
65+
66+
{% highlight C# %}
67+
68+
public MainPage()
69+
{
70+
InitializeComponent();
71+
SfTabView tabView = new SfTabView();
72+
CenterButtonSettings centerButtonSettings = new CenterButtonSettings()
73+
{
74+
Height = 80,
75+
Width = 100,
76+
Title = "Center Button",
77+
FontAttributes = FontAttributes.Bold,
78+
TextColor = Colors.Green,
79+
DisplayMode = CenterButtonDisplayMode.ImageWithText,
80+
ImageSource = "Home.png",
81+
ImageSize = 24,
82+
FontFamily = "SevillanaRegular",
83+
CornerRadius = new CornerRadius(10),
84+
};
85+
86+
tabView.CenterButtonSettings = centerButtonSettings;
87+
}
88+
{% endhighlight %}
89+
90+
{% endtabs %}
91+
92+
## Center button tapped event
93+
94+
When the center button is tapped, the `CenterButtonTapped` event occurs. Using this event we can set alert messages.
95+
96+
{% tabs %}
97+
98+
{% highlight xaml %}
99+
100+
<tabView:SfTabView CenterButtonTapped="OnCenterButtonTapped">
101+
</tabView:SfTabView>
102+
103+
{% endhighlight %}
104+
105+
{% highlight C# %}
106+
107+
public MainPage()
108+
{
109+
InitializeComponent();
110+
tabView.CenterButtonTapped += OnCenterButtonTapped;
111+
}
112+
113+
private void OnCenterButtonTapped(object sender, EventArgs e)
114+
{
115+
DisplayAlert("Message", "CenterButton Clicked", "Ok");
116+
}
117+
118+
{% endhighlight %}
119+
120+
{% endtabs %}

‎maui-toolkit/TabView/Tab-Bar-Customization.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,52 @@ tabView.HeaderHorizontalTextAlignment = TextAlignment.Center;
119119

120120
![Tab header text alignment](images/HorizontalTextAlignmentCenter.png)
121121

122+
123+
## Enable content transition
124+
125+
The .NET MAUI Tab View allows users to enable or disable the transition animation for tab content when switching between tabs using `IsContentTransitionEnabled` property.
126+
127+
{% tabs %}
128+
129+
{% highlight xaml %}
130+
<tabView:SfTabView IsContentTransitionEnabled="True" ContentTransitionDuration = 1000/>
131+
{% endhighlight %}
132+
133+
{% highlight C# %}
134+
SfTabView tabView = new SfTabView();
135+
tabView.IsContentTransitionEnabled = "True";
136+
tabView.ContentTransitionDuration = 1000;
137+
{% endhighlight %}
138+
139+
{% endtabs %}
140+
141+
142+
## Tab header alignment
143+
144+
The .NET MAUI TabView allows users to customize the header position using the `TabHeaderAlignment` property, providing greater flexibility in tab layout customization.
145+
146+
By default, the header is positioned at the Start. This property supports the following values:
147+
148+
* **Start** - Positions the tab header at the beginning of the tab view.
149+
* **Center** - Aligns the tab header at the center of the tab view.
150+
* **End** - Places the tab header at the end of the tab view.
151+
152+
153+
N> The `TabHeaderAlignment` property is applicable only when the `TabWidthMode` is set to SizeToContent.
154+
155+
{% tabs %}
156+
157+
{% highlight xaml %}
158+
<tabView:SfTabView TabHeaderAlignment="Center"/>
159+
{% endhighlight %}
160+
161+
{% highlight C# %}
162+
SfTabView tabView = new SfTabView();
163+
tabView.TabHeaderAlignment = TabHeaderAlignment.Center;
164+
{% endhighlight %}
165+
166+
{% endtabs %}
167+
122168
## Tab bar placement options
123169

124170
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.

0 commit comments

Comments
 (0)