diff --git a/README.md b/README.md index 01d93aa..884384e 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,139 @@ -# How-to-Customize-the-Header-of-the-Selected-Tab-in-.NET-MAUI-TabView-when-using-ItemsSource-binding -This repository contains a sample explaining how to customize the Header of the Selected Tab in .NET MAUI TabView when using ItemsSource binding. +This article explains how to customize the selected tab header in the [.NET MAUI TabView](https://www.syncfusion.com/maui-controls/maui-tab-view) when using the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ItemsSource) property. The `VisualStateManager` is designed to work directly with [TabItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem__ctor) but does not integrate seamlessly with the ItemsSource-based tab binding. To achieve the desired customization of the selected tab header, the [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1#Syncfusion_Maui_TabView_SfTabView_SelectionChanged) event can be leveraged, by utilizing the [EventToCommandBehavior](https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/behaviors/event-to-command-behavior). + +To dynamically change the text color of the selected tab header, follow these steps: + +**Model** + +```csharp +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"); } + } + + private Color? textColor; + public Color? TextColor + { + get { return textColor; } + set { textColor = value; OnPropertyChanged("TextColor"); } + } +} +``` + +**ViewModel** + +In your ViewModel, you will need to define the properties and commands to handle the selection change: + +```csharp +public class MainPageViewModel: INotifyPropertyChanged +{ + public event PropertyChangedEventHandler PropertyChanged; + + protected void OnPropertyChanged(string propertyName) + { + PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); + } + + private ObservableCollection tabItems; + public ObservableCollection TabItems + { + get { return tabItems; } + set { tabItems = value; OnPropertyChanged("TabItems"); } + } + + private Command selectionChangedCommand; + public Command SelectionChangedCommand + { + get { return selectionChangedCommand; } + set { selectionChangedCommand = value; OnPropertyChanged("SelectionChangedCommand"); } + } + + public MainPageViewModel() + { + TabItems = new ObservableCollection + { + new Model() { Name = "Alexandar", TextColor = Colors.Red }, + new Model() { Name = "Gabriella", TextColor = Colors.Black } + // Add more items as needed + }; + + SelectionChangedCommand = new Command(ExecuteSelectionChangedCommand); + } + + public void ExecuteSelectionChangedCommand(object obj) + { + if (obj is SfTabView tabItem) + { + if (TabItems != null) + { + // Ensure the selected index is within the valid range + if (tabItem.SelectedIndex >= 0 && tabItem.SelectedIndex < TabItems.Count) + { + for (int i = 0; i < TabItems.Count; i++) + { + // Set TextColor for selected tab to red, others to black + TabItems[i].TextColor = (i == (int)tabItem.SelectedIndex) ? Colors.Red : Colors.Black; + } + } + } + } + } +} +``` + +**Explanation** + +1. **TextColor Property**: A `TextColor` property is defined within the `Model` class to allow dynamic updates to the text color of the tab headers. +2. **SelectionChangedCommand**: This command is bound to the `SelectionChanged` event of the `.NET MAUI TabView`. When the selection changes, the command is executed with the `.NET MAUI TabView` instance as the command parameter. +3. **ExecuteSelectionChangedCommand Method**: This method resets the text color for all tab items to the default color (black) and updates the text color of the currently selected tab to red. + +**XAML** + +```xml + + + + + + + + + + + + + + + +``` + +By following these steps, you can effectively customize the selected tab header in a .NET MAUI TabView when using ItemsSource binding. + +**Output** + +![TabViewHeaderCustomization.gif](https://support.syncfusion.com/kb/agent/attachment/article/18235/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM0MDUxIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.LFJsmNPHH9vWsR3CpL62ZtwF5lLr3sWpSrgckb-4pCM) + +**Requirements to run the demo** + +To run the demo, refer to [System Requirements for .NET MAUI](https://help.syncfusion.com/maui/system-requirements) + +**Troubleshooting:** + +**Path too long exception** + +If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project. \ No newline at end of file diff --git a/TabViewSample/TabViewSample.sln b/TabViewSample/TabViewSample.sln new file mode 100644 index 0000000..db77772 --- /dev/null +++ b/TabViewSample/TabViewSample.sln @@ -0,0 +1,31 @@ + +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 17 +VisualStudioVersion = 17.8.34309.116 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "TabViewSample", "TabViewSample\TabViewSample.csproj", "{E377EC6C-6773-417F-9ED7-7566F6F0D6BB}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + Release-Xml|Any CPU = Release-Xml|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Debug|Any CPU.Build.0 = Debug|Any CPU + {E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Debug|Any CPU.Deploy.0 = Debug|Any CPU + {E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release|Any CPU.ActiveCfg = Release|Any CPU + {E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release|Any CPU.Build.0 = Release|Any CPU + {E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release|Any CPU.Deploy.0 = Release|Any CPU + {E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release-Xml|Any CPU.ActiveCfg = Release|Any CPU + {E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release-Xml|Any CPU.Build.0 = Release|Any CPU + {E377EC6C-6773-417F-9ED7-7566F6F0D6BB}.Release-Xml|Any CPU.Deploy.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {B69CA809-EB64-4829-B9A8-BA7F393E582F} + EndGlobalSection +EndGlobal diff --git a/TabViewSample/TabViewSample/App.xaml b/TabViewSample/TabViewSample/App.xaml new file mode 100644 index 0000000..54afd00 --- /dev/null +++ b/TabViewSample/TabViewSample/App.xaml @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/TabViewSample/TabViewSample/App.xaml.cs b/TabViewSample/TabViewSample/App.xaml.cs new file mode 100644 index 0000000..0b473f7 --- /dev/null +++ b/TabViewSample/TabViewSample/App.xaml.cs @@ -0,0 +1,12 @@ +namespace TabViewSample +{ + public partial class App : Application + { + public App() + { + InitializeComponent(); + + MainPage = new AppShell(); + } + } +} diff --git a/TabViewSample/TabViewSample/AppShell.xaml b/TabViewSample/TabViewSample/AppShell.xaml new file mode 100644 index 0000000..3fc5d19 --- /dev/null +++ b/TabViewSample/TabViewSample/AppShell.xaml @@ -0,0 +1,15 @@ + + + + + + diff --git a/TabViewSample/TabViewSample/AppShell.xaml.cs b/TabViewSample/TabViewSample/AppShell.xaml.cs new file mode 100644 index 0000000..a1fec07 --- /dev/null +++ b/TabViewSample/TabViewSample/AppShell.xaml.cs @@ -0,0 +1,10 @@ +namespace TabViewSample +{ + public partial class AppShell : Shell + { + public AppShell() + { + InitializeComponent(); + } + } +} diff --git a/TabViewSample/TabViewSample/MainPage.xaml b/TabViewSample/TabViewSample/MainPage.xaml new file mode 100644 index 0000000..8fceca5 --- /dev/null +++ b/TabViewSample/TabViewSample/MainPage.xaml @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/TabViewSample/TabViewSample/MainPage.xaml.cs b/TabViewSample/TabViewSample/MainPage.xaml.cs new file mode 100644 index 0000000..4c1d1b3 --- /dev/null +++ b/TabViewSample/TabViewSample/MainPage.xaml.cs @@ -0,0 +1,12 @@ +namespace TabViewSample +{ + public partial class MainPage : ContentPage + { + public MainPage() + { + InitializeComponent(); + } + } + +} + diff --git a/TabViewSample/TabViewSample/MauiProgram.cs b/TabViewSample/TabViewSample/MauiProgram.cs new file mode 100644 index 0000000..43e3d3b --- /dev/null +++ b/TabViewSample/TabViewSample/MauiProgram.cs @@ -0,0 +1,29 @@ +using Syncfusion.Maui.Core.Hosting; +using Microsoft.Extensions.Logging; +using CommunityToolkit.Maui; + +namespace TabViewSample +{ + public static class MauiProgram + { + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .UseMauiApp() + .ConfigureSyncfusionCore() + .UseMauiCommunityToolkit() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); + }); + +#if DEBUG + builder.Logging.AddDebug(); +#endif + + return builder.Build(); + } + } +} diff --git a/TabViewSample/TabViewSample/Model/Model.cs b/TabViewSample/TabViewSample/Model/Model.cs new file mode 100644 index 0000000..696f6eb --- /dev/null +++ b/TabViewSample/TabViewSample/Model/Model.cs @@ -0,0 +1,40 @@ +using System.ComponentModel; + +namespace TabViewSample +{ + 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"); + } + } + + private Color? textColor; + public Color? TextColor + { + get { return textColor; } + set + { + textColor = value; + OnPropertyChanged("TextColor"); + } + } + } +} diff --git a/TabViewSample/TabViewSample/Platforms/Android/AndroidManifest.xml b/TabViewSample/TabViewSample/Platforms/Android/AndroidManifest.xml new file mode 100644 index 0000000..e9937ad --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/Android/AndroidManifest.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/TabViewSample/TabViewSample/Platforms/Android/MainActivity.cs b/TabViewSample/TabViewSample/Platforms/Android/MainActivity.cs new file mode 100644 index 0000000..9cae535 --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/Android/MainActivity.cs @@ -0,0 +1,11 @@ +using Android.App; +using Android.Content.PM; +using Android.OS; + +namespace TabViewSample +{ + [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)] + public class MainActivity : MauiAppCompatActivity + { + } +} diff --git a/TabViewSample/TabViewSample/Platforms/Android/MainApplication.cs b/TabViewSample/TabViewSample/Platforms/Android/MainApplication.cs new file mode 100644 index 0000000..c22b7a7 --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/Android/MainApplication.cs @@ -0,0 +1,16 @@ +using Android.App; +using Android.Runtime; + +namespace TabViewSample +{ + [Application] + public class MainApplication : MauiApplication + { + public MainApplication(IntPtr handle, JniHandleOwnership ownership) + : base(handle, ownership) + { + } + + protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp(); + } +} diff --git a/TabViewSample/TabViewSample/Platforms/Android/Resources/values/colors.xml b/TabViewSample/TabViewSample/Platforms/Android/Resources/values/colors.xml new file mode 100644 index 0000000..c04d749 --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/Android/Resources/values/colors.xml @@ -0,0 +1,6 @@ + + + #512BD4 + #2B0B98 + #2B0B98 + \ No newline at end of file diff --git a/TabViewSample/TabViewSample/Platforms/MacCatalyst/AppDelegate.cs b/TabViewSample/TabViewSample/Platforms/MacCatalyst/AppDelegate.cs new file mode 100644 index 0000000..635f30d --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/MacCatalyst/AppDelegate.cs @@ -0,0 +1,10 @@ +using Foundation; + +namespace TabViewSample +{ + [Register("AppDelegate")] + public class AppDelegate : MauiUIApplicationDelegate + { + protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp(); + } +} diff --git a/TabViewSample/TabViewSample/Platforms/MacCatalyst/Entitlements.plist b/TabViewSample/TabViewSample/Platforms/MacCatalyst/Entitlements.plist new file mode 100644 index 0000000..de4adc9 --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/MacCatalyst/Entitlements.plist @@ -0,0 +1,14 @@ + + + + + + + com.apple.security.app-sandbox + + + com.apple.security.network.client + + + + diff --git a/TabViewSample/TabViewSample/Platforms/MacCatalyst/Info.plist b/TabViewSample/TabViewSample/Platforms/MacCatalyst/Info.plist new file mode 100644 index 0000000..7268977 --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/MacCatalyst/Info.plist @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + UIDeviceFamily + + 2 + + UIRequiredDeviceCapabilities + + arm64 + + UISupportedInterfaceOrientations + + UIInterfaceOrientationPortrait + UIInterfaceOrientationLandscapeLeft + UIInterfaceOrientationLandscapeRight + + UISupportedInterfaceOrientations~ipad + + UIInterfaceOrientationPortrait + UIInterfaceOrientationPortraitUpsideDown + UIInterfaceOrientationLandscapeLeft + UIInterfaceOrientationLandscapeRight + + XSAppIconAssets + Assets.xcassets/appicon.appiconset + + diff --git a/TabViewSample/TabViewSample/Platforms/MacCatalyst/Program.cs b/TabViewSample/TabViewSample/Platforms/MacCatalyst/Program.cs new file mode 100644 index 0000000..d898aaf --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/MacCatalyst/Program.cs @@ -0,0 +1,16 @@ +using ObjCRuntime; +using UIKit; + +namespace TabViewSample +{ + public class Program + { + // This is the main entry point of the application. + static void Main(string[] args) + { + // if you want to use a different Application Delegate class from "AppDelegate" + // you can specify it here. + UIApplication.Main(args, null, typeof(AppDelegate)); + } + } +} diff --git a/TabViewSample/TabViewSample/Platforms/Tizen/Main.cs b/TabViewSample/TabViewSample/Platforms/Tizen/Main.cs new file mode 100644 index 0000000..1a7d82e --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/Tizen/Main.cs @@ -0,0 +1,17 @@ +using Microsoft.Maui; +using Microsoft.Maui.Hosting; +using System; + +namespace TabViewSample +{ + internal class Program : MauiApplication + { + protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp(); + + static void Main(string[] args) + { + var app = new Program(); + app.Run(args); + } + } +} diff --git a/TabViewSample/TabViewSample/Platforms/Tizen/tizen-manifest.xml b/TabViewSample/TabViewSample/Platforms/Tizen/tizen-manifest.xml new file mode 100644 index 0000000..e4c76e1 --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/Tizen/tizen-manifest.xml @@ -0,0 +1,15 @@ + + + + + + maui-appicon-placeholder + + + + + http://tizen.org/privilege/internet + + + + \ No newline at end of file diff --git a/TabViewSample/TabViewSample/Platforms/Windows/App.xaml b/TabViewSample/TabViewSample/Platforms/Windows/App.xaml new file mode 100644 index 0000000..703fd11 --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/Windows/App.xaml @@ -0,0 +1,8 @@ + + + diff --git a/TabViewSample/TabViewSample/Platforms/Windows/App.xaml.cs b/TabViewSample/TabViewSample/Platforms/Windows/App.xaml.cs new file mode 100644 index 0000000..d43cef5 --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/Windows/App.xaml.cs @@ -0,0 +1,25 @@ +using Microsoft.UI.Xaml; + +// To learn more about WinUI, the WinUI project structure, +// and more about our project templates, see: http://aka.ms/winui-project-info. + +namespace TabViewSample.WinUI +{ + /// + /// Provides application-specific behavior to supplement the default Application class. + /// + public partial class App : MauiWinUIApplication + { + /// + /// Initializes the singleton application object. This is the first line of authored code + /// executed, and as such is the logical equivalent of main() or WinMain(). + /// + public App() + { + this.InitializeComponent(); + } + + protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp(); + } + +} diff --git a/TabViewSample/TabViewSample/Platforms/Windows/Package.appxmanifest b/TabViewSample/TabViewSample/Platforms/Windows/Package.appxmanifest new file mode 100644 index 0000000..e8141fc --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/Windows/Package.appxmanifest @@ -0,0 +1,46 @@ + + + + + + + + + $placeholder$ + User Name + $placeholder$.png + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/TabViewSample/TabViewSample/Platforms/Windows/app.manifest b/TabViewSample/TabViewSample/Platforms/Windows/app.manifest new file mode 100644 index 0000000..f0ac048 --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/Windows/app.manifest @@ -0,0 +1,15 @@ + + + + + + + + true/PM + PerMonitorV2, PerMonitor + + + diff --git a/TabViewSample/TabViewSample/Platforms/iOS/AppDelegate.cs b/TabViewSample/TabViewSample/Platforms/iOS/AppDelegate.cs new file mode 100644 index 0000000..635f30d --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/iOS/AppDelegate.cs @@ -0,0 +1,10 @@ +using Foundation; + +namespace TabViewSample +{ + [Register("AppDelegate")] + public class AppDelegate : MauiUIApplicationDelegate + { + protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp(); + } +} diff --git a/TabViewSample/TabViewSample/Platforms/iOS/Info.plist b/TabViewSample/TabViewSample/Platforms/iOS/Info.plist new file mode 100644 index 0000000..0004a4f --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/iOS/Info.plist @@ -0,0 +1,32 @@ + + + + + LSRequiresIPhoneOS + + UIDeviceFamily + + 1 + 2 + + UIRequiredDeviceCapabilities + + arm64 + + UISupportedInterfaceOrientations + + UIInterfaceOrientationPortrait + UIInterfaceOrientationLandscapeLeft + UIInterfaceOrientationLandscapeRight + + UISupportedInterfaceOrientations~ipad + + UIInterfaceOrientationPortrait + UIInterfaceOrientationPortraitUpsideDown + UIInterfaceOrientationLandscapeLeft + UIInterfaceOrientationLandscapeRight + + XSAppIconAssets + Assets.xcassets/appicon.appiconset + + diff --git a/TabViewSample/TabViewSample/Platforms/iOS/Program.cs b/TabViewSample/TabViewSample/Platforms/iOS/Program.cs new file mode 100644 index 0000000..d898aaf --- /dev/null +++ b/TabViewSample/TabViewSample/Platforms/iOS/Program.cs @@ -0,0 +1,16 @@ +using ObjCRuntime; +using UIKit; + +namespace TabViewSample +{ + public class Program + { + // This is the main entry point of the application. + static void Main(string[] args) + { + // if you want to use a different Application Delegate class from "AppDelegate" + // you can specify it here. + UIApplication.Main(args, null, typeof(AppDelegate)); + } + } +} diff --git a/TabViewSample/TabViewSample/Properties/launchSettings.json b/TabViewSample/TabViewSample/Properties/launchSettings.json new file mode 100644 index 0000000..edf8aad --- /dev/null +++ b/TabViewSample/TabViewSample/Properties/launchSettings.json @@ -0,0 +1,8 @@ +{ + "profiles": { + "Windows Machine": { + "commandName": "MsixPackage", + "nativeDebugging": false + } + } +} \ No newline at end of file diff --git a/TabViewSample/TabViewSample/Resources/AppIcon/appicon.svg b/TabViewSample/TabViewSample/Resources/AppIcon/appicon.svg new file mode 100644 index 0000000..9d63b65 --- /dev/null +++ b/TabViewSample/TabViewSample/Resources/AppIcon/appicon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/TabViewSample/TabViewSample/Resources/AppIcon/appiconfg.svg b/TabViewSample/TabViewSample/Resources/AppIcon/appiconfg.svg new file mode 100644 index 0000000..21dfb25 --- /dev/null +++ b/TabViewSample/TabViewSample/Resources/AppIcon/appiconfg.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/TabViewSample/TabViewSample/Resources/Fonts/OpenSans-Regular.ttf b/TabViewSample/TabViewSample/Resources/Fonts/OpenSans-Regular.ttf new file mode 100644 index 0000000..9ab655d Binary files /dev/null and b/TabViewSample/TabViewSample/Resources/Fonts/OpenSans-Regular.ttf differ diff --git a/TabViewSample/TabViewSample/Resources/Fonts/OpenSans-Semibold.ttf b/TabViewSample/TabViewSample/Resources/Fonts/OpenSans-Semibold.ttf new file mode 100644 index 0000000..2b7468e Binary files /dev/null and b/TabViewSample/TabViewSample/Resources/Fonts/OpenSans-Semibold.ttf differ diff --git a/TabViewSample/TabViewSample/Resources/Images/dotnet_bot.png b/TabViewSample/TabViewSample/Resources/Images/dotnet_bot.png new file mode 100644 index 0000000..f93ce02 Binary files /dev/null and b/TabViewSample/TabViewSample/Resources/Images/dotnet_bot.png differ diff --git a/TabViewSample/TabViewSample/Resources/Raw/AboutAssets.txt b/TabViewSample/TabViewSample/Resources/Raw/AboutAssets.txt new file mode 100644 index 0000000..15d6244 --- /dev/null +++ b/TabViewSample/TabViewSample/Resources/Raw/AboutAssets.txt @@ -0,0 +1,15 @@ +Any raw assets you want to be deployed with your application can be placed in +this directory (and child directories). Deployment of the asset to your application +is automatically handled by the following `MauiAsset` Build Action within your `.csproj`. + + + +These files will be deployed with you package and will be accessible using Essentials: + + async Task LoadMauiAsset() + { + using var stream = await FileSystem.OpenAppPackageFileAsync("AboutAssets.txt"); + using var reader = new StreamReader(stream); + + var contents = reader.ReadToEnd(); + } diff --git a/TabViewSample/TabViewSample/Resources/Splash/splash.svg b/TabViewSample/TabViewSample/Resources/Splash/splash.svg new file mode 100644 index 0000000..21dfb25 --- /dev/null +++ b/TabViewSample/TabViewSample/Resources/Splash/splash.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/TabViewSample/TabViewSample/Resources/Styles/Colors.xaml b/TabViewSample/TabViewSample/Resources/Styles/Colors.xaml new file mode 100644 index 0000000..30307a5 --- /dev/null +++ b/TabViewSample/TabViewSample/Resources/Styles/Colors.xaml @@ -0,0 +1,45 @@ + + + + + + + #512BD4 + #ac99ea + #242424 + #DFD8F7 + #9880e5 + #2B0B98 + + White + Black + #D600AA + #190649 + #1f1f1f + + #E1E1E1 + #C8C8C8 + #ACACAC + #919191 + #6E6E6E + #404040 + #212121 + #141414 + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/TabViewSample/TabViewSample/Resources/Styles/Styles.xaml b/TabViewSample/TabViewSample/Resources/Styles/Styles.xaml new file mode 100644 index 0000000..e0d36bb --- /dev/null +++ b/TabViewSample/TabViewSample/Resources/Styles/Styles.xaml @@ -0,0 +1,426 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/TabViewSample/TabViewSample/TabViewSample.csproj b/TabViewSample/TabViewSample/TabViewSample.csproj new file mode 100644 index 0000000..e675b28 --- /dev/null +++ b/TabViewSample/TabViewSample/TabViewSample.csproj @@ -0,0 +1,67 @@ + + + + net9.0-android;net9.0-ios;net9.0-maccatalyst + $(TargetFrameworks);net9.0-windows10.0.19041.0 + + + + + + + Exe + TabViewSample + true + true + enable + enable + + + TabViewSample + + + com.companyname.tabviewsample + + + 1.0 + 1 + + 11.0 + 13.1 + 21.0 + 10.0.17763.0 + 10.0.17763.0 + 6.5 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/TabViewSample/TabViewSample/ViewModel/MainPageViewModel.cs b/TabViewSample/TabViewSample/ViewModel/MainPageViewModel.cs new file mode 100644 index 0000000..49f08ef --- /dev/null +++ b/TabViewSample/TabViewSample/ViewModel/MainPageViewModel.cs @@ -0,0 +1,70 @@ +using Syncfusion.Maui.TabView; +using System.Collections.ObjectModel; +using System.ComponentModel; + +namespace TabViewSample +{ + public class MainPageViewModel : INotifyPropertyChanged + { + public event PropertyChangedEventHandler? PropertyChanged; + + protected void OnPropertyChanged(string? propertyName) + { + var handler = PropertyChanged; + if (handler != null) + handler(this, new PropertyChangedEventArgs(propertyName)); + } + + private ObservableCollection? tabItems; + public ObservableCollection? TabItems + { + get { return tabItems; } + set + { + tabItems = value; + OnPropertyChanged("TabItems"); + } + } + private Command? selectionChangedCommand; + public Command? SelectionChangedCommand + { + get { return selectionChangedCommand; } + set + { + selectionChangedCommand = value; + OnPropertyChanged("SelectionChangedCommand"); + } + } + public MainPageViewModel() + { + TabItems = new ObservableCollection(); + TabItems.Add(new Model() { Name = "Alexandar", TextColor = Colors.Red }); + TabItems.Add(new Model() { Name = "Gabriella", TextColor = Colors.Black }); + TabItems.Add(new Model() { Name = "Clara", TextColor = Colors.Black }); + TabItems.Add(new Model() { Name = "Tye", TextColor = Colors.Black }); + TabItems.Add(new Model() { Name = "Nora", TextColor = Colors.Black }); + TabItems.Add(new Model() { Name = "Sebastian", TextColor = Colors.Black }); + SelectionChangedCommand = new Command(ExecuteSelectionChangedCommand); + } + + public void ExecuteSelectionChangedCommand(object obj) + { + if (obj is SfTabView tabItem) + { + if (TabItems != null) + { + // Ensure the selected index is within the valid range + if (tabItem.SelectedIndex >= 0 && tabItem.SelectedIndex < TabItems.Count) + { + for (int i = 0; i < TabItems.Count; i++) + { + // Set TextColor for selected tab to red, others to black + TabItems[i].TextColor = (i == (int)tabItem.SelectedIndex) ? Colors.Red : Colors.Black; + } + } + } + } + } + + } +}