1008180-Added Sample for KB

README.md

@@ -1,2 +1,54 @@
-# Build-TimePicker-using-the-.NET-MAUI-Picker
-This demo shows how to build a TimePicker using the .NET MAUI Picker (SfPicker)
+# How to build a TimePicker using the .NET MAUI Picker (SfPicker)
+
+This repository contains a sample that demonstrates how to build timepicker control using the [SfPicker](https://help.syncfusion.com/maui/picker/getting-started) control.
+
+Please refer the KB through this [link](https://support.syncfusion.com/agent/kb/23199).
+
+## Syncfusion controls
+
+This project used the following Syncfusion control(s):
+* [Syncfusion .NET MAUI SfPicker](https://www.syncfusion.com/maui-controls/maui-picker)
+
+## Supported platforms
+
+.NET Multi-platform App UI (.NET MAUI) apps can be written for the following platforms:
+
+* Android 5.0 (API 21) or higher.
+* iOS 10 or higher.
+* macOS 10.13 or higher, using Mac Catalyst.
+* Windows 11 and Windows 10 version 1809 or higher, using [Windows UI Library (WinUI) 3](https://learn.microsoft.com/en-us/windows/apps/winui/winui3/).
+
+## Requirements to run the sample
+
+* [Visual Studio 2022](https://learn.microsoft.com/en-us/visualstudio/releases/2022/release-notes-preview) Version 17.13 or later (e.g., 17.14.7) for .NET 9 development
+* [Visual Studio 2026](https://learn.microsoft.com/en-us/visualstudio/releases/2026/release-notes) Required for .NET 10 development.
+
+Refer to the following link for more details: [System Requirements](https://help.syncfusion.com/maui/system-requirements)
+
+## How to run the sample
+
+1. Clone the sample and open it in Visual Studio 2026.
+
+   *Note: If you download the sample using the "Download ZIP" option, right-click it, select Properties, and then select Unblock.*
+
+2. Register your license key in the App.cs file as demonstrated in the following code.
+
+		public App()
+		{
+			//Register Syncfusion license
+			Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
+
+			InitializeComponent();
+
+			MainPage = new MainPage();
+		}
+
+	Refer to this [link](https://help.syncfusion.com/maui/licensing/overview) for more details.
+
+3. Clean and build the application.
+
+4. Run the application.
+
+## License
+
+Syncfusion® has no liability for any damage or consequence that may arise from using or viewing the samples. The samples are for demonstrative purposes. If you choose to use or access the samples, you agree to not hold Syncfusion® liable, in any form, for any damage related to use, for accessing, or viewing the samples. By accessing, viewing, or seeing the samples, you acknowledge and agree Syncfusion’s samples will not allow you seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize, or otherwise do anything with Syncfusion’s samples.

TimePickerSample/TimePickerSample.slnx

@@ -0,0 +1,3 @@
+<Solution>
+  <Project Path="TimePickerSample/TimePickerSample.csproj" />
+</Solution>

TimePickerSample/TimePickerSample/App.xaml

@@ -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:TimePickerSample"
+             x:Class="TimePickerSample.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

TimePickerSample/TimePickerSample/App.xaml.cs

@@ -0,0 +1,17 @@
+using Microsoft.Extensions.DependencyInjection;
+
+namespace TimePickerSample
+{
+    public partial class App : Application
+    {
+        public App()
+        {
+            InitializeComponent();
+        }
+
+        protected override Window CreateWindow(IActivationState? activationState)
+        {
+            return new Window(new MainPage());
+        }
+    }
+}

TimePickerSample/TimePickerSample/Control/CustomTimePicker.cs

@@ -0,0 +1,88 @@
+using Syncfusion.Maui.Picker;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Text;
+
+namespace TimePickerSample.Control
+{
+    public class CustomTimePicker : SfPicker
+    {
+
+        //Minute is the collection of minute numbers
+
+        public PickerColumn Minute;
+
+        //Hour is the collection of hour numbers
+
+        public PickerColumn Hour;
+
+        //Format is the collection of AM and PM
+
+        public PickerColumn Format;
+
+        private ObservableCollection<string> hours, minutes, formats;
+
+        public CustomTimePicker()
+        {
+            Hour = new PickerColumn();
+            Minute = new PickerColumn();
+            Format = new PickerColumn();
+            hours = new ObservableCollection<string>();
+            minutes = new ObservableCollection<string>();
+            formats = new ObservableCollection<string>();
+
+
+            PopulateTimeCollection();
+            this.Columns.Add(Hour);
+            this.Columns.Add(Minute);
+            this.Columns.Add(Format);
+
+            this.ColumnHeaderView.Height = 40;
+            this.FooterView.Height = 40;
+            this.FooterView.ShowOkButton = true;
+            this.HeaderView.Height = 40;
+            this.HeaderView.Text = "Select Time";
+
+            this.ColumnHeaderView.TextStyle.TextColor = Color.FromArgb("#6750A4");
+            this.ColumnHeaderView.DividerColor = Color.FromArgb("#6750A4");
+            this.FooterView.DividerColor = Color.FromArgb("#6750A4");
+            this.HeaderView.TextStyle.TextColor = Color.FromArgb("#6750A4");
+            this.TextStyle.TextColor = Color.FromArgb("#6750A4");
+            this.ColumnDividerColor = Colors.Transparent;
+            this.HeaderView.DividerColor = Color.FromArgb("#6750A4");
+        }
+
+        private void PopulateTimeCollection()
+        {
+            //Populate Hour
+            for (int i = 1; i <= 12; i++)
+            {
+                hours.Add(i.ToString());
+            }
+
+            //Populate Minute
+            for (int j = 0; j < 60; j++)
+            {
+                if (j < 10)
+                {
+                    minutes.Add("0" + j);
+                }
+                else
+                    minutes.Add(j.ToString());
+            }
+
+            //Populate Format
+            formats.Add("AM");
+            formats.Add("PM");
+
+            Hour.ItemsSource = hours;
+            Minute.ItemsSource = minutes;
+            Format.ItemsSource = formats;
+
+            Hour.HeaderText = "Hour";
+            Minute.HeaderText = "Minute";
+        }
+
+    }
+}

TimePickerSample/TimePickerSample/MainPage.xaml

@@ -0,0 +1,17 @@
+<?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:time="clr-namespace:TimePickerSample.Control"
+             x:Class="TimePickerSample.MainPage">
+    <Border Stroke="#6750A4"
+            Grid.Row="1"
+            HeightRequest="300"
+            WidthRequest="300"
+            StrokeThickness="1">
+        <Border.StrokeShape>
+            <RoundRectangle CornerRadius="20"/>
+        </Border.StrokeShape>
+        <time:CustomTimePicker/>
+    </Border>
+
+</ContentPage>

TimePickerSample/TimePickerSample/MainPage.xaml.cs

@@ -0,0 +1,11 @@
+namespace TimePickerSample
+{
+    public partial class MainPage : ContentPage
+    {
+
+        public MainPage()
+        {
+            InitializeComponent();
+        }
+    }
+}

TimePickerSample/TimePickerSample/MauiProgram.cs

@@ -0,0 +1,27 @@
+using Microsoft.Extensions.Logging;
+using Syncfusion.Maui.Core.Hosting;
+
+namespace TimePickerSample
+{
+    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();
+        }
+    }
+}

TimePickerSample/TimePickerSample/Platforms/Android/AndroidManifest.xml

@@ -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>

TimePickerSample/TimePickerSample/Platforms/Android/MainActivity.cs

@@ -0,0 +1,11 @@
+using Android.App;
+using Android.Content.PM;
+using Android.OS;
+
+namespace TimePickerSample
+{
+    [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
+    {
+    }
+}

TimePickerSample/TimePickerSample/Platforms/Android/MainApplication.cs

@@ -0,0 +1,16 @@
+using Android.App;
+using Android.Runtime;
+
+namespace TimePickerSample
+{
+    [Application]
+    public class MainApplication : MauiApplication
+    {
+        public MainApplication(IntPtr handle, JniHandleOwnership ownership)
+            : base(handle, ownership)
+        {
+        }
+
+        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+    }
+}

TimePickerSample/TimePickerSample/Platforms/Android/Resources/values/colors.xml

@@ -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>

TimePickerSample/TimePickerSample/Platforms/MacCatalyst/AppDelegate.cs

@@ -0,0 +1,10 @@
+using Foundation;
+
+namespace TimePickerSample
+{
+    [Register("AppDelegate")]
+    public class AppDelegate : MauiUIApplicationDelegate
+    {
+        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+    }
+}

TimePickerSample/TimePickerSample/Platforms/MacCatalyst/Entitlements.plist

@@ -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>
+

TimePickerSample/TimePickerSample/Platforms/MacCatalyst/Info.plist

@@ -0,0 +1,40 @@
+<?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">
+<dict>
+    <!-- The Mac App Store requires you specify if the app uses encryption. -->
+    <!-- Please consult https://developer.apple.com/documentation/bundleresources/information_property_list/itsappusesnonexemptencryption -->
+    <!-- <key>ITSAppUsesNonExemptEncryption</key> -->
+    <!-- Please indicate <true/> or <false/> here. -->
+
+    <!-- Specify the category for your app here. -->
+    <!-- Please consult https://developer.apple.com/documentation/bundleresources/information_property_list/lsapplicationcategorytype -->
+    <!-- <key>LSApplicationCategoryType</key> -->
+    <!-- <string>public.app-category.YOUR-CATEGORY-HERE</string> -->
+	<key>UIDeviceFamily</key>
+	<array>
+		<integer>2</integer>
+	</array>
+	<key>LSApplicationCategoryType</key>
+	<string>public.app-category.lifestyle</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>arm64</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>XSAppIconAssets</key>
+	<string>Assets.xcassets/appicon.appiconset</string>
+</dict>
+</plist>

TimePickerSample/TimePickerSample/Platforms/MacCatalyst/Program.cs

@@ -0,0 +1,16 @@
+using ObjCRuntime;
+using UIKit;
+
+namespace TimePickerSample
+{
+    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));
+        }
+    }
+}

TimePickerSample/TimePickerSample/Platforms/Windows/App.xaml

@@ -0,0 +1,8 @@
+<maui:MauiWinUIApplication
+    x:Class="TimePickerSample.WinUI.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:maui="using:Microsoft.Maui"
+    xmlns:local="using:TimePickerSample.WinUI">
+
+</maui:MauiWinUIApplication>