Skip to content

Commit 6161d5a

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #1 from SyncfusionExamples/AddDemo
Added item template demo for tab view
2 parents c64505e + 0d90c52 commit 6161d5a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+9268
-1
lines changed

‎README.md‎

Lines changed: 135 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ Tab items can be added to the control using the [Items](https://help.syncfusion.
109109
</CollectionView.ItemsSource>
110110
<CollectionView.ItemTemplate>
111111
<DataTemplate>
112-
<Grid Margin="10,5">
112+
<Grid Margin="10,5" HeightRequest="40">
113113
<Label
114114
VerticalOptions="Start"
115115
HorizontalOptions="Start"
@@ -207,3 +207,137 @@ namespace TabViewGettingStarted
207207
Run the application to render the following output:
208208

209209
![Getting started with .NET MAUI Tab View](net-maui-tab-view-getting-started.png)
210+
211+
## Populate ItemsSource
212+
213+
Items can be added to the control using the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ItemsSource) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html).
214+
215+
Objects of any class can be provided as items for `SfTabView` using `ItemsSource`. The views corresponding to the objects can be set using the [HeaderItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderItemTemplate) for the header items and [ContentItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ContentItemTemplate) for the content.
216+
217+
Create a **Model** class using the TabItems collection property, initialized with the required number of data objects, as shown in the following code examples.
218+
219+
**Model**
220+
221+
```
222+
public class Model: INotifyPropertyChanged
223+
{
224+
225+
public event PropertyChangedEventHandler PropertyChanged;
226+
227+
protected void OnPropertyChanged(string propertyName)
228+
{
229+
var handler = PropertyChanged;
230+
if (handler != null)
231+
handler(this, new PropertyChangedEventArgs(propertyName));
232+
}
233+
234+
private string name;
235+
236+
public string Name
237+
{
238+
get { return name; }
239+
set
240+
{
241+
name = value;
242+
OnPropertyChanged("Name");
243+
}
244+
}
245+
}
246+
247+
```
248+
249+
**TabItemsSourceViewModel**
250+
251+
```
252+
public class TabItemsSourceViewModel:INotifyPropertyChanged
253+
{
254+
public event PropertyChangedEventHandler PropertyChanged;
255+
256+
protected void OnPropertyChanged(string propertyName)
257+
{
258+
var handler = PropertyChanged;
259+
if (handler != null)
260+
handler(this, new PropertyChangedEventArgs(propertyName));
261+
}
262+
263+
private ObservableCollection<Model> tabItems;
264+
public ObservableCollection<Model> TabItems
265+
{
266+
get { return tabItems; }
267+
set
268+
{
269+
tabItems = value;
270+
OnPropertyChanged("TabItems");
271+
}
272+
}
273+
public TabItemsSourceViewModel()
274+
{
275+
TabItems = new ObservableCollection<Model>();
276+
TabItems.Add(new Model() { Name = "Alexandar" });
277+
TabItems.Add(new Model() { Name = "Gabriella" });
278+
TabItems.Add(new Model() { Name = "Clara"});
279+
TabItems.Add(new Model() { Name = "Tye" });
280+
TabItems.Add(new Model() { Name = "Nora" });
281+
TabItems.Add(new Model() { Name = "Sebastian" });
282+
283+
}
284+
285+
}
286+
```
287+
288+
**XAML**
289+
```
290+
291+
<tabView:SfTabView ItemsSource="{Binding TabItems}" >
292+
<tabView:SfTabView.HeaderItemTemplate>
293+
<DataTemplate >
294+
<Label Padding="5,10,10,10" Text="{Binding Name}"/>
295+
</DataTemplate>
296+
</tabView:SfTabView.HeaderItemTemplate>
297+
<tabView:SfTabView.ContentItemTemplate>
298+
<DataTemplate>
299+
<Label TextColor="Black" Text="{Binding Name}" />
300+
</DataTemplate>
301+
</tabView:SfTabView.ContentItemTemplate>
302+
</tabView:SfTabView>
303+
304+
```
305+
306+
**C#**
307+
```
308+
namespace TabViewItemTemplateSample;
309+
310+
public partial class MainPage : ContentPage
311+
{
312+
313+
TabItemsSourceViewModel model;
314+
SfTabView tabView;
315+
public MainPage()
316+
{
317+
InitializeComponent();
318+
model = new TabItemsSourceViewModel();
319+
this.BindingContext = model;
320+
tabView = new SfTabView();
321+
tabView.ItemsSource = model.TabItems;
322+
tabView.HeaderItemTemplate = new DataTemplate(() =>
323+
{
324+
var nameLabel = new Label { Padding = new Thickness(5,10,10,10)};
325+
nameLabel.SetBinding(Label.TextProperty, "Name");
326+
327+
return nameLabel;
328+
});
329+
tabView.ContentItemTemplate = new DataTemplate(() =>
330+
{
331+
var nameLabel = new Label { TextColor=Colors.Black };
332+
nameLabel.SetBinding(Label.TextProperty, "Name");
333+
return nameLabel;
334+
});
335+
this.Content = tabView;
336+
}
337+
}
338+
339+
```
340+
341+
Run the application to render the following output:
342+
343+
![Getting started with .NET MAUI Tab View](net-maui-tab-view-item-template.png)

‎TabViewItemTemplateSample/App.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:TabViewItemTemplateSample"
5+
x:Class="TabViewItemTemplateSample.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎TabViewItemTemplateSample/App.xaml.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace TabViewItemTemplateSample
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
protected override Window CreateWindow(IActivationState? activationState)
11+
{
12+
return new Window(new AppShell());
13+
}
14+
}
15+
}

‎TabViewItemTemplateSample/AppShell.xaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="TabViewItemTemplateSample.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:TabViewItemTemplateSample"
7+
Shell.FlyoutBehavior="Flyout"
8+
Title="TabViewItemTemplateSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎TabViewItemTemplateSample/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace TabViewItemTemplateSample
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎TabViewItemTemplateSample/MainPage.xaml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:TabViewItemTemplateSample"
5+
xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
6+
x:Class="TabViewItemTemplateSample.MainPage">
7+
8+
<ContentPage.BindingContext>
9+
<local:TabItemsSourceViewModel />
10+
</ContentPage.BindingContext>
11+
12+
<tabView:SfTabView ItemsSource="{Binding TabItems}" >
13+
<tabView:SfTabView.HeaderItemTemplate>
14+
<DataTemplate >
15+
<Label Padding="5,10,10,10" Text="{Binding Name}"/>
16+
</DataTemplate>
17+
</tabView:SfTabView.HeaderItemTemplate>
18+
<tabView:SfTabView.ContentItemTemplate>
19+
<DataTemplate>
20+
<Label TextColor="Black" Text="{Binding Name}" />
21+
</DataTemplate>
22+
</tabView:SfTabView.ContentItemTemplate>
23+
</tabView:SfTabView>
24+
25+
</ContentPage>

‎TabViewItemTemplateSample/MainPage.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace TabViewItemTemplateSample
2+
{
3+
public partial class MainPage : ContentPage
4+
{
5+
public MainPage()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
}
11+
12+
}

‎TabViewItemTemplateSample/MauiProgram.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core.Hosting;
3+
4+
namespace TabViewItemTemplateSample
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionCore()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}
27+
}

‎TabViewItemTemplateSample/Model.cs‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.ComponentModel;
4+
using System.Linq;
5+
using System.Text;
6+
using System.Threading.Tasks;
7+
8+
namespace TabViewItemTemplateSample
9+
{
10+
public class Model : INotifyPropertyChanged
11+
{
12+
13+
public event PropertyChangedEventHandler PropertyChanged;
14+
15+
protected void OnPropertyChanged(string propertyName)
16+
{
17+
var handler = PropertyChanged;
18+
if (handler != null)
19+
handler(this, new PropertyChangedEventArgs(propertyName));
20+
}
21+
22+
private string name;
23+
24+
public string Name
25+
{
26+
get { return name; }
27+
set
28+
{
29+
name = value;
30+
OnPropertyChanged("Name");
31+
}
32+
}
33+
}
34+
}

‎TabViewItemTemplateSample/Platforms/Android/AndroidManifest.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3+
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
4+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
5+
<uses-permission android:name="android.permission.INTERNET" />
6+
</manifest>

0 commit comments

Comments
 (0)