Skip to content

Commit 6536c69

Browse files
swethasf3977swethasf3977
committed
Updated Readme file
1 parent 4308242 commit 6536c69

File tree

1 file changed

+118
-1
lines changed

1 file changed

+118
-1
lines changed

‎README.md‎

Lines changed: 118 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,119 @@
11
# How-to-set-badge-in-.NET-MAUI-TabView-header
2-
How to set badge in .NET MAUI TabView header
2+
This section illustrate How to set badge in .NET MAUI TabView header
3+
4+
# Getting Started with .NET MAUI Tab View (SfTabView)
5+
6+
## Adding a .NET MAUI Tab View reference
7+
Syncfusion .NET MAUI controls are available in Nuget.org. To add .NET MAUI Tab View to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.TabView and then install it.
8+
9+
## Create a simple .NET MAUI Tab View
10+
This section explains how to create a .NET MAUI Tab View and configure it. The control can be configured entirely in C# code or by the XAML markup.
11+
12+
## Creating the project
13+
Create a new .NET MAUI application in Visual Studio
14+
15+
## Adding a .NET MAUI Tab View control
16+
* Step 1: Add the NuGet to the project as discussed in the above reference section.
17+
18+
* Step 2: Add the namespace as shown in the following code sample.
19+
20+
**XAML**
21+
22+
```
23+
xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
24+
```
25+
26+
* Step 3: Set the control to content in ContentPage.
27+
28+
**XAML**
29+
```
30+
<ContentPage.Content>
31+
<tabView:SfTabView />
32+
</ContentPage.Content>
33+
34+
```
35+
36+
# Populate Tab Items in .NET MAUI Tab View
37+
Tab items can be added to the control using the Items property of SfTabView.
38+
39+
**XAML**
40+
```
41+
<ContentPage.Content>
42+
<tabView:SfTabView x:Name="tabView">
43+
<tabView:SfTabView.Items>
44+
<tabView:SfTabItem Header="Call">
45+
<tabView:SfTabItem.Content>
46+
<Grid BackgroundColor="Red" />
47+
</tabView:SfTabItem.Content>
48+
</tabView:SfTabItem>
49+
50+
<tabView:SfTabItem Header="Favorites">
51+
<tabView:SfTabItem.Content>
52+
<Grid BackgroundColor="Green"/>
53+
</tabView:SfTabItem.Content>
54+
</tabView:SfTabItem>
55+
56+
<tabView:SfTabItem Header="Contacts">
57+
<tabView:SfTabItem.Content>
58+
<Grid BackgroundColor="Blue"/>
59+
</tabView:SfTabItem.Content>
60+
</tabView:SfTabItem>
61+
</tabView:SfTabView.Items>
62+
</tabView:SfTabView>
63+
</ContentPage.Content>
64+
</ContentPage>
65+
```
66+
# To set badge in .NET MAUI TabView header
67+
68+
**XAML**
69+
```
70+
<ContentPage.Content>
71+
<tabView:SfTabView ItemsSource="{Binding TabItems}" TabWidthMode="Default" >
72+
<tabView:SfTabView.HeaderItemTemplate>
73+
<DataTemplate>
74+
<Grid >
75+
<Grid.ColumnDefinitions>
76+
<ColumnDefinition Width="2*"/>
77+
<ColumnDefinition Width="8*"/>
78+
</Grid.ColumnDefinitions>
79+
<core:SfBadgeView HorizontalOptions="Center"
80+
VerticalOptions="Center"
81+
BadgeText="20"
82+
Grid.Column="1"
83+
Margin="0,30,0,0" >
84+
<core:SfBadgeView.Content>
85+
<Label Text="{Binding ID}"
86+
WidthRequest="100"
87+
HeightRequest="60"
88+
Grid.Column="2" />
89+
</core:SfBadgeView.Content>
90+
</core:SfBadgeView>
91+
</Grid>
92+
</DataTemplate>
93+
</tabView:SfTabView.HeaderItemTemplate>
94+
<tabView:SfTabView.ContentItemTemplate>
95+
<DataTemplate>
96+
<Grid BackgroundColor="White" x:Name="AllContactsGrid" >
97+
<ListView x:Name="ContactListView"
98+
ItemsSource="{Binding TabItems}"
99+
RowHeight="75">
100+
<ListView.BindingContext>
101+
<local:TabItemsSourceViewModel />
102+
</ListView.BindingContext>
103+
<ListView.ItemTemplate>
104+
<DataTemplate>
105+
<ViewCell>
106+
<StackLayout Orientation="Vertical" Margin="30,0,0,0">
107+
<Label Text="{Binding ID}"
108+
FontSize="24" />
109+
</StackLayout>
110+
</ViewCell>
111+
</DataTemplate>
112+
</ListView.ItemTemplate>
113+
</ListView>
114+
</Grid>
115+
</DataTemplate>
116+
</tabView:SfTabView.ContentItemTemplate>
117+
</tabView:SfTabView>
118+
</ContentPage.Content>
119+
```

0 commit comments

Comments
 (0)