Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 135 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ Tab items can be added to the control using the [Items](https://help.syncfusion.
</CollectionView.ItemsSource>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Margin="10,5">
<Grid Margin="10,5" HeightRequest="40">
<Label
VerticalOptions="Start"
HorizontalOptions="Start"
Expand Down Expand Up @@ -207,3 +207,137 @@ namespace TabViewGettingStarted
Run the application to render the following output:

![Getting started with .NET MAUI Tab View](net-maui-tab-view-getting-started.png)

## Populate ItemsSource

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

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.

Create a **Model** class using the TabItems collection property, initialized with the required number of data objects, as shown in the following code examples.

**Model**

```
public class Model: INotifyPropertyChanged
{

public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}

private string name;

public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChanged("Name");
}
}
}

```

**TabItemsSourceViewModel**

```
public class TabItemsSourceViewModel:INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}

private ObservableCollection<Model> tabItems;
public ObservableCollection<Model> TabItems
{
get { return tabItems; }
set
{
tabItems = value;
OnPropertyChanged("TabItems");
}
}
public TabItemsSourceViewModel()
{
TabItems = new ObservableCollection<Model>();
TabItems.Add(new Model() { Name = "Alexandar" });
TabItems.Add(new Model() { Name = "Gabriella" });
TabItems.Add(new Model() { Name = "Clara"});
TabItems.Add(new Model() { Name = "Tye" });
TabItems.Add(new Model() { Name = "Nora" });
TabItems.Add(new Model() { Name = "Sebastian" });

}

}
```

**XAML**
```

<tabView:SfTabView ItemsSource="{Binding TabItems}" >
<tabView:SfTabView.HeaderItemTemplate>
<DataTemplate >
<Label Padding="5,10,10,10" Text="{Binding Name}"/>
</DataTemplate>
</tabView:SfTabView.HeaderItemTemplate>
<tabView:SfTabView.ContentItemTemplate>
<DataTemplate>
<Label TextColor="Black" Text="{Binding Name}" />
</DataTemplate>
</tabView:SfTabView.ContentItemTemplate>
</tabView:SfTabView>

```

**C#**
```
namespace TabViewItemTemplateSample;

public partial class MainPage : ContentPage
{

TabItemsSourceViewModel model;
SfTabView tabView;
public MainPage()
{
InitializeComponent();
model = new TabItemsSourceViewModel();
this.BindingContext = model;
tabView = new SfTabView();
tabView.ItemsSource = model.TabItems;
tabView.HeaderItemTemplate = new DataTemplate(() =>
{
var nameLabel = new Label { Padding = new Thickness(5,10,10,10)};
nameLabel.SetBinding(Label.TextProperty, "Name");

return nameLabel;
});
tabView.ContentItemTemplate = new DataTemplate(() =>
{
var nameLabel = new Label { TextColor=Colors.Black };
nameLabel.SetBinding(Label.TextProperty, "Name");
return nameLabel;
});
this.Content = tabView;
}
}

```

Run the application to render the following output:

![Getting started with .NET MAUI Tab View](net-maui-tab-view-item-template.png)
14 changes: 14 additions & 0 deletions TabViewItemTemplateSample/App.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TabViewItemTemplateSample"
x:Class="TabViewItemTemplateSample.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
15 changes: 15 additions & 0 deletions TabViewItemTemplateSample/App.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
namespace TabViewItemTemplateSample
{
public partial class App : Application
{
public App()
{
InitializeComponent();
}

protected override Window CreateWindow(IActivationState? activationState)
{
return new Window(new AppShell());
}
}
}
15 changes: 15 additions & 0 deletions TabViewItemTemplateSample/AppShell.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="TabViewItemTemplateSample.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TabViewItemTemplateSample"
Shell.FlyoutBehavior="Flyout"
Title="TabViewItemTemplateSample">

<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />

</Shell>
10 changes: 10 additions & 0 deletions TabViewItemTemplateSample/AppShell.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
namespace TabViewItemTemplateSample
{
public partial class AppShell : Shell
{
public AppShell()
{
InitializeComponent();
}
}
}
25 changes: 25 additions & 0 deletions TabViewItemTemplateSample/MainPage.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TabViewItemTemplateSample"
xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
x:Class="TabViewItemTemplateSample.MainPage">

<ContentPage.BindingContext>
<local:TabItemsSourceViewModel />
</ContentPage.BindingContext>

<tabView:SfTabView ItemsSource="{Binding TabItems}" >
<tabView:SfTabView.HeaderItemTemplate>
<DataTemplate >
<Label Padding="5,10,10,10" Text="{Binding Name}"/>
</DataTemplate>
</tabView:SfTabView.HeaderItemTemplate>
<tabView:SfTabView.ContentItemTemplate>
<DataTemplate>
<Label TextColor="Black" Text="{Binding Name}" />
</DataTemplate>
</tabView:SfTabView.ContentItemTemplate>
</tabView:SfTabView>

</ContentPage>
12 changes: 12 additions & 0 deletions TabViewItemTemplateSample/MainPage.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
namespace TabViewItemTemplateSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}

}

}
27 changes: 27 additions & 0 deletions TabViewItemTemplateSample/MauiProgram.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
using Microsoft.Extensions.Logging;
using Syncfusion.Maui.Core.Hosting;

namespace TabViewItemTemplateSample
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureSyncfusionCore()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});

#if DEBUG
builder.Logging.AddDebug();
#endif

return builder.Build();
}
}
}
34 changes: 34 additions & 0 deletions TabViewItemTemplateSample/Model.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TabViewItemTemplateSample
{
public class Model : INotifyPropertyChanged
{

public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}

private string name;

public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChanged("Name");
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
11 changes: 11 additions & 0 deletions TabViewItemTemplateSample/Platforms/Android/MainActivity.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
using Android.App;
using Android.Content.PM;
using Android.OS;

namespace TabViewItemTemplateSample
{
[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, LaunchMode = LaunchMode.SingleTop, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{
}
}
16 changes: 16 additions & 0 deletions TabViewItemTemplateSample/Platforms/Android/MainApplication.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
using Android.App;
using Android.Runtime;

namespace TabViewItemTemplateSample
{
[Application]
public class MainApplication : MauiApplication
{
public MainApplication(IntPtr handle, JniHandleOwnership ownership)
: base(handle, ownership)
{
}

protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#512BD4</color>
<color name="colorPrimaryDark">#2B0B98</color>
<color name="colorAccent">#2B0B98</color>
</resources>
10 changes: 10 additions & 0 deletions TabViewItemTemplateSample/Platforms/MacCatalyst/AppDelegate.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
using Foundation;

namespace TabViewItemTemplateSample
{
[Register("AppDelegate")]
public class AppDelegate : MauiUIApplicationDelegate
{
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}
}
14 changes: 14 additions & 0 deletions TabViewItemTemplateSample/Platforms/MacCatalyst/Entitlements.plist
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<!-- See https://aka.ms/maui-publish-app-store#add-entitlements for more information about adding entitlements.-->
<dict>
<!-- App Sandbox must be enabled to distribute a MacCatalyst app through the Mac App Store. -->
<key>com.apple.security.app-sandbox</key>
<true/>
<!-- When App Sandbox is enabled, this value is required to open outgoing network connections. -->
<key>com.apple.security.network.client</key>
<true/>
</dict>
</plist>

Loading