v20.3.0.47

README.md

@@ -228,4 +228,4 @@ Syncfusion has no liability for any damage or consequence that may arise by the
 
 * Contact our sales team at <salessupport@syncfusion.com>.
 
-<p>Copyright © 2001-2022 Syncfusion, Inc. Updated on 2022-08-08 at precisely 16:23:21 EST.</p> 
+<p>Copyright © 2001-2022 Syncfusion, Inc. Updated on 2022-09-29 at precisely 19:28:11 EST.</p> 

barcode/App.xaml

@@ -0,0 +1,15 @@
+<Application
+    x:Class="Syncfusion.BarcodeDemos.WinUI.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Syncfusion.BarcodeDemos.WinUI">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+                <!-- Other merged dictionaries here -->
+            </ResourceDictionary.MergedDictionaries>
+             <!-- Other app resources here -->
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

barcode/App.xaml.cs

@@ -0,0 +1,160 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.ApplicationModel;
+using Windows.ApplicationModel.Activation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.ApplicationModel.Core;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace Syncfusion.BarcodeDemos.WinUI
+{
+    /// <summary>
+    /// Provides application-specific behavior to supplement the default Application class.
+    /// </summary>
+    sealed partial class App : Application
+    {
+        /// <summary>
+        /// 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().
+        /// </summary>
+        public App()
+        {
+            this.InitializeComponent();
+#if !WinUI_Desktop
+            this.Suspending += OnSuspending;
+#endif
+        }
+
+        /// <summary>
+        /// Invoked when the application is launched normally by the end user.  Other entry points
+        /// will be used such as when the application is launched to open a specific file.
+        /// </summary>
+        /// <param name="e">Details about the launch request and process.</param>
+        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs e)
+        {
+#if WinUI_Desktop
+            m_window = new MainWindow();
+            m_window.Activate();
+            Frame rootFrame = m_window.Content as Frame;
+
+
+            // Do not repeat app initialization when the Window already has content,
+            // just ensure that the window is active
+            if (rootFrame == null)
+            {
+                // Create a Frame to act as the navigation context and navigate to the first page
+                rootFrame = new Frame();
+
+                // rootFrame.NavigationFailed += OnNavigationFailed;
+
+                if (e != null && e.UWPLaunchActivatedEventArgs.PreviousExecutionState == ApplicationExecutionState.Terminated)
+                {
+                    //TODO: Load state from previously suspended application
+                }
+
+                // Place the frame in the current Window
+                m_window.Content = rootFrame;
+            }
+
+            //  if (args != null && args.UWPLaunchActivatedEventArgs.PrelaunchActivated == false)
+            {
+#pragma warning disable CA1806 // Do not ignore method results
+                new SamplesConfiguration();
+#pragma warning restore CA1806 // Do not ignore method results
+                if (rootFrame.Content == null)
+                {
+                    // When the navigation stack isn't restored navigate to the first page,
+                    // configuring the new page by passing required information as a navigation
+                    // parameter
+                    rootFrame.Navigate(typeof(DemosCommon.WinUI.MainPage), e.Arguments);
+                }
+                // Ensure the current window is active
+                m_window.Activate();
+            }
+#else
+            CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
+            Frame rootFrame = Window.Current.Content as Frame;
+
+            // Do not repeat app initialization when the Window already has content,
+            // just ensure that the window is active
+            if (rootFrame == null)
+            {
+                // Create a Frame to act as the navigation context and navigate to the first page
+                rootFrame = new Frame();
+
+                rootFrame.NavigationFailed += OnNavigationFailed;
+
+                if (e.UWPLaunchActivatedEventArgs.PreviousExecutionState == ApplicationExecutionState.Terminated)
+                {
+                    //TODO: Load state from previously suspended application
+                }
+
+                // Place the frame in the current Window
+                Window.Current.Content = rootFrame;
+            }
+
+            if (e.UWPLaunchActivatedEventArgs.PrelaunchActivated == false)
+            {
+                new SamplesConfiguration();
+                if (rootFrame.Content == null)
+                {
+                    // When the navigation stack isn't restored navigate to the first page,
+                    // configuring the new page by passing required information as a navigation
+                    // parameter
+                    rootFrame.Navigate(typeof(demoscommon.winui.MainPage), e.Arguments);
+                }
+                // Ensure the current window is active
+                Window.Current.Activate();
+            }
+#endif
+        }
+
+        /// <summary>
+        /// Invoked when Navigation to a certain page fails
+        /// </summary>
+        /// <param name="sender">The Frame which failed navigation</param>
+        /// <param name="e">Details about the navigation failure</param>
+        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
+        {
+            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
+        }
+
+#if !WinUI_Desktop
+        /// <summary>
+        /// Invoked when application execution is being suspended.  Application state is saved
+        /// without knowing whether the application will be terminated or resumed with the contents
+        /// of memory still intact.
+        /// </summary>
+        /// <param name="sender">The source of the suspend request.</param>
+        /// <param name="e">Details about the suspend request.</param>
+        private void OnSuspending(object sender, SuspendingEventArgs e)
+        {
+            var deferral = e.SuspendingOperation.GetDeferral();
+            //TODO: Save application state and stop any background activity
+            deferral.Complete();
+        }
+#else
+        private MainWindow m_window;
+#endif
+    }
+}

barcode/MainWindow.xaml

@@ -0,0 +1,11 @@
+<Window
+    x:Class="Syncfusion.BarcodeDemos.WinUI.MainWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Syncfusion.BarcodeDemos.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+ <Frame/>
+</Window>

barcode/MainWindow.xaml.cs

@@ -0,0 +1,39 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace Syncfusion.BarcodeDemos.WinUI
+{
+    /// <summary>
+    /// An empty window that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class MainWindow : Window
+    {
+        public MainWindow()
+        {
+            this.InitializeComponent();
+			this.Title = "Syncfusion Barcode Controls Gallery for WinUI Desktop";             
+        }
+    }
+}

barcode/Model/BarcodeModel.cs

@@ -0,0 +1,24 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Syncfusion.BarcodeDemos.WinUI
+{
+    public class BarcodeModel
+    {
+#region Properties
+        public string SymobologyItem { get; set; }
+
+        public string DataMatrixEncoding { get; set; }
+#endregion
+    }
+}

barcode/Package.appxmanifest

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<Package
+  xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
+  xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
+  xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
+  IgnorableNamespaces="uap rescap">
+
+  <Identity
+    Name="70f1797c-f284-46ac-9978-12e17a9f2245"
+    Publisher="CN=Syncfusion"
+    Version="1.0.0.0" />
+
+  <Properties>
+    <DisplayName>Syncfusion WinUI Barcode Control Gallery</DisplayName>
+    <PublisherDisplayName>Syncfusion</PublisherDisplayName>
+    <Logo>Assets\StoreLogo.png</Logo>
+  </Properties>
+
+  <Dependencies>
+    <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.0.0" MaxVersionTested="10.0.0.0" />
+    <TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.14393.0" MaxVersionTested="10.0.14393.0" />
+  </Dependencies>
+
+  <Resources>
+    <Resource Language="x-generate"/>
+  </Resources>
+
+  <Applications>
+    <Application Id="App"
+      Executable="$targetnametoken$.exe"
+      EntryPoint="$targetentrypoint$">
+      <uap:VisualElements
+        DisplayName="Syncfusion WinUI Barcode Control Gallery"
+        Description="Syncfusion WinUI Barcode Control Gallery"
+        BackgroundColor="transparent"
+        Square150x150Logo="Assets\Square150x150Logo.png"
+        Square44x44Logo="Assets\Square44x44Logo.png">
+        <uap:DefaultTile Wide310x150Logo="Assets\Wide310x150Logo.png" />
+        <uap:SplashScreen Image="Assets\SplashScreen.png" />
+      </uap:VisualElements>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <Capability Name="internetClient" />
+    <rescap:Capability Name="runFullTrust" />
+  </Capabilities>
+</Package>

barcode/Properties/AssemblyInfo.cs

@@ -0,0 +1,36 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System.Reflection;
+using System.Runtime.CompilerServices;
+using System.Runtime.InteropServices;
+
+// General Information about an assembly is controlled through the following 
+// set of attributes. Change these attribute values to modify the information
+// associated with an assembly.
+[assembly: AssemblyTitle("Syncfusion.BarcodeDemos.WinUI")]
+[assembly: AssemblyDescription("")]
+[assembly: AssemblyConfiguration("")]
+[assembly: AssemblyCompany("Syncfusion Inc.")]
+[assembly: AssemblyProduct("Syncfusion.BarcodeDemos.WinUI")]
+[assembly: AssemblyCopyright("Copyright © 2001-2022 Syncfusion Inc.")]
+[assembly: AssemblyTrademark("")]
+[assembly: AssemblyCulture("")]
+
+// Version information for an assembly consists of the following four values:
+//
+//      Major Version
+//      Minor Version 
+//      Build Number
+//      Revision
+//
+// You can specify all the values or you can default the Build and Revision Numbers 
+// by using the '*' as shown below:
+// [assembly: AssemblyVersion("1.0.*")]
+[assembly: AssemblyVersion("20.3300.0.47")]
+[assembly: AssemblyFileVersion("1.0.0.0")]
+[assembly: ComVisible(false)]

barcode/Properties/Default.rd.xml

@@ -0,0 +1,31 @@
+<!--
+    This file contains Runtime Directives used by .NET Native. The defaults here are suitable for most
+    developers. However, you can modify these parameters to modify the behavior of the .NET Native
+    optimizer.
+
+    Runtime Directives are documented at https://go.microsoft.com/fwlink/?LinkID=391919
+
+    To fully enable reflection for App1.MyClass and all of its public/private members
+    <Type Name="App1.MyClass" Dynamic="Required All"/>
+
+    To enable dynamic creation of the specific instantiation of AppClass<T> over System.Int32
+    <TypeInstantiation Name="App1.AppClass" Arguments="System.Int32" Activate="Required Public" />
+
+    Using the Namespace directive to apply reflection policy to all the types in a particular namespace
+    <Namespace Name="DataClasses.ViewModels" Serialize="All" />
+-->
+
+<Directives xmlns="http://schemas.microsoft.com/netfx/2013/01/metadata">
+  <Application>
+    <!--
+      An Assembly element with Name="*Application*" applies to all assemblies in
+      the application package. The asterisks are not wildcards.
+    -->
+    <Assembly Name="*Application*" Dynamic="Required All" />
+    
+    
+    <!-- Add your application specific runtime directives here. -->
+
+
+  </Application>
+</Directives>

barcode/Properties/PublishProfiles/win10-arm64.pubxml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121.
+-->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PublishProtocol>FileSystem</PublishProtocol>
+    <Platform>arm64</Platform>
+    <RuntimeIdentifier>win10-arm64</RuntimeIdentifier>
+    <PublishDir>bin\$(Configuration)\$(TargetFramework)\$(RuntimeIdentifier)\publish\</PublishDir>
+    <SelfContained>true</SelfContained>
+    <PublishSingleFile>False</PublishSingleFile>
+    <PublishReadyToRun Condition="'$(Configuration)' == 'Debug'">False</PublishReadyToRun>
+    <PublishReadyToRun Condition="'$(Configuration)' != 'Debug'">True</PublishReadyToRun>
+   <!-- 
+    See https://github.com/microsoft/CsWinRT/issues/373
+    <PublishTrimmed>True</PublishTrimmed>
+    -->
+  </PropertyGroup>
+</Project>

barcode/Properties/PublishProfiles/win10-x64.pubxml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121.
+-->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PublishProtocol>FileSystem</PublishProtocol>
+    <Platform>x64</Platform>
+    <RuntimeIdentifier>win10-x64</RuntimeIdentifier>
+    <PublishDir>bin\$(Configuration)\$(TargetFramework)\$(RuntimeIdentifier)\publish\</PublishDir>
+    <SelfContained>true</SelfContained>
+    <PublishSingleFile>False</PublishSingleFile>
+    <PublishReadyToRun Condition="'$(Configuration)' == 'Debug'">False</PublishReadyToRun>
+    <PublishReadyToRun Condition="'$(Configuration)' != 'Debug'">True</PublishReadyToRun>
+   <!-- 
+    See https://github.com/microsoft/CsWinRT/issues/373
+    <PublishTrimmed>True</PublishTrimmed>
+    -->
+  </PropertyGroup>
+</Project>

barcode/Properties/PublishProfiles/win10-x86.pubxml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121.
+-->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PublishProtocol>FileSystem</PublishProtocol>
+    <Platform>x86</Platform>
+    <RuntimeIdentifier>win10-x86</RuntimeIdentifier>
+    <PublishDir>bin\$(Configuration)\$(TargetFramework)\$(RuntimeIdentifier)\publish\</PublishDir>
+    <SelfContained>true</SelfContained>
+    <PublishSingleFile>False</PublishSingleFile>
+    <PublishReadyToRun Condition="'$(Configuration)' == 'Debug'">False</PublishReadyToRun>
+    <PublishReadyToRun Condition="'$(Configuration)' != 'Debug'">True</PublishReadyToRun>
+   <!-- 
+    See https://github.com/microsoft/CsWinRT/issues/373
+    <PublishTrimmed>True</PublishTrimmed>
+    -->
+  </PropertyGroup>
+</Project>

barcode/Properties/launchSettings.json

@@ -0,0 +1,7 @@
+{
+  "profiles": {
+    "Syncfusion.BarcodeDemos.WinUI": {
+      "commandName": "MsixPackage"
+    }
+  }
+}

barcode/SamplesConfiguration.cs

@@ -0,0 +1,60 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using Syncfusion.DemosCommon.WinUI;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Syncfusion.BarcodeDemos.WinUI
+{
+    public class SamplesConfiguration
+    {
+        public SamplesConfiguration()
+        {
+            // Showcase & Updated
+
+            // Showcase & New
+
+            //What's New
+
+            DemoInfo showCaseSample1 = new DemoInfo()
+            {
+                Name = "Getting Started",
+                Category = "Getting Started",
+                Description = "This sample showcases how to display data in the encoded machine-readable format using supported symbol types either in a one-dimensional or two-dimensional pattern.",
+                DemoType = DemoTypes.None,
+                DemoView = typeof(Views.BarcodeDemoPage)
+            };
+            showCaseSample1.Documentation.AddRange(new List<Documentation>()
+                { new Documentation() { Content = "Barcode - API", Uri = new Uri("https://help.syncfusion.com"), } });
+
+            // Updated
+
+            var demos = new List<DemoInfo>()
+            {
+                showCaseSample1
+            };
+
+            var controlInfo = new ControlInfo()
+            {
+                Control = DemoControl.Barcode,
+                Description = "The Barcode is a data visualization control to generate and display data in a machine-readable format using supported symbol types.",
+                Glyph = "\uE709",
+                ImageSource= "Barcode.png",
+                ControlBadge = ControlBadge.None,
+                ControlCategory = ControlCategory.DataVisualization
+            };
+
+            controlInfo.Demos.AddRange(demos);
+            DemoHelper.ControlInfos.Add(controlInfo);
+        }
+
+    }
+}

barcode/Syncfusion.BarcodeDemos.WinUI_Net50.csproj

@@ -0,0 +1,98 @@
+<Project Sdk="Microsoft.NET.Sdk">
+	<Import Project="..\syncfusion.common.desktop.props"/>
+	<PropertyGroup>
+		<OutputType>WinExe</OutputType>
+		<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+		<EnableDefaultCompileItems>false</EnableDefaultCompileItems>
+		<EnableDefaultPageItems>false</EnableDefaultPageItems>
+		<TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion>
+		<TargetFramework>net5.0-windows10.0.19041.0</TargetFramework>
+		<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
+		<AssemblyName>Syncfusion.BarcodeDemos.WinUI</AssemblyName>
+		<RootNamespace>Syncfusion.BarcodeDemos.WinUI</RootNamespace>
+		<ApplicationManifest>app.manifest</ApplicationManifest>
+		<Platforms>AnyCPU;x86;x64</Platforms>
+		<RuntimeIdentifiers>win-x86;win-x64</RuntimeIdentifiers>
+		<EnablePreviewMsixTooling>true</EnablePreviewMsixTooling>
+		<PublishProfile>Properties\PublishProfiles\win10-$(Platform).pubxml</PublishProfile>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI;WinUI_Desktop</DefineConstants>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x86'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x86\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<DebugType>full</DebugType>
+		<PlatformTarget>x86</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x86'">
+		<OutputPath>bin\x86\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<PlatformTarget>x86</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+		<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x64'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x64\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<DebugType>full</DebugType>
+		<PlatformTarget>x64</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x64'">
+		<OutputPath>bin\x64\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<PlatformTarget>x64</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+		<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
+	</PropertyGroup>
+	<ItemGroup>
+		<None Remove="Package.appxmanifest"/>
+		<None Remove="Properties\Default.rd.xml"/>
+		<None Remove="syncfusion.barcodedemos.winui_TemporaryKey.pfx"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Compile Include="App.xaml.cs">
+			<DependentUpon>App.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="MainWindow.xaml.cs">
+			<DependentUpon>MainWindow.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Model\BarcodeModel.cs"/>
+		<Compile Include="Properties\AssemblyInfo.cs"/>
+		<Compile Include="SamplesConfiguration.cs"/>
+		<Compile Include="ViewModel\BarcodeViewModel.cs"/>
+		<Compile Include="Views\BarcodeDemoPage.xaml.cs">
+			<DependentUpon>BarcodeDemoPage.xaml</DependentUpon>
+		</Compile>
+	</ItemGroup>
+	<ItemGroup>
+		<Page Include="MainWindow.xaml"/>
+		<Page Include="Views\BarcodeDemoPage.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+	</ItemGroup>
+	<ItemGroup>
+		<Manifest Include="$(ApplicationManifest)"/>
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Syncfusion.Barcode.WinUI" Version="20.3.0.47"/>
+	</ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\common\Syncfusion.DemosCommon.WinUI_lib_Net50.csproj"/>
+	</ItemGroup>
+</Project>

barcode/Syncfusion.BarcodeDemos.WinUI_Net50.sln

@@ -0,0 +1,73 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.30524.135
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.BarcodeDemos.WinUI_Net50", "Syncfusion.BarcodeDemos.WinUI_Net50.csproj", "{BBBFEA37-236C-45D0-B205-26E708E544A4}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.DemosCommon.WinUI_lib_Net50", "..\common\Syncfusion.DemosCommon.WinUI_lib_Net50.csproj", "{FF192628-A93D-437C-A926-9E6C3C1B0CE2}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Debug|x64 = Debug|x64
+		Debug|x86 = Debug|x86
+		Release|Any CPU = Release|Any CPU
+		Release|x64 = Release|x64
+		Release|x86 = Release|x86
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Debug|Any CPU.ActiveCfg = Debug|x86
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Debug|Any CPU.Build.0 = Debug|x86
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Debug|Any CPU.Deploy.0 = Debug|x86
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Debug|x64.ActiveCfg = Debug|x64
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Debug|x64.Build.0 = Debug|x64
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Debug|x64.Deploy.0 = Debug|x64
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Debug|x86.ActiveCfg = Debug|x86
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Debug|x86.Build.0 = Debug|x86
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Debug|x86.Deploy.0 = Debug|x86
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Release|Any CPU.ActiveCfg = Release|x86
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Release|x64.ActiveCfg = Release|x64
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Release|x64.Build.0 = Release|x64
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Release|x64.Deploy.0 = Release|x64
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Release|x86.ActiveCfg = Release|x86
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Release|x86.Build.0 = Release|x86
+		{0F15615D-3448-43F2-B0E3-FD204D76839C}.Release|x86.Deploy.0 = Release|x86
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Debug|Any CPU.ActiveCfg = Debug|x86
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Debug|Any CPU.Build.0 = Debug|x86
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Debug|x64.ActiveCfg = Debug|x64
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Debug|x64.Build.0 = Debug|x64
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Debug|x64.Deploy.0 = Debug|x64
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Debug|x86.ActiveCfg = Debug|x86
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Debug|x86.Build.0 = Debug|x86
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Debug|x86.Deploy.0 = Debug|x86
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Release|Any CPU.ActiveCfg = Release|x86
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Release|x64.ActiveCfg = Release|x64
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Release|x64.Build.0 = Release|x64
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Release|x64.Deploy.0 = Release|x64
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Release|x86.ActiveCfg = Release|x86
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Release|x86.Build.0 = Release|x86
+		{BBBFEA37-236C-45D0-B205-26E708E544A4}.Release|x86.Deploy.0 = Release|x86
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Debug|Any CPU.ActiveCfg = Debug|x86
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Debug|Any CPU.Build.0 = Debug|x86
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Debug|x64.ActiveCfg = Debug|x64
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Debug|x64.Build.0 = Debug|x64
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Debug|x64.Deploy.0 = Debug|x64
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Debug|x86.ActiveCfg = Debug|x86
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Debug|x86.Build.0 = Debug|x86
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Debug|x86.Deploy.0 = Debug|x86
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Release|Any CPU.ActiveCfg = Release|x86
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Release|x64.ActiveCfg = Release|x64
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Release|x64.Build.0 = Release|x64
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Release|x64.Deploy.0 = Release|x64
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Release|x86.ActiveCfg = Release|x86
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Release|x86.Build.0 = Release|x86
+		{FF192628-A93D-437C-A926-9E6C3C1B0CE2}.Release|x86.Deploy.0 = Release|x86
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {CFC9929D-1247-423A-BB9B-2370177C5D8C}
+	EndGlobalSection
+EndGlobal

barcode/Syncfusion.BarcodeDemos.WinUI_Net60.csproj

@@ -0,0 +1,98 @@
+<Project Sdk="Microsoft.NET.Sdk">
+	<Import Project="..\syncfusion.common.desktop.props"/>
+	<PropertyGroup>
+		<OutputType>WinExe</OutputType>
+		<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+		<EnableDefaultCompileItems>false</EnableDefaultCompileItems>
+		<EnableDefaultPageItems>false</EnableDefaultPageItems>
+		<TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion>
+		<TargetFramework>net6.0-windows10.0.19041.0</TargetFramework>
+		<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
+		<AssemblyName>Syncfusion.BarcodeDemos.WinUI</AssemblyName>
+		<RootNamespace>Syncfusion.BarcodeDemos.WinUI</RootNamespace>
+		<ApplicationManifest>app.manifest</ApplicationManifest>
+		<Platforms>AnyCPU;x86;x64</Platforms>
+		<RuntimeIdentifiers>win-x86;win-x64</RuntimeIdentifiers>
+		<EnablePreviewMsixTooling>true</EnablePreviewMsixTooling>
+		<PublishProfile>Properties\PublishProfiles\win10-$(Platform).pubxml</PublishProfile>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI;WinUI_Desktop</DefineConstants>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x86'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x86\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<DebugType>full</DebugType>
+		<PlatformTarget>x86</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x86'">
+		<OutputPath>bin\x86\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<PlatformTarget>x86</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+		<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x64'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x64\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<DebugType>full</DebugType>
+		<PlatformTarget>x64</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x64'">
+		<OutputPath>bin\x64\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<PlatformTarget>x64</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+		<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
+	</PropertyGroup>
+	<ItemGroup>
+		<None Remove="Package.appxmanifest"/>
+		<None Remove="Properties\Default.rd.xml"/>
+		<None Remove="syncfusion.barcodedemos.winui_TemporaryKey.pfx"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Compile Include="App.xaml.cs">
+			<DependentUpon>App.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="MainWindow.xaml.cs">
+			<DependentUpon>MainWindow.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Model\BarcodeModel.cs"/>
+		<Compile Include="Properties\AssemblyInfo.cs"/>
+		<Compile Include="SamplesConfiguration.cs"/>
+		<Compile Include="ViewModel\BarcodeViewModel.cs"/>
+		<Compile Include="Views\BarcodeDemoPage.xaml.cs">
+			<DependentUpon>BarcodeDemoPage.xaml</DependentUpon>
+		</Compile>
+	</ItemGroup>
+	<ItemGroup>
+		<Page Include="MainWindow.xaml"/>
+		<Page Include="Views\BarcodeDemoPage.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+	</ItemGroup>
+	<ItemGroup>
+		<Manifest Include="$(ApplicationManifest)"/>
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Syncfusion.Barcode.WinUI" Version="20.3.0.47"/>
+	</ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\common\Syncfusion.DemosCommon.WinUI_lib_Net60.csproj"/>
+	</ItemGroup>
+</Project>

barcode/Syncfusion.BarcodeDemos.WinUI_Net60.sln

@@ -0,0 +1,41 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.0.32126.317
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.BarcodeDemos.WinUI_Net60", "Syncfusion.BarcodeDemos.WinUI_Net60.csproj", "{86A26EA9-2975-41D6-B675-72DF4D96877A}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.DemosCommon.WinUI_lib_Net60", "..\common\Syncfusion.DemosCommon.WinUI_lib_Net60.csproj", "{47411333-4885-4A74-855C-26FF5F33DFF8}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|x64 = Debug|x64
+		Debug|x86 = Debug|x86
+		Release|x64 = Release|x64
+		Release|x86 = Release|x86
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{86A26EA9-2975-41D6-B675-72DF4D96877A}.Debug|x64.ActiveCfg = Debug|x64
+		{86A26EA9-2975-41D6-B675-72DF4D96877A}.Debug|x64.Build.0 = Debug|x64
+		{86A26EA9-2975-41D6-B675-72DF4D96877A}.Debug|x86.ActiveCfg = Debug|x86
+		{86A26EA9-2975-41D6-B675-72DF4D96877A}.Debug|x86.Build.0 = Debug|x86
+		{86A26EA9-2975-41D6-B675-72DF4D96877A}.Release|x64.ActiveCfg = Release|x64
+		{86A26EA9-2975-41D6-B675-72DF4D96877A}.Release|x64.Build.0 = Release|x64
+		{86A26EA9-2975-41D6-B675-72DF4D96877A}.Release|x86.ActiveCfg = Release|x86
+		{86A26EA9-2975-41D6-B675-72DF4D96877A}.Release|x86.Build.0 = Release|x86
+		{47411333-4885-4A74-855C-26FF5F33DFF8}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{47411333-4885-4A74-855C-26FF5F33DFF8}.Debug|x64.Build.0 = Debug|Any CPU
+		{47411333-4885-4A74-855C-26FF5F33DFF8}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{47411333-4885-4A74-855C-26FF5F33DFF8}.Debug|x86.Build.0 = Debug|Any CPU
+		{47411333-4885-4A74-855C-26FF5F33DFF8}.Release|x64.ActiveCfg = Release|Any CPU
+		{47411333-4885-4A74-855C-26FF5F33DFF8}.Release|x64.Build.0 = Release|Any CPU
+		{47411333-4885-4A74-855C-26FF5F33DFF8}.Release|x86.ActiveCfg = Release|Any CPU
+		{47411333-4885-4A74-855C-26FF5F33DFF8}.Release|x86.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {22A9DA21-AC5B-44E5-89B7-A3CD0E48ECAE}
+	EndGlobalSection
+EndGlobal

barcode/Syncfusion.BarcodeDemos.WinUI_lib_Net50.csproj

@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project Sdk="Microsoft.NET.Sdk">
+	<Import Project="..\syncfusion.common.desktop.props"/>
+	<PropertyGroup>
+		<TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion>
+		<TargetFramework>net5.0-windows10.0.19041.0</TargetFramework>
+		<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
+		<RootNamespace>syncfusion.barcodedemos.winui</RootNamespace>
+		<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+		<EnableDefaultCompileItems>false</EnableDefaultCompileItems>
+		<EnableDefaultPageItems>false</EnableDefaultPageItems>
+		<AssemblyName>syncfusion.barcodedemos.winui</AssemblyName>
+		<Platforms>AnyCPU;x86;x64</Platforms>
+		<RuntimeIdentifiers>win-x86;win-x64</RuntimeIdentifiers>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI;WinUI_Desktop</DefineConstants>
+		<UseWinUI>true</UseWinUI>
+	</PropertyGroup>
+	<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
+		<PlatformTarget>AnyCPU</PlatformTarget>
+		<DebugSymbols>true</DebugSymbols>
+		<DebugType>full</DebugType>
+		<Optimize>false</Optimize>
+		<OutputPath>bin\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<ErrorReport>prompt</ErrorReport>
+		<WarningLevel>4</WarningLevel>
+	</PropertyGroup>
+	<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
+		<PlatformTarget>AnyCPU</PlatformTarget>
+		<DebugType>pdbonly</DebugType>
+		<Optimize>true</Optimize>
+		<OutputPath>bin\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<ErrorReport>prompt</ErrorReport>
+		<WarningLevel>4</WarningLevel>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x86'">
+		<PlatformTarget>x86</PlatformTarget>
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x86\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<DebugType>full</DebugType>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x86'">
+		<PlatformTarget>x86</PlatformTarget>
+		<OutputPath>bin\x86\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x64'">
+		<PlatformTarget>x64</PlatformTarget>
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x64\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<DebugType>full</DebugType>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x64'">
+		<PlatformTarget>x64</PlatformTarget>
+		<OutputPath>bin\x64\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+	</PropertyGroup>
+	<ItemGroup>
+		<Content Remove="Assets\**"/>
+		<Content Remove="syncfusion.barcodedemos.winui_net50 %28Package%29\**"/>
+		<EmbeddedResource Remove="Assets\**"/>
+		<EmbeddedResource Remove="Properties\PublishProfiles\**"/>
+		<EmbeddedResource Remove="syncfusion.barcodedemos.winui_net50 %28Package%29\**"/>
+		<None Remove="Assets\**"/>
+		<None Remove="Properties\PublishProfiles\**"/>
+		<None Remove="syncfusion.barcodedemos.winui_net50 %28Package%29\**"/>
+		<PRIResource Remove="syncfusion.barcodedemos.winui_net50 %28Package%29\**"/>
+		<None Remove="app.manifest"/>
+		<None Remove="App.xaml"/>
+		<None Remove="MainWindow.xaml"/>
+		<None Remove="Package.appxmanifest"/>
+		<None Remove="Properties\Default.rd.xml"/>
+		<None Remove="syncfusion.barcodedemos.winui_TemporaryKey.pfx"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Compile Include="Model\BarcodeModel.cs"/>
+		<Compile Include="Properties\AssemblyInfo.cs"/>
+		<Compile Include="SamplesConfiguration.cs"/>
+		<Compile Include="ViewModel\BarcodeViewModel.cs"/>
+		<Compile Include="Views\BarcodeDemoPage.xaml.cs">
+			<DependentUpon>BarcodeDemoPage.xaml</DependentUpon>
+		</Compile>
+	</ItemGroup>
+	<ItemGroup>
+		<Page Include="Views\BarcodeDemoPage.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Syncfusion.Barcode.WinUI" Version="20.3.0.47"/>
+	</ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\common\Syncfusion.DemosCommon.WinUI_lib_Net50.csproj"/>
+	</ItemGroup>
+</Project>

barcode/Syncfusion.BarcodeDemos.WinUI_lib_Net50.sln

@@ -0,0 +1,37 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.30523.141
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.BarcodeDemos.WinUI_lib_Net50", "Syncfusion.BarcodeDemos.WinUI_lib_Net50.csproj", "{8F9943FA-AF0B-4DD4-B240-7408C43326C6}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Debug|x64 = Debug|x64
+		Debug|x86 = Debug|x86
+		Release|Any CPU = Release|Any CPU
+		Release|x64 = Release|x64
+		Release|x86 = Release|x86
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+	    {8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Debug|x64.ActiveCfg = Debug|x64
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Debug|x64.Build.0 = Debug|x64
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Debug|x86.ActiveCfg = Debug|x86
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Debug|x86.Build.0 = Debug|x86
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Release|Any CPU.Build.0 = Release|Any CPU
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Release|x64.ActiveCfg = Release|x64
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Release|x64.Build.0 = Release|x64
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Release|x86.ActiveCfg = Release|x86
+		{8F9943FA-AF0B-4DD4-B240-7408C43326C6}.Release|x86.Build.0 = Release|x86		
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {38E89E8B-5BA5-442B-9CEB-5A6080DCB243}
+	EndGlobalSection
+EndGlobal

barcode/Syncfusion.BarcodeDemos.WinUI_lib_Net60.csproj

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project Sdk="Microsoft.NET.Sdk">
+	<Import Project="..\syncfusion.common.desktop.props"/>
+	<PropertyGroup>
+		<TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion>
+		<TargetFramework>net6.0-windows10.0.19041.0</TargetFramework>
+		<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
+		<RootNamespace>syncfusion.barcodedemos.winui</RootNamespace>
+		<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+		<EnableDefaultCompileItems>false</EnableDefaultCompileItems>
+		<EnableDefaultPageItems>false</EnableDefaultPageItems>
+		<AssemblyName>syncfusion.barcodedemos.winui</AssemblyName>
+		<RuntimeIdentifiers>win-x86;win-x64</RuntimeIdentifiers>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI;WinUI_Desktop</DefineConstants>
+		<UseWinUI>true</UseWinUI>
+	</PropertyGroup>
+	<ItemGroup>
+		<Content Remove="Assets\**"/>
+		<Content Remove="syncfusion.barcodedemos.winui_net50 %28Package%29\**"/>
+		<EmbeddedResource Remove="Assets\**"/>
+		<EmbeddedResource Remove="Properties\PublishProfiles\**"/>
+		<EmbeddedResource Remove="syncfusion.barcodedemos.winui_net50 %28Package%29\**"/>
+		<None Remove="Assets\**"/>
+		<None Remove="Properties\PublishProfiles\**"/>
+		<None Remove="syncfusion.barcodedemos.winui_net50 %28Package%29\**"/>
+		<PRIResource Remove="syncfusion.barcodedemos.winui_net50 %28Package%29\**"/>
+		<None Remove="app.manifest"/>
+		<None Remove="App.xaml"/>
+		<None Remove="MainWindow.xaml"/>
+		<None Remove="Package.appxmanifest"/>
+		<None Remove="Properties\Default.rd.xml"/>
+		<None Remove="syncfusion.barcodedemos.winui_TemporaryKey.pfx"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Compile Include="Model\BarcodeModel.cs"/>
+		<Compile Include="Properties\AssemblyInfo.cs"/>
+		<Compile Include="SamplesConfiguration.cs"/>
+		<Compile Include="ViewModel\BarcodeViewModel.cs"/>
+		<Compile Include="Views\BarcodeDemoPage.xaml.cs">
+			<DependentUpon>BarcodeDemoPage.xaml</DependentUpon>
+		</Compile>
+	</ItemGroup>
+	<ItemGroup>
+		<Page Include="Views\BarcodeDemoPage.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Syncfusion.Barcode.WinUI" Version="20.3.0.47"/>
+	</ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\common\Syncfusion.DemosCommon.WinUI_lib_Net60.csproj"/>
+	</ItemGroup>
+</Project>

barcode/Syncfusion.BarcodeDemos.WinUI_lib_Net60.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.0.32014.148
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.BarcodeDemos.WinUI_lib_Net60", "Syncfusion.BarcodeDemos.WinUI_lib_Net60.csproj", "{09787A9E-0008-4AE2-BC03-E14D92B76BE9}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{09787A9E-0008-4AE2-BC03-E14D92B76BE9}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{09787A9E-0008-4AE2-BC03-E14D92B76BE9}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{09787A9E-0008-4AE2-BC03-E14D92B76BE9}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{09787A9E-0008-4AE2-BC03-E14D92B76BE9}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {C94A191B-A4D0-4FB1-A8D7-04E4323A264E}
+	EndGlobalSection
+EndGlobal

barcode/ViewModel/BarcodeViewModel.cs

@@ -0,0 +1,373 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Data;
+using Syncfusion.UI.Xaml.Barcode;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+#if WinUI_Desktop
+using System.ComponentModel;
+#else
+using System.ServiceModel.Channels;
+#endif
+using System.Text;
+using System.Text.RegularExpressions;
+using System.Threading.Tasks;
+
+namespace Syncfusion.BarcodeDemos.WinUI
+{
+    public class BarcodeViewModel : INotifyPropertyChanged
+    {
+#region Fields
+
+        private string code11BarcodeText = "1010111011";
+
+        private string validateCode11BarcodeText = "";
+
+        private string validateDataMatricBarcodeText = "";
+
+        private string dataMatrixSupportedChar = "[^A-Za-z0-9]";
+
+        private string dataMatrixBarcodeText = "Syncfusion";
+
+        private string qrBarcodeText = "Syncfusion";
+
+        private BarcodeModel selectedItem = new BarcodeModel();
+
+        private BarcodeBase symbologyItem = new CodabarBarcode();
+
+        private BarcodeModel encodingSelectedValue = new BarcodeModel();
+
+        private Visibility code11BarcodeVisibility = Visibility.Visible;
+
+        private Visibility dataMatrixBarcodeVisibility = Visibility.Visible;
+
+        public event PropertyChangedEventHandler PropertyChanged;
+#endregion
+
+#region Constructor
+        public BarcodeViewModel()
+        {
+            Symbology = new ObservableCollection<BarcodeModel>();
+            EncodingValues = new ObservableCollection<BarcodeModel>();
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "CodaBar" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "Code11" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "Code32" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "Code39" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "Code39Extended" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "Code93" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "Code93Extended" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "Code128A" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "Code128B" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "Code128C" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "UpcBarcode" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "GS1Code128Barcode" });
+            Symbology.Add(new BarcodeModel() { SymobologyItem = "Pdf417Barcode" });
+            EncodingValues.Add(new BarcodeModel() { DataMatrixEncoding = "Auto" });
+            EncodingValues.Add(new BarcodeModel() { DataMatrixEncoding = "ASCII" });
+            EncodingValues.Add(new BarcodeModel() { DataMatrixEncoding = "ASCIINumeric" });
+            EncodingValues.Add(new BarcodeModel() { DataMatrixEncoding = "Base256" });
+        }
+#endregion
+
+#region Properties
+
+        public ObservableCollection<BarcodeModel> Symbology { get; }
+
+        public ObservableCollection<BarcodeModel> EncodingValues { get; }
+
+        public BarcodeModel SelectedItem
+        {
+            get
+            {
+                return selectedItem;
+            }
+            set
+            {
+                selectedItem = value;
+                UpdateSymbology(selectedItem);
+                OnPropertyChanged("SelectedItem");
+            }
+        }
+
+
+        public BarcodeModel EncodingSelectedValue
+        {
+            get
+            {
+                return encodingSelectedValue;
+            }
+            set
+            {
+                encodingSelectedValue = value;
+                SelectedEncodingValue(encodingSelectedValue);
+            }
+        }
+
+        public BarcodeBase SymbologyItem
+        {
+            get
+            {
+                return symbologyItem;
+            }
+            set
+            {
+                symbologyItem = value;
+                OnPropertyChanged("SymbologyItem");
+            }
+        }
+
+        public string Code11BarcodeText
+        {
+            get
+            {
+                return code11BarcodeText;
+            }
+            set
+            {
+                code11BarcodeText = value;
+                ValidateCode11Barcode(code11BarcodeText);
+                OnPropertyChanged("Code11BarcodeText");
+            }
+        }
+
+        public string DataMatrixBarcodeText
+        {
+            get
+            {
+                return dataMatrixBarcodeText;
+            }
+            set
+            {
+                dataMatrixBarcodeText = value;
+                if (EncodingSelectedValue.DataMatrixEncoding == "ASCIINumeric")
+                    ValidateDataMatrixText(dataMatrixBarcodeText);
+                OnPropertyChanged("DataMatrixBarcodeText");
+            }
+        }        
+        
+        public string QRBarcodeText
+        {
+            get
+            {
+                return qrBarcodeText;
+            }
+            set
+            {
+                qrBarcodeText = value;
+                OnPropertyChanged("QRBarcodeText");
+            }
+        }
+
+        public string ValidateCode11BarcodeText
+        {
+            get
+            {
+                return validateCode11BarcodeText;
+            }
+            set
+            {
+                validateCode11BarcodeText = value;
+                OnPropertyChanged("ValidateCode11BarcodeText");
+            }
+        }
+
+
+        public string ValidateDataMatrixBarcodeText
+        {
+            get
+            {
+                return validateDataMatricBarcodeText;
+            }
+            set
+            {
+                validateDataMatricBarcodeText = value;
+                OnPropertyChanged("ValidateDataMatrixBarcodeText");
+            }
+        }
+
+        public string DataMatrixSupportedChar
+        {
+            get
+            {
+                return dataMatrixSupportedChar;
+            }
+            set
+            {
+                dataMatrixSupportedChar = value;
+                OnPropertyChanged("DataMatrixSupportedChar");
+            }
+        }
+
+        public Visibility Code11BarcodeVisibility
+        {
+            get
+            {
+                return code11BarcodeVisibility;
+            }
+            set
+            {
+                code11BarcodeVisibility = value;
+                OnPropertyChanged("Code11BarcodeVisibility");
+            }
+        }
+
+        public Visibility DataMatrixBarcodeVisibility
+        {
+            get
+            {
+                return dataMatrixBarcodeVisibility;
+            }
+            set
+            {
+                dataMatrixBarcodeVisibility = value;
+                OnPropertyChanged("DataMatrixBarcodeVisibility");
+            }
+        }
+#endregion
+
+#region Methods
+        private void UpdateSymbology(BarcodeModel barcodeModel)
+        {
+            switch(barcodeModel.SymobologyItem)
+            {
+                case "CodaBar":
+                    CodabarBarcode codabarBarcode = new CodabarBarcode();
+                    SymbologyItem = codabarBarcode;
+                    break;
+                case "Code11":
+                    Code11Barcode code11Barcode = new Code11Barcode();
+                    SymbologyItem = code11Barcode;
+                    break;
+                case "Code32":
+                    Code32Barcode code32Barcode = new Code32Barcode();
+                    SymbologyItem = code32Barcode;
+                    break;
+                case "Code39":
+                    Code39Barcode code39Barcode = new Code39Barcode();
+                    SymbologyItem = code39Barcode;
+                    break;
+                case "Code39Extended":
+                    Code39ExtendedBarcode code39ExtendedBarcode = new Code39ExtendedBarcode();
+                    SymbologyItem = code39ExtendedBarcode;
+                    break;
+                case "Code93":
+                    Code93Barcode code93Barcode = new Code93Barcode();
+                    SymbologyItem = code93Barcode;
+                    break;
+                case "Code93Extended":
+                    Code93ExtendedBarcode code93ExtendedBarcode = new Code93ExtendedBarcode();
+                    SymbologyItem = code93ExtendedBarcode;
+                    break;
+                case "Code128A":
+                    Code128ABarcode code128Barcode = new Code128ABarcode();
+                    SymbologyItem = code128Barcode;
+                    break;
+                case "Code128B":
+                    Code128BBarcode code128BBarcode = new Code128BBarcode();
+                    SymbologyItem = code128BBarcode;
+                    break;
+                case "Code128C":
+                    Code128CBarcode code128CBarcode = new Code128CBarcode();
+                    SymbologyItem = code128CBarcode;
+                    break;
+                case "UpcBarcode":
+                    UpcBarcode upcBarcode = new UpcBarcode();
+                    SymbologyItem = upcBarcode;
+                    break;
+                case "GS1Code128Barcode":
+                    GS1Code128Barcode gS1Code128Barcode = new GS1Code128Barcode();
+                    SymbologyItem = gS1Code128Barcode;
+                    break;
+                case "Pdf417Barcode":
+                    Pdf417Barcode pdf417Barcode = new Pdf417Barcode();
+                    SymbologyItem = pdf417Barcode;
+                    break;
+            }
+        }
+
+        private void ValidateCode11Barcode(string value)
+        {
+            bool isNumeric = false;
+            char[] validate = value.ToCharArray();
+            for (int i = 0; i < validate.Length; i++)
+            {
+                if (Char.IsDigit(validate[i]))
+                {
+                    isNumeric = true;
+                }
+                else
+                {
+                    isNumeric = false;
+                }
+            }
+            if (isNumeric)
+            {
+                ValidateCode11BarcodeText = "";
+                Code11BarcodeVisibility = Visibility.Visible;
+            }
+            else
+            {
+                ValidateCode11BarcodeText = "Invalid Input";
+                Code11BarcodeVisibility = Visibility.Collapsed;
+            }
+        }
+
+        private void ValidateDataMatrixText(string value)
+        {
+            bool isNumeric = false;
+            char[] validate = value.ToCharArray();
+            for (int i = 0; i < validate.Length; i++)
+            {
+                if (Char.IsDigit(validate[i]))
+                {
+                    isNumeric = true;
+                }
+                else
+                {
+                    isNumeric = false;
+                }
+            }
+            if (isNumeric)
+            {
+                ValidateDataMatrixBarcodeText = "";
+                DataMatrixBarcodeVisibility = Visibility.Visible;
+            }
+            else
+            {
+                ValidateDataMatrixBarcodeText = "Invalid Input";
+                DataMatrixBarcodeVisibility = Visibility.Collapsed;
+            }
+        }
+
+        private void SelectedEncodingValue(BarcodeModel value)
+        {
+            bool isNumeric = int.TryParse(DataMatrixBarcodeText, out int data);
+
+            if (value.DataMatrixEncoding == "ASCIINumeric")
+            {
+                DataMatrixSupportedChar = "[0-9]";
+                DataMatrixBarcodeText = "583748";
+            }
+            else
+            {
+                DataMatrixSupportedChar = "[^A-Za-z0-9]";
+                DataMatrixBarcodeText = "Syncfusion";
+            }
+        }
+
+        private void OnPropertyChanged(string Parameter)
+        {
+            if (PropertyChanged != null)
+                PropertyChanged(this, new PropertyChangedEventArgs(Parameter));
+        }
+#endregion
+    }
+}

barcode/Views/BarcodeDemoPage.xaml

@@ -0,0 +1,408 @@
+<Page
+    x:Class="Syncfusion.BarcodeDemos.WinUI.Views.BarcodeDemoPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:common="using:Syncfusion.DemosCommon.WinUI"
+     xmlns:enumextension="using:Syncfusion.DemosCommon.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Syncfusion.BarcodeDemos.WinUI"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Barcode"
+    Background="Transparent"
+    mc:Ignorable="d">
+    <Page.DataContext>
+        <local:BarcodeViewModel />
+    </Page.DataContext>
+    <ScrollViewer>
+        <StackPanel>
+            <common:DemoLayout x:Name="Example1" HeaderText="Code11 barcode control with basic settings.">
+                <common:DemoLayout.Example>
+                    <Grid>
+                        <syncfusion:SfBarcode
+                            x:Name="barcode"
+                            Width="190"
+                            Height="200"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Visibility="{Binding Code11BarcodeVisibility, Mode=TwoWay}"
+                            Value="{Binding Code11BarcodeText, Mode=TwoWay}">
+                            <syncfusion:SfBarcode.Symbology>
+                                <syncfusion:Code11Barcode />
+                            </syncfusion:SfBarcode.Symbology>
+                        </syncfusion:SfBarcode>
+                    </Grid>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <CheckBox
+                            x:Name="showValue"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Content="ShowValue"
+                            IsChecked="{Binding ElementName=barcode, Path=ShowValue, Mode=TwoWay}" />
+                        <Slider
+                            x:Name="textSpacing"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="TextSpacing"
+                            Maximum="80"
+                            Minimum="0"
+                            Value="{Binding ElementName=barcode, Path=TextSpacing, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="horizontalTextAlignment"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="HorizontalTextAlignment"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=TextAlignment}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=TextAlignment}, ElementName=barcode, Path=HorizontalTextAlignment, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="verticalTextAlignment"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="VerticalTextAlignment"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=VerticalAlignment}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=VerticalAlignment}, ElementName=barcode, Path=VerticalTextAlignment, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="rotationAngle"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="RotationAngle"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=syncfusion:BarcodeRotation}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=syncfusion:BarcodeRotation}, ElementName=barcode, Path=RotationAngle, Mode=TwoWay}" />
+                        <TextBlock
+                            x:Name="headerCode11Barcode"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            Text="Supported Characters" />
+                        <TextBlock
+                            x:Name="code11SupportedCharacter"
+                            Width="185"
+                            Margin="16,0,5,5"
+                            Text="[0-9]" />
+                        <TextBox
+                            x:Name="code11Text"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="Value"
+                            MaxLength="16"
+                            Text="{Binding Code11BarcodeText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                        <TextBlock
+                            x:Name="code11ValidateText"
+                            Width="185"
+                            Margin="16,0,5,5"
+                            HorizontalAlignment="Center"
+                            Foreground="Red"
+                            Text="{Binding ValidateCode11BarcodeText}" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Xaml>
+                    <x:String xml:space="preserve">
+&lt;syncfusion:SfBarcode
+                TextSpacing=&quot;$(TextSpacing)&quot; ShowValue=&quot;$(ShowValue)&quot; Value=&quot;$(Value)&quot;                   
+                VerticalAlignment=&quot;Center&quot; HorizontalAlignment=&quot;Center&quot;
+                HorizontalTextAlignment=&quot;$(HorizontalTextAlignment)&quot; VerticalTextAlignment=&quot;$(VerticalTextAlignment)&quot;
+                Width=&quot;190&quot; Height=&quot;200&quot; RotationAngle=&quot;$(RotationAngle)&quot;&gt;
+&#x09;&lt;syncfusion:SfBarcode.Symbology&gt;
+&#x09;&#x09;&lt;syncfusion:Code11Barcode/&gt;
+&#x09;&lt;/syncfusion:SfBarcode.Symbology&gt;
+&lt;/syncfusion:SfBarcode&gt;                      
+                    </x:String>
+                </common:DemoLayout.Xaml>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="TextSpacing" SubstitutionValue="{x:Bind textSpacing.Value, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="ShowValue" SubstitutionValue="{x:Bind showValue.IsChecked, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="Value" SubstitutionValue="{x:Bind code11Text.Text, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="HorizontalTextAlignment" SubstitutionValue="{x:Bind horizontalTextAlignment.SelectedItem, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="VerticalTextAlignment" SubstitutionValue="{x:Bind verticalTextAlignment.SelectedItem, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="RotationAngle" SubstitutionValue="{x:Bind rotationAngle.SelectedItem, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout x:Name="Example2" HeaderText="Standard 1D barcode types with alignment options, checksum rendering, and start/stop symbol encoding.">
+                <common:DemoLayout.Example>
+                    <Grid>
+                        <syncfusion:SfBarcode
+                            x:Name="uniDimesionalBarcode"
+                            Width="340"
+                            Height="200"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Symbology="{Binding SymbologyItem}"
+                            TextSpacing="0"
+                            Value="48625310" />
+                    </Grid>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <Slider
+                            x:Name="textSpacingUnidimensional"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="TextSpacing"
+                            Maximum="80"
+                            Minimum="0"
+                            Value="{Binding ElementName=uniDimesionalBarcode, Path=TextSpacing, Mode=TwoWay}" />
+                        <Slider
+                            x:Name="moduleUnidimensional"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="Module"
+                            Maximum="4"
+                            Minimum="0"
+                            Value="{Binding ElementName=uniDimesionalBarcode, Path=Module, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="symbology"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            DisplayMemberPath="SymobologyItem"
+                            Header="Symbology"
+                            ItemsSource="{Binding Symbology}"
+                            SelectedIndex="0"
+                            SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="rotationUnidimensional"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="RotationAngle"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=syncfusion:BarcodeRotation}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=syncfusion:BarcodeRotation}, ElementName=uniDimesionalBarcode, Path=RotationAngle, Mode=TwoWay}" />
+                        <CheckBox
+                            x:Name="encodeStartStopSymbols"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Content="EncodeStartStopSymbols"
+                            IsChecked="{Binding ElementName=uniDimesionalBarcode, Path=Symbology.EncodeStartStopSymbols, Mode=TwoWay}" />
+                        <CheckBox
+                            x:Name="enableCheckSum"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Content="EnableCheckSum"
+                            IsChecked="{Binding ElementName=uniDimesionalBarcode, Path=Symbology.EnableCheckSum, Mode=TwoWay}" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Xaml>
+                    <x:String xml:space="preserve">
+&lt;syncfusion:SfBarcode
+                VerticalAlignment=&quot;Center&quot; HorizontalAlignment=&quot;Center&quot;
+                Value=&quot;48625310&quot; TextSpacing=&quot;$(UniDimensionTextSpacing)&quot; Module=&quot;$(Module)&quot;
+                Symbology=&quot;{Binding Symbology}&quot; RotationAngle=&quot;$(UniDimensionRotationAngle)&quot;
+                Width=&quot;340&quot; Height=&quot;200&quot;
+                EncodeStartStopSymbols=&quot;$(EncodeStartStopSymbols)&quot; EnableCheckSum=&quot;$(EnableCheckSum)&quot;/&gt;                    
+                    </x:String>
+                </common:DemoLayout.Xaml>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="UniDimensionTextSpacing" SubstitutionValue="{x:Bind textSpacingUnidimensional.Value, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="Module" SubstitutionValue="{x:Bind moduleUnidimensional.Value, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="UniDimensionRotationAngle" SubstitutionValue="{x:Bind rotationUnidimensional.SelectedItem, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="EncodeStartStopSymbols" SubstitutionValue="{x:Bind encodeStartStopSymbols.IsChecked, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="EnableCheckSum" SubstitutionValue="{x:Bind enableCheckSum.IsChecked, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout x:Name="Example3" HeaderText="DataMatrix barcode with different types of encoding and matrix size.">
+                <common:DemoLayout.Example>
+                    <Grid>
+                        <syncfusion:SfBarcode
+                            x:Name="dataMatrixBarcode"
+                            Width="350"
+                            Height="350"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            AutoModule="True"
+                            Module="10"
+                            Visibility="{Binding DataMatrixBarcodeVisibility, Mode=TwoWay}"
+                            Value="{Binding DataMatrixBarcodeText, Mode=TwoWay}">
+                            <syncfusion:SfBarcode.Symbology>
+                                <syncfusion:DataMatrixBarcode />
+                            </syncfusion:SfBarcode.Symbology>
+                        </syncfusion:SfBarcode>
+                    </Grid>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <CheckBox
+                            x:Name="autoModule"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Content="Auto Module"
+                            IsChecked="{Binding ElementName=dataMatrixBarcode, Path=AutoModule, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="encoding"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            DisplayMemberPath="DataMatrixEncoding"
+                            Header="Encoding"
+                            ItemsSource="{Binding EncodingValues}"
+                            SelectedIndex="0"
+                            SelectedItem="{Binding EncodingSelectedValue, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="matrixSize"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="MatrixSize"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=syncfusion:DataMatrixSize}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=syncfusion:DataMatrixSize}, ElementName=dataMatrixBarcode, Path=Symbology.MatrixSize, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="dataMatrixRotation"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="RotationAngle"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=syncfusion:BarcodeRotation}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=syncfusion:BarcodeRotation}, ElementName=dataMatrixBarcode, Path=RotationAngle, Mode=TwoWay}" />
+                        <TextBlock
+                            x:Name="headerDataMatrixBarcode"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            Text="Supported Characters" />
+                        <TextBlock
+                            x:Name="dataMatrixSupportedCharacter"
+                            Width="185"
+                            Margin="16,0,5,5"
+                            Text="{Binding DataMatrixSupportedChar}" />
+                        <TextBox
+                            x:Name="dataMatrixText"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="Value"
+                            MaxLength="16"
+                            Text="{Binding DataMatrixBarcodeText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                        <TextBlock
+                            Width="185"
+                            Margin="16,0,5,5"
+                            HorizontalAlignment="Center"
+                            Foreground="Red"
+                            Text="{Binding ValidateDataMatrixBarcodeText}" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Xaml>
+                    <x:String xml:space="preserve">
+&lt;syncfusion:SfBarcode
+                VerticalAlignment=&quot;Center&quot; HorizontalAlignment=&quot;Center&quot;
+                Value=&quot;$(DataMatrixValue)&quot; Width=&quot;250&quot; Height=&quot;200&quot;
+                AutoModule=&quot;$(DataMatrixAutoModule)&quot; Module=&quot;$(DataMatrixModule)&quot; RotationAngle=&quot;$(DataMatrixRotationAngle)&quot;&gt;
+&#x09;&lt;syncfusion:SfBarcode.Symbology&gt;
+            &lt;syncfusion:DataMatrixBarcode Encoding=&quot;{Binding Encoding}&quot; 
+                                          MatrixSize=&quot;$(MatrixSize)&quot;/&gt;
+&#x09;&lt;/syncfusion:SfBarcode.Symbology&gt; 
+&lt;/syncfusion:SfBarcode&gt;
+                    </x:String>
+                </common:DemoLayout.Xaml>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="DataMatrixValue" SubstitutionValue="{x:Bind dataMatrixText.Text, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="DataMatrixAutoModule" SubstitutionValue="{x:Bind autoModule.IsChecked, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="DataMatrixModule" SubstitutionValue="{x:Bind dataMatrixBarcode.Module, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="DataMatrixRotationAngle" SubstitutionValue="{x:Bind dataMatrixRotation.SelectedItem, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MatrixSize" SubstitutionValue="{x:Bind matrixSize.SelectedItem, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout x:Name="Example4" HeaderText="QR barcode with different types of QR version and approximate level of error correction.">
+                <common:DemoLayout.Example>
+                    <Grid>
+                        <syncfusion:SfBarcode
+                            x:Name="qrBarcode"
+                            Width="350"
+                            Height="350"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            AutoModule="True"
+                            Module="10"
+                            Value="{Binding QRBarcodeText, Mode=TwoWay}">
+                            <syncfusion:SfBarcode.Symbology>
+                                <syncfusion:QRBarcode />
+                            </syncfusion:SfBarcode.Symbology>
+                        </syncfusion:SfBarcode>
+                    </Grid>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <CheckBox
+                            x:Name="autoModuleQRBarcode"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Content="Auto Module"
+                            IsChecked="{Binding ElementName=qrBarcode, Path=AutoModule, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="errorCorrectionLevel"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="ErrorCorrectionLevel"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=syncfusion:ErrorCorrectionLevel}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=syncfusion:ErrorCorrectionLevel}, ElementName=qrBarcode, Path=Symbology.ErrorCorrectionLevel, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="qrversion"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="QRVersion"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=syncfusion:QRBarcodeVersion}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=syncfusion:QRBarcodeVersion}, ElementName=qrBarcode, Path=Symbology.QRVersion, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="rotationQRBarcode"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="RotationAngle"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=syncfusion:BarcodeRotation}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=syncfusion:BarcodeRotation}, ElementName=qrBarcode, Path=RotationAngle, Mode=TwoWay}" />
+                        <TextBlock
+                            x:Name="headerQRBarcode"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            Text="Supported Characters" />
+                        <TextBlock
+                            x:Name="QRBarcodeSupportedCharacter"
+                            Width="185"
+                            Margin="16,0,5,5"
+                            Text="[^A-Za-z0-9]" />
+                        <TextBox
+                            x:Name="qrBarcodeText"
+                            Width="185"
+                            Margin="16,5,5,5"
+                            HorizontalAlignment="Center"
+                            Header="Value"
+                            MaxLength="16"
+                            Text="{Binding QRBarcodeText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Xaml>
+                    <x:String xml:space="preserve">
+&lt;syncfusion:SfBarcode
+            VerticalAlignment=&quot;Center&quot; HorizontalAlignment=&quot;Center&quot; 
+            Value=&quot;$(QRBarcodeValue)&quot; Width=&quot;250&quot; Height=&quot;200&quot;
+            AutoModule=&quot;$(QRBarcodeAutoModule)&quot; Module=&quot;$(QRBarcodeModule)&quot; RoatationAngle=&quot;$(QRBarcodeRoatationAngle)&quot;&gt;
+&#x09;&lt;syncfusion:SfBarcode.Symbology&gt;
+            &lt;syncfusion:QRBarcode ErrorCorrectionLevel=&quot;$(ErrorCorrectionLevel)&quot; 
+                                  QRVersion=&quot;$(QRVersion)&quot;/&gt;
+&#x09;&lt;/syncfusion:SfBarcode.Symbology&gt; 
+&lt;/SfBarcode&gt;                      
+                    </x:String>
+                </common:DemoLayout.Xaml>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="QRBarcodeValue" SubstitutionValue="{x:Bind qrBarcodeText.Text, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="QRBarcodeAutoModule" SubstitutionValue="{x:Bind autoModuleQRBarcode.IsChecked, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="QRBarcodeModule" SubstitutionValue="{x:Bind qrBarcode.Module, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="QRBarcodeRoatationAngle" SubstitutionValue="{x:Bind rotationQRBarcode.SelectedItem, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="ErrorCorrectionLevel" SubstitutionValue="{x:Bind errorCorrectionLevel.SelectedItem, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="QRVersion" SubstitutionValue="{x:Bind qrversion.SelectedItem, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+        </StackPanel>
+    </ScrollViewer>
+</Page>

barcode/Views/BarcodeDemoPage.xaml.cs

@@ -0,0 +1,50 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.UI.Xaml.Controls;
+using Syncfusion.UI.Xaml.Barcode;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace Syncfusion.BarcodeDemos.WinUI.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class BarcodeDemoPage : Page, IDisposable
+    {
+        public BarcodeDemoPage()
+        {
+            this.InitializeComponent();
+        }
+
+        public void Dispose()
+        {
+            if (barcode != null)
+            {
+                barcode = null;
+            }
+            if (uniDimesionalBarcode != null)
+            {
+                uniDimesionalBarcode = null;
+            }
+            if (dataMatrixBarcode != null)
+            {
+                dataMatrixBarcode = null;
+            }
+            if (qrBarcode != null)
+            {
+                qrBarcode = null;
+            }
+        }
+    }
+}

barcode/app.manifest

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
+  <assemblyIdentity version="1.0.0.0" name="Syncfusion.BarcodeDemos.WinUI.app"/>
+
+  <application xmlns="urn:schemas-microsoft-com:asm.v3">
+    <windowsSettings>
+      <!-- The combination of below two tags have the following effect:
+           1) Per-Monitor for >= Windows 10 Anniversary Update
+           2) System < Windows 10 Anniversary Update
+      -->
+      <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/PM</dpiAware>
+      <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2, PerMonitor</dpiAwareness>
+    </windowsSettings>
+  </application>
+</assembly>

barcode/syncfusion.barcode.props

@@ -0,0 +1,29 @@
+<Project>
+    <ItemGroup>
+		<Compile Include="..\Barcode\Model\BarcodeModel.cs">
+			<Link>Barcode\Model\BarcodeModel.cs</Link>
+		</Compile>
+		<Compile Include="..\Barcode\SamplesConfiguration.cs">
+			<Link>Barcode\SamplesConfiguration.cs</Link>
+		</Compile>
+		<Compile Include="..\Barcode\ViewModel\BarcodeViewModel.cs">
+			<Link>Barcode\ViewModel\BarcodeViewModel.cs</Link>
+		</Compile>
+		<Compile Include="..\Barcode\Views\BarcodeDemoPage.xaml.cs">
+			<Link>Barcode\Views\BarcodeDemoPage.xaml.cs</Link>
+			<DependentUpon>..\Barcode\Views\BarcodeDemoPage.xaml</DependentUpon>
+		</Compile>
+    </ItemGroup>
+
+     <ItemGroup>
+		<Page Include="..\Barcode\Views\BarcodeDemoPage.xaml">
+			<Link>Barcode\Views\BarcodeDemoPage.xaml</Link>
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+    </ItemGroup>
+
+    <ItemGroup>	
+        <PackageReference Include="Syncfusion.Barcode.WinUI" Version="*" />	
+    </ItemGroup>
+</Project>

calendar/App.xaml

@@ -0,0 +1,13 @@
+<Application x:Class="Syncfusion.CalendarDemos.WinUI.App"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+                <!-- Other merged dictionaries here -->
+            </ResourceDictionary.MergedDictionaries>
+            <!-- Other app resources here -->
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

calendar/App.xaml.cs

@@ -0,0 +1,160 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.ApplicationModel;
+using Windows.ApplicationModel.Activation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.ApplicationModel.Core;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace Syncfusion.CalendarDemos.WinUI
+{
+    /// <summary>
+    /// Provides application-specific behavior to supplement the default Application class.
+    /// </summary>
+    sealed partial class App : Application
+    {
+        /// <summary>
+        /// 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().
+        /// </summary>
+        public App()
+        {
+            this.InitializeComponent();
+#if !WinUI_Desktop
+            this.Suspending += OnSuspending;
+#endif
+        }
+
+        /// <summary>
+        /// Invoked when the application is launched normally by the end user.  Other entry points
+        /// will be used such as when the application is launched to open a specific file.
+        /// </summary>
+        /// <param name="e">Details about the launch request and process.</param>
+        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs e)
+        {
+#if WinUI_Desktop
+            m_window = new MainWindow();
+            m_window.Activate();
+            Frame rootFrame = m_window.Content as Frame;
+
+
+            // Do not repeat app initialization when the Window already has content,
+            // just ensure that the window is active
+            if (rootFrame == null)
+            {
+                // Create a Frame to act as the navigation context and navigate to the first page
+                rootFrame = new Frame();
+
+                // rootFrame.NavigationFailed += OnNavigationFailed;
+
+                if (e != null && e.UWPLaunchActivatedEventArgs.PreviousExecutionState == ApplicationExecutionState.Terminated)
+                {
+                    //TODO: Load state from previously suspended application
+                }
+
+                // Place the frame in the current Window
+                m_window.Content = rootFrame;
+            }
+
+            //  if (args != null && args.UWPLaunchActivatedEventArgs.PrelaunchActivated == false)
+            {
+#pragma warning disable CA1806 // Do not ignore method results
+                new SamplesConfiguration();
+#pragma warning restore CA1806 // Do not ignore method results
+                if (rootFrame.Content == null)
+                {
+                    // When the navigation stack isn't restored navigate to the first page,
+                    // configuring the new page by passing required information as a navigation
+                    // parameter
+                    rootFrame.Navigate(typeof(DemosCommon.WinUI.MainPage), e.Arguments);
+                }
+                // Ensure the current window is active
+                m_window.Activate();
+            }
+#else
+            CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
+            Frame rootFrame = Window.Current.Content as Frame;
+
+            // Do not repeat app initialization when the Window already has content,
+            // just ensure that the window is active
+            if (rootFrame == null)
+            {
+                // Create a Frame to act as the navigation context and navigate to the first page
+                rootFrame = new Frame();
+
+                rootFrame.NavigationFailed += OnNavigationFailed;
+
+                if (e.UWPLaunchActivatedEventArgs.PreviousExecutionState == ApplicationExecutionState.Terminated)
+                {
+                    //TODO: Load state from previously suspended application
+                }
+
+                // Place the frame in the current Window
+                Window.Current.Content = rootFrame;
+            }
+
+            if (e.UWPLaunchActivatedEventArgs.PrelaunchActivated == false)
+            {
+                new SamplesConfiguration();
+                if (rootFrame.Content == null)
+                {
+                    // When the navigation stack isn't restored navigate to the first page,
+                    // configuring the new page by passing required information as a navigation
+                    // parameter
+                    rootFrame.Navigate(typeof(demoscommon.winui.MainPage), e.Arguments);
+                }
+                // Ensure the current window is active
+                Window.Current.Activate();
+            }
+#endif
+        }
+
+        /// <summary>
+        /// Invoked when Navigation to a certain page fails
+        /// </summary>
+        /// <param name="sender">The Frame which failed navigation</param>
+        /// <param name="e">Details about the navigation failure</param>
+        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
+        {
+            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
+        }
+
+#if !WinUI_Desktop
+        /// <summary>
+        /// Invoked when application execution is being suspended.  Application state is saved
+        /// without knowing whether the application will be terminated or resumed with the contents
+        /// of memory still intact.
+        /// </summary>
+        /// <param name="sender">The source of the suspend request.</param>
+        /// <param name="e">Details about the suspend request.</param>
+        private void OnSuspending(object sender, SuspendingEventArgs e)
+        {
+            var deferral = e.SuspendingOperation.GetDeferral();
+            //TODO: Save application state and stop any background activity
+            deferral.Complete();
+        }
+#else
+        private MainWindow m_window;
+#endif
+    }
+}

calendar/Converter/DateFormatToDisplayFormatConverter.cs

@@ -0,0 +1,115 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using Microsoft.UI.Xaml.Data;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Syncfusion.CalendarDemos.WinUI
+{
+    public class DateFormatToDisplayFormatConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            var option = value.ToString();
+            var abb = "Abbreviated";
+            var full = "Full";
+            var num = "Number";
+
+
+            switch (parameter.ToString())
+            {
+                case "day":
+                    if (option == abb)
+                    {
+                        return "{day.integer}";
+                    }
+                    else if (option == full)
+                    {
+                        return "{day.integer(2)}";
+                    }
+                    break;
+
+                case "month":
+                    if (option == abb)
+                    {
+                        return "{month.abbreviated}";
+                    }
+                    else if (option == full)
+                    {
+                        return "{month.full}";
+                    }
+                    else if (option == num)
+                    {
+                        return "{month.integer}";
+                    }
+                    break;
+
+                case "dayofweek":
+                    if (option == "Abbreviated - 2 char")
+                    {
+                        return "{dayofweek.abbreviated(2)}";
+                    }
+                    else if (option == "Abbreviated - 3 char")
+                    {
+                        return "{dayofweek.abbreviated(3)}";
+                    }
+                    else if (option == "Full")
+                    {
+                        return "{dayofweek.full}";
+                    }
+                    break;
+
+                case "header":
+                    if (option == abb)
+                    {
+                        return "{month.abbreviated} {year.abbreviated}‎";
+                    }
+                    else if (option == full)
+                    {
+                        return "month year";
+                    }
+                    break;
+            }
+
+            return null;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            throw new NotImplementedException();
+        }
+    }
+
+    public class ValueToUlongConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            if (value != null)
+            {
+                double.TryParse(value.ToString(), out double count);
+                return count;
+            }
+
+            return 0;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            if (value == null)
+                return 0;
+            else
+            {
+                ulong.TryParse(value.ToString(), out ulong count);
+                return count;
+            }
+        }
+    }
+}

calendar/MainWindow.xaml

@@ -0,0 +1,11 @@
+<Window
+    x:Class="Syncfusion.CalendarDemos.WinUI.MainWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Syncfusion.CalendarDemos.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Frame/>
+</Window>

calendar/MainWindow.xaml.cs

@@ -0,0 +1,39 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace Syncfusion.CalendarDemos.WinUI
+{
+    /// <summary>
+    /// An empty window that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class MainWindow : Window
+    {
+        public MainWindow()
+        {
+            this.InitializeComponent();
+            this.Title = "Syncfusion Calendar Controls Gallery for WinUI Desktop";
+        }
+    }
+}

calendar/Package.appxmanifest

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<Package
+  xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
+  xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
+  xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
+  IgnorableNamespaces="uap rescap">
+
+  <Identity
+    Name="ba2a42ef-5080-419e-a595-ef3e0adf099f"
+    Publisher="CN=Syncfusion"
+    Version="1.0.0.0" />
+
+  <Properties>
+    <DisplayName>Syncfusion WinUI Calendar Controls Gallery</DisplayName>
+    <PublisherDisplayName>Syncfusion</PublisherDisplayName>
+    <Logo>Assets\StoreLogo.png</Logo>
+  </Properties>
+
+  <Dependencies>
+    <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.0.0" MaxVersionTested="10.0.0.0" />
+    <TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.14393.0" MaxVersionTested="10.0.14393.0" />
+  </Dependencies>
+
+  <Resources>
+    <Resource Language="x-generate"/>
+  </Resources>
+
+  <Applications>
+    <Application Id="App"
+      Executable="$targetnametoken$.exe"
+      EntryPoint="$targetentrypoint$">
+      <uap:VisualElements
+        DisplayName="Syncfusion WinUI Calendar Controls Gallery"
+        Description="Syncfusion WinUI Calendar Controls Gallery"
+        BackgroundColor="transparent"
+        Square150x150Logo="Assets\Square150x150Logo.png"
+        Square44x44Logo="Assets\Square44x44Logo.png">
+        <uap:DefaultTile Wide310x150Logo="Assets\Wide310x150Logo.png" />
+        <uap:SplashScreen Image="Assets\SplashScreen.png" />
+      </uap:VisualElements>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <Capability Name="internetClient" />
+    <rescap:Capability Name="runFullTrust" />
+  </Capabilities>
+</Package>

calendar/Properties/AssemblyInfo.cs

@@ -0,0 +1,36 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System.Reflection;
+using System.Runtime.CompilerServices;
+using System.Runtime.InteropServices;
+
+// General Information about an assembly is controlled through the following 
+// set of attributes. Change these attribute values to modify the information
+// associated with an assembly.
+[assembly: AssemblyTitle("Syncfusion.CalendarDemos.WinUI")]
+[assembly: AssemblyDescription("")]
+[assembly: AssemblyConfiguration("")]
+[assembly: AssemblyCompany("Syncfusion Inc.")]
+[assembly: AssemblyProduct("Syncfusion.CalendarDemos.WinUI")]
+[assembly: AssemblyCopyright("Copyright © 2001-2022 Syncfusion Inc.")]
+[assembly: AssemblyTrademark("")]
+[assembly: AssemblyCulture("")]
+
+// Version information for an assembly consists of the following four values:
+//
+//      Major Version
+//      Minor Version 
+//      Build Number
+//      Revision
+//
+// You can specify all the values or you can default the Build and Revision Numbers 
+// by using the '*' as shown below:
+// [assembly: AssemblyVersion("1.0.*")]
+[assembly: AssemblyVersion("20.3300.0.47")]
+[assembly: AssemblyFileVersion("1.0.0.0")]
+[assembly: ComVisible(false)]

calendar/Properties/Default.rd.xml

@@ -0,0 +1,31 @@
+<!--
+    This file contains Runtime Directives used by .NET Native. The defaults here are suitable for most
+    developers. However, you can modify these parameters to modify the behavior of the .NET Native
+    optimizer.
+
+    Runtime Directives are documented at https://go.microsoft.com/fwlink/?LinkID=391919
+
+    To fully enable reflection for App1.MyClass and all of its public/private members
+    <Type Name="App1.MyClass" Dynamic="Required All"/>
+
+    To enable dynamic creation of the specific instantiation of AppClass<T> over System.Int32
+    <TypeInstantiation Name="App1.AppClass" Arguments="System.Int32" Activate="Required Public" />
+
+    Using the Namespace directive to apply reflection policy to all the types in a particular namespace
+    <Namespace Name="DataClasses.ViewModels" Serialize="All" />
+-->
+
+<Directives xmlns="http://schemas.microsoft.com/netfx/2013/01/metadata">
+  <Application>
+    <!--
+      An Assembly element with Name="*Application*" applies to all assemblies in
+      the application package. The asterisks are not wildcards.
+    -->
+    <Assembly Name="*Application*" Dynamic="Required All" />
+    
+    
+    <!-- Add your application specific runtime directives here. -->
+
+
+  </Application>
+</Directives>

calendar/Properties/PublishProfiles/win10-arm64.pubxml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121.
+-->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PublishProtocol>FileSystem</PublishProtocol>
+    <Platform>arm64</Platform>
+    <RuntimeIdentifier>win10-arm64</RuntimeIdentifier>
+    <PublishDir>bin\$(Configuration)\$(TargetFramework)\$(RuntimeIdentifier)\publish\</PublishDir>
+    <SelfContained>true</SelfContained>
+    <PublishSingleFile>False</PublishSingleFile>
+    <PublishReadyToRun Condition="'$(Configuration)' == 'Debug'">False</PublishReadyToRun>
+    <PublishReadyToRun Condition="'$(Configuration)' != 'Debug'">True</PublishReadyToRun>
+   <!-- 
+    See https://github.com/microsoft/CsWinRT/issues/373
+    <PublishTrimmed>True</PublishTrimmed>
+    -->
+  </PropertyGroup>
+</Project>

calendar/Properties/PublishProfiles/win10-x64.pubxml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121.
+-->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PublishProtocol>FileSystem</PublishProtocol>
+    <Platform>x64</Platform>
+    <RuntimeIdentifier>win10-x64</RuntimeIdentifier>
+    <PublishDir>bin\$(Configuration)\$(TargetFramework)\$(RuntimeIdentifier)\publish\</PublishDir>
+    <SelfContained>true</SelfContained>
+    <PublishSingleFile>False</PublishSingleFile>
+    <PublishReadyToRun Condition="'$(Configuration)' == 'Debug'">False</PublishReadyToRun>
+    <PublishReadyToRun Condition="'$(Configuration)' != 'Debug'">True</PublishReadyToRun>
+   <!-- 
+    See https://github.com/microsoft/CsWinRT/issues/373
+    <PublishTrimmed>True</PublishTrimmed>
+    -->
+  </PropertyGroup>
+</Project>

calendar/Properties/PublishProfiles/win10-x86.pubxml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121.
+-->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PublishProtocol>FileSystem</PublishProtocol>
+    <Platform>x86</Platform>
+    <RuntimeIdentifier>win10-x86</RuntimeIdentifier>
+    <PublishDir>bin\$(Configuration)\$(TargetFramework)\$(RuntimeIdentifier)\publish\</PublishDir>
+    <SelfContained>true</SelfContained>
+    <PublishSingleFile>False</PublishSingleFile>
+    <PublishReadyToRun Condition="'$(Configuration)' == 'Debug'">False</PublishReadyToRun>
+    <PublishReadyToRun Condition="'$(Configuration)' != 'Debug'">True</PublishReadyToRun>
+   <!-- 
+    See https://github.com/microsoft/CsWinRT/issues/373
+    <PublishTrimmed>True</PublishTrimmed>
+    -->
+  </PropertyGroup>
+</Project>

calendar/Properties/launchSettings.json

@@ -0,0 +1,7 @@
+{
+  "profiles": {
+    "Syncfusion.CalendarDemos.WinUI": {
+      "commandName": "MsixPackage"
+    }
+  }
+}

calendar/SamplesConfiguration.cs

@@ -0,0 +1,186 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using Syncfusion.DemosCommon.WinUI;
+using System;
+using System.Collections.Generic;
+
+namespace Syncfusion.CalendarDemos.WinUI
+{
+    public class SamplesConfiguration
+    {
+        public SamplesConfiguration()
+        {
+            DemoInfo calendarDemo = new DemoInfo()
+            {
+                Name = "Getting Started",
+                Category = "Calendar",
+                DemoType = DemoTypes.None,
+                Description = "The Calendar allows users to select the date.",
+                DemoView = typeof(Views.Calendar.CalendarView),
+                ShowInfoPanel=true
+            };
+            List<Documentation> calendarDemoDocumentations = new List<Documentation>();
+            calendarDemoDocumentations.Add(new Documentation() { Content = "Calendar - API Reference", Uri = new Uri("https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendar.html") });
+            calendarDemoDocumentations.Add(new Documentation() { Content = "Calendar - Getting Started", Uri = new Uri("https://help.syncfusion.com/winui/calendar/getting-started") });
+            calendarDemoDocumentations.Add(new Documentation() { Content = "Calendar - Date Selection", Uri = new Uri("https://help.syncfusion.com/winui/calendar/selection") });
+            calendarDemoDocumentations.Add(new Documentation() { Content = "Calendar - View Navigation", Uri = new Uri("https://help.syncfusion.com/winui/calendar/navigation") });
+            calendarDemoDocumentations.Add(new Documentation() { Content = "Calendar - Calendar Types", Uri = new Uri("https://help.syncfusion.com/winui/calendar/localization-and-formatting#types-of-calendar") });
+            calendarDemo.Documentation.AddRange(calendarDemoDocumentations);
+
+            DemoInfo calendarCustomizationDemo = new DemoInfo()
+            {
+                Name = "Customization",
+                Category = "Calendar",
+                DemoType = DemoTypes.None,
+                Description = "Customization of the dates.",
+                DemoView = typeof(Views.Calendar.Customization),
+                ShowInfoPanel = true
+            };
+            List<Documentation> calendarCustomizationDemoDocumentations = new List<Documentation>();
+            calendarCustomizationDemoDocumentations.Add(new Documentation() { Content = "Calendar - API Reference", Uri = new Uri("https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendar.html") });
+            calendarCustomizationDemoDocumentations.Add(new Documentation() { Content = "Calendar - Getting Started", Uri = new Uri("https://help.syncfusion.com/winui/calendar/getting-started") });
+            calendarCustomizationDemoDocumentations.Add(new Documentation() { Content = "Calendar - Date Formatting", Uri = new Uri("https://help.syncfusion.com/winui/calendar/localization-and-formatting#change-date-display-format") });
+            calendarCustomizationDemoDocumentations.Add(new Documentation() { Content = "Calendar - Block All Weekends", Uri = new Uri("https://help.syncfusion.com/winui/calendar/restrict-date-selection#disable-dates-dynamically-all-weekend-days") });
+            calendarCustomizationDemoDocumentations.Add(new Documentation() { Content = "Calendar - Block Specific Dates", Uri = new Uri("https://help.syncfusion.com/winui/calendar/restrict-date-selection#disable-dates-using-blackoutdates") });
+            calendarCustomizationDemo.Documentation.AddRange(calendarCustomizationDemoDocumentations);
+
+            DemoInfo calendarStylesAndTemplatesDemo = new DemoInfo()
+            {
+                Name = "Styles and Templates",
+                Category = "Calendar",
+                DemoType = DemoTypes.None,
+                Description = "Customization of styles and templates of the Calendar.",
+                DemoView = typeof(Views.Calendar.StylesAndTemplates),
+                ShowInfoPanel = true
+            };
+            List<Documentation> calendarStylesAndTemplatesDemoDocumentations = new List<Documentation>();
+            calendarStylesAndTemplatesDemoDocumentations.Add(new Documentation() { Content = "Calendar - API Reference", Uri = new Uri("https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendar.html") });
+            calendarStylesAndTemplatesDemoDocumentations.Add(new Documentation() { Content = "Calendar - Getting Started", Uri = new Uri("https://help.syncfusion.com/winui/calendar/getting-started") });
+            calendarStylesAndTemplatesDemoDocumentations.Add(new Documentation() { Content = "Calendar - Specific Cell's Custom UI", Uri = new Uri("https://help.syncfusion.com/winui/calendar/ui-customization#custom-ui-for-specific-cell-in-calendar") });
+            calendarStylesAndTemplatesDemo.Documentation.AddRange(calendarStylesAndTemplatesDemoDocumentations);
+
+            var calendar = new ControlInfo()
+            {
+                Control = DemoControl.SfCalendar,
+                ControlBadge = ControlBadge.None,
+                ControlCategory = ControlCategory.Calendars,
+                Description = "The Calendar control allows user to select a date or dates quickly using built-in month, year, decade, and century views.",
+                Glyph = "\uE710",
+                ImageSource= "Calendar.png",
+                IsPreview = true
+            };
+            calendar.Demos.Add(calendarDemo);
+            calendar.Demos.Add(calendarCustomizationDemo);
+            calendar.Demos.Add(calendarStylesAndTemplatesDemo);
+
+            DemoInfo calendarDatePickerDemo = new DemoInfo()
+            {
+                Name = "Getting Started",
+                Category = "Calendar Date Picker",
+                DemoType = DemoTypes.None,
+                Description = "The Calendar Date Picker allows users to select the date through a drop-down menu.",
+                DemoView = typeof(Views.CalendarDatePicker.CalendarDatePickerView),
+                ShowInfoPanel = true
+            };
+            List<Documentation> calendarDatePickerDemoDocumentations = new List<Documentation>();
+            calendarDatePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDatePicker - API Reference", Uri = new Uri("https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html") });
+            calendarDatePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDatePicker - Getting Started", Uri = new Uri("https://help.syncfusion.com/winui/calendar-datepicker/getting-started") });
+            calendarDatePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDatePicker - View Navigation", Uri = new Uri("https://help.syncfusion.com/winui/calendar-date-picker/navigation") });
+            calendarDatePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDatePicker - Calendar Types", Uri = new Uri("https://help.syncfusion.com/winui/calendar-date-picker/localization-and-formatting#types-of-calendar") });
+            calendarDatePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDatePicker - Date Formatting", Uri = new Uri("https://help.syncfusion.com/winui/calendar-date-picker/localization-and-formatting#change-calendar-display-format") });
+            calendarDatePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDatePicker - Block Specific Dates", Uri = new Uri("https://help.syncfusion.com/winui/calendar-date-picker/date-selection-and-restriction#block-dates-using-blackoutdates") });
+            calendarDatePickerDemo.Documentation.AddRange(calendarDatePickerDemoDocumentations);
+
+            DemoInfo calendarDatePickerCustomizationDemo = new DemoInfo()
+            {
+                Name = "Styles and Templates",
+                Category = "Calendar Date Picker",
+                DemoType = DemoTypes.None,
+                Description = "Customization of styles and templates of the Calendar Date Picker.",
+                DemoView = typeof(Views.CalendarDatePicker.Customization),
+                ShowInfoPanel = true
+            };
+            List<Documentation> calendarDatePickerCustomizationDemoDocumentations = new List<Documentation>();
+            calendarDatePickerCustomizationDemoDocumentations.Add(new Documentation() { Content = "CalendarDatePicker - API Reference", Uri = new Uri("https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDatePicker.html") });
+            calendarDatePickerCustomizationDemoDocumentations.Add(new Documentation() { Content = "CalendarDatePicker - Getting Started", Uri = new Uri("https://help.syncfusion.com/winui/calendar-datepicker/getting-started") });
+            calendarDatePickerCustomizationDemoDocumentations.Add(new Documentation() { Content = "CalendarDatePicker - Specific Cell's Custom UI", Uri = new Uri("https://help.syncfusion.com/winui/calendar-date-picker/calendar-ui-customization#customize-individual-items-in-calendar") });
+            calendarDatePickerCustomizationDemo.Documentation.AddRange(calendarDatePickerCustomizationDemoDocumentations);
+
+            var calendarDatePicker = new ControlInfo()
+            {
+                Control = DemoControl.SfCalendarDatePicker,
+                ControlBadge = ControlBadge.None,
+                ControlCategory = ControlCategory.Calendars,
+                Description = "The Calendar DatePicker is a drop-down control that is optimized for picking a single date from a Calendar control.",
+                Glyph = "\uE711",
+                ImageSource= "CalendarDatePicker.png",
+                IsPreview = true
+            };
+            calendarDatePicker.Demos.Add(calendarDatePickerDemo);
+            calendarDatePicker.Demos.Add(calendarDatePickerCustomizationDemo);
+
+            DemoInfo calendarDateRangePickerDemo = new DemoInfo()
+            {
+                Name = "Getting Started",
+                Category = "Calendar DateRange Picker",
+                DemoType = DemoTypes.None,
+                Description = "The Calendar DateRangePicker allows users to select a range of dates.",
+                DemoView = typeof(Views.CalendarDateRangePicker.CalendarDateRangePickerView),
+                ShowInfoPanel = true
+            };
+            List<Documentation> calendarDateRangePickerDemoDocumentations = new List<Documentation>();
+            calendarDateRangePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - API Reference", Uri = new Uri("https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDateRangePicker.html") });
+            calendarDateRangePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - Getting Started", Uri = new Uri("https://help.syncfusion.com/winui/calendar-daterange-picker/getting-started") });
+            calendarDateRangePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - View Navigation", Uri = new Uri("https://help.syncfusion.com/winui/calendar-daterange-picker/navigation") });
+            calendarDateRangePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - Calendar Types", Uri = new Uri("https://help.syncfusion.com/winui/calendar-daterange-picker/localization-and-formatting#types-of-calendar") });
+            calendarDateRangePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - Date Formatting", Uri = new Uri("https://help.syncfusion.com/winui/calendar-daterange-picker/localization-and-formatting#change-calendar-display-format") });
+            calendarDateRangePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - Preset Items", Uri = new Uri("https://help.syncfusion.com/winui/calendar-daterange-picker/show-preset-items") });
+            calendarDateRangePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - Block All Weekends", Uri = new Uri("https://help.syncfusion.com/winui/calendar-daterange-picker/restrict-daterange-selection#disable-dates-dynamically-all-weekend-days") });
+            calendarDateRangePickerDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - Block Specific Dates", Uri = new Uri("https://help.syncfusion.com/winui/calendar-daterange-picker/restrict-daterange-selection#disable-dates-using-blackoutdates") });
+            calendarDateRangePickerDemo.Documentation.AddRange(calendarDatePickerDemoDocumentations);
+
+            DemoInfo calendarDateRangePickerCustomizationDemo = new DemoInfo()
+            {
+                Name = "Styles and Templates",
+                Category = "Calendar DateRange Picker",
+                DemoType = DemoTypes.None,
+                Description = "Customization of styles and templates of the Calendar DateRange Picker.",
+                DemoView = typeof(Views.CalendarDateRangePicker.Customization),
+                ShowInfoPanel = true
+            };
+            List<Documentation> calendarDateRangePickerCustomizationDemoDocumentations = new List<Documentation>();
+            calendarDateRangePickerCustomizationDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - API Reference", Uri = new Uri("https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Calendar.SfCalendarDateRangePicker.html") });
+            calendarDateRangePickerCustomizationDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - Getting Started", Uri = new Uri("https://help.syncfusion.com/winui/calendar-daterange-picker/getting-started") });
+            calendarDateRangePickerCustomizationDemoDocumentations.Add(new Documentation() { Content = "CalendarDateRangePicker - Specific Cell's Custom UI", Uri = new Uri("https://help.syncfusion.com/winui/calendar-daterange-picker/calendar-ui-customization#customize-individual-items-in-calendar") });
+            calendarDateRangePickerCustomizationDemo.Documentation.AddRange(calendarDatePickerCustomizationDemoDocumentations);
+
+
+            var calendarDateRangePicker = new ControlInfo()
+            {
+                Control = DemoControl.SfCalendarDateRangePicker,
+                ControlBadge = ControlBadge.None,
+                ControlCategory = ControlCategory.Calendars,
+                Description = "The Calendar DateRangePicker is a drop-down control optimized for selecting a range of dates from a calendar control.",
+                Glyph = "\uE713",
+                ImageSource= "CalendarDateRangePicker.png",
+                IsPreview = true
+            };
+            calendarDateRangePicker.Demos.Add(calendarDateRangePickerDemo);
+            calendarDateRangePicker.Demos.Add(calendarDateRangePickerCustomizationDemo);
+
+            var controlInfos = new List<ControlInfo>()
+            {
+                calendar,
+                calendarDatePicker,
+                calendarDateRangePicker
+            };
+
+            DemoHelper.ControlInfos.AddRange(controlInfos);
+        }
+    }
+}

calendar/Syncfusion.CalendarDemos.WinUI_Net50.csproj

@@ -0,0 +1,188 @@
+<Project Sdk="Microsoft.NET.Sdk">
+	<Import Project="..\syncfusion.common.desktop.props"/>
+	<PropertyGroup>
+		<OutputType>WinExe</OutputType>
+		<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+		<EnableDefaultCompileItems>false</EnableDefaultCompileItems>
+		<EnableDefaultPageItems>false</EnableDefaultPageItems>
+		<TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion>
+		<TargetFramework>net5.0-windows10.0.19041.0</TargetFramework>
+		<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
+		<AssemblyName>Syncfusion.CalendarDemos.WinUI</AssemblyName>
+		<RootNamespace>Syncfusion.CalendarDemos.WinUI</RootNamespace>
+		<ApplicationManifest>app.manifest</ApplicationManifest>
+		<Platforms>AnyCPU;x86;x64</Platforms>
+		<RuntimeIdentifiers>win-x86;win-x64</RuntimeIdentifiers>
+		<EnablePreviewMsixTooling>true</EnablePreviewMsixTooling>
+		<PublishProfile>Properties\PublishProfiles\win10-$(Platform).pubxml</PublishProfile>
+		<NoWarn>CA1416</NoWarn>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x86'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x86\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop;</DefineConstants>
+		<DebugType>full</DebugType>
+		<PlatformTarget>x86</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x86'">
+		<OutputPath>bin\x86\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop;</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<PlatformTarget>x86</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+		<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x64'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x64\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop;</DefineConstants>
+		<DebugType>full</DebugType>
+		<PlatformTarget>x64</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x64'">
+		<OutputPath>bin\x64\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop;</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<PlatformTarget>x64</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+		<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
+	</PropertyGroup>
+	<ItemGroup>
+		<EmbeddedResource Remove="Converters\**"/>
+		<EmbeddedResource Remove="Views\ColorPalette\**"/>
+		<EmbeddedResource Remove="Views\ColorPicker\**"/>
+		<EmbeddedResource Remove="Views\DatePicker\**"/>
+		<EmbeddedResource Remove="Views\DropDownColorPalette\**"/>
+		<EmbeddedResource Remove="Views\DropDownColorPicker\**"/>
+		<EmbeddedResource Remove="Views\TimePicker\**"/>
+		<None Remove="Converters\**"/>
+		<None Remove="Views\ColorPalette\**"/>
+		<None Remove="Views\ColorPicker\**"/>
+		<None Remove="Views\DatePicker\**"/>
+		<None Remove="Views\DropDownColorPalette\**"/>
+		<None Remove="Views\DropDownColorPicker\**"/>
+		<None Remove="Views\TimePicker\**"/>
+	</ItemGroup>
+	<ItemGroup>
+		<None Remove="Package.appxmanifest"/>
+		<None Remove="Properties\Default.rd.xml"/>
+		<None Remove="syncfusion.calendardemos.winui_TemporaryKey.pfx"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Compile Include="App.xaml.cs">
+			<DependentUpon>App.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Converter\DateFormatToDisplayFormatConverter.cs"/>
+		<Compile Include="Properties\AssemblyInfo.cs"/>
+		<Compile Include="SamplesConfiguration.cs"/>
+		<Compile Include="ViewModel\CalendarViewModel.cs"/>
+		<Compile Include="Views\CalendarDatePicker\CalendarDatePickerView.xaml.cs">
+			<DependentUpon>CalendarDatePickerView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="MainWindow.xaml.cs">
+			<DependentUpon>MainWindow.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDatePicker\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDateRangePicker\CalendarDateRangePickerView.xaml.cs">
+			<DependentUpon>CalendarDateRangePickerView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDateRangePicker\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\CalendarView.xaml.cs">
+			<DependentUpon>CalendarView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\StylesAndTemplates.xaml.cs">
+			<DependentUpon>StylesAndTemplates.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\Resources\CustomCalendarItemTemplateSelector.cs"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\Navigation_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\SimpleCalendarDatePicker_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\RangeSelection_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Navigation_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Preset_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\DateRangePicker_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\WeekNumber_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\DateNavigation_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\SimpleCalendar_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Page Include="MainWindow.xaml"/>
+		<Page Include="Views\CalendarDatePicker\CalendarDatePickerView.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\CalendarDatePicker\Customization.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+		<Page Include="Views\CalendarDateRangePicker\CalendarDateRangePickerView.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+		<Page Include="Views\CalendarDateRangePicker\Customization.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\Calendar\CalendarView.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+		<Page Include="Views\Calendar\StylesAndTemplates.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\Calendar\Customization.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Syncfusion.Editors.WinUI" Version="20.3.0.47"/>
+		<PackageReference Include="Syncfusion.Calendar.WinUI" Version="20.3.0.47"/>
+		<Manifest Include="$(ApplicationManifest)"/>
+	</ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\common\Syncfusion.DemosCommon.WinUI_lib_Net50.csproj"/>
+	</ItemGroup>
+</Project>

calendar/Syncfusion.CalendarDemos.WinUI_Net50.sln

@@ -0,0 +1,101 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.30524.135
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.CalendarDemos.WinUI_Net50", "Syncfusion.CalendarDemos.WinUI_Net50.csproj", "{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.DemosCommon.WinUI_lib_Net50", "..\common\Syncfusion.DemosCommon.WinUI_lib_Net50.csproj", "{8CE3E274-901E-4319-9DFC-6F381A5BD740}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Debug|x64 = Debug|x64
+		Debug|x86 = Debug|x86
+		Release|Any CPU = Release|Any CPU
+		Release|x64 = Release|x64
+		Release|x86 = Release|x86
+		Release-Xml|Any CPU = Release-Xml|Any CPU
+		Release-Xml|x64 = Release-Xml|x64
+		Release-Xml|x86 = Release-Xml|x86
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Debug|Any CPU.ActiveCfg = Debug|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Debug|x64.ActiveCfg = Debug|x64
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Debug|x64.Build.0 = Debug|x64
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Debug|x64.Deploy.0 = Debug|x64
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Debug|x86.ActiveCfg = Debug|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Debug|x86.Build.0 = Debug|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Debug|x86.Deploy.0 = Debug|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release|Any CPU.ActiveCfg = Release|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release|x64.ActiveCfg = Release|x64
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release|x64.Build.0 = Release|x64
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release|x64.Deploy.0 = Release|x64
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release|x86.ActiveCfg = Release|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release|x86.Build.0 = Release|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release|x86.Deploy.0 = Release|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release-Xml|Any CPU.ActiveCfg = Release|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release-Xml|Any CPU.Build.0 = Release|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release-Xml|Any CPU.Deploy.0 = Release|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release-Xml|x64.ActiveCfg = Release|x64
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release-Xml|x64.Build.0 = Release|x64
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release-Xml|x64.Deploy.0 = Release|x64
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release-Xml|x86.ActiveCfg = Release|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release-Xml|x86.Build.0 = Release|x86
+		{5693E981-72C1-4A21-AA27-F3DBDECF14A7}.Release-Xml|x86.Deploy.0 = Release|x86
+		
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Debug|Any CPU.ActiveCfg = Debug|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Debug|x64.ActiveCfg = Debug|x64
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Debug|x64.Build.0 = Debug|x64
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Debug|x64.Deploy.0 = Debug|x64
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Debug|x86.ActiveCfg = Debug|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Debug|x86.Build.0 = Debug|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Debug|x86.Deploy.0 = Debug|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release|Any CPU.ActiveCfg = Release|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release|x64.ActiveCfg = Release|x64
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release|x64.Build.0 = Release|x64
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release|x64.Deploy.0 = Release|x64
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release|x86.ActiveCfg = Release|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release|x86.Build.0 = Release|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release|x86.Deploy.0 = Release|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release-Xml|Any CPU.ActiveCfg = Release|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release-Xml|Any CPU.Build.0 = Release|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release-Xml|Any CPU.Deploy.0 = Release|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release-Xml|x64.ActiveCfg = Release|x64
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release-Xml|x64.Build.0 = Release|x64
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release-Xml|x64.Deploy.0 = Release|x64
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release-Xml|x86.ActiveCfg = Release|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release-Xml|x86.Build.0 = Release|x86
+		{FBDA1878-7B75-4579-9EFF-A14FCFBC2EBC}.Release-Xml|x86.Deploy.0 = Release|x86
+		
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Debug|Any CPU.ActiveCfg = Debug|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Debug|x64.ActiveCfg = Debug|x64
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Debug|x64.Build.0 = Debug|x64
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Debug|x64.Deploy.0 = Debug|x64
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Debug|x86.ActiveCfg = Debug|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Debug|x86.Build.0 = Debug|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Debug|x86.Deploy.0 = Debug|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release|Any CPU.ActiveCfg = Release|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release|x64.ActiveCfg = Release|x64
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release|x64.Build.0 = Release|x64
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release|x64.Deploy.0 = Release|x64
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release|x86.ActiveCfg = Release|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release|x86.Build.0 = Release|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release|x86.Deploy.0 = Release|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release-Xml|Any CPU.ActiveCfg = Release|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release-Xml|Any CPU.Build.0 = Release|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release-Xml|Any CPU.Deploy.0 = Release|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release-Xml|x64.ActiveCfg = Release|x64
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release-Xml|x64.Build.0 = Release|x64
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release-Xml|x64.Deploy.0 = Release|x64
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release-Xml|x86.ActiveCfg = Release|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release-Xml|x86.Build.0 = Release|x86
+		{8CE3E274-901E-4319-9DFC-6F381A5BD740}.Release-Xml|x86.Deploy.0 = Release|x86
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {62DDDC4C-89D6-4095-8B7B-89883666532D}
+	EndGlobalSection
+EndGlobal

calendar/Syncfusion.CalendarDemos.WinUI_Net60.csproj

@@ -0,0 +1,188 @@
+<Project Sdk="Microsoft.NET.Sdk">
+	<Import Project="..\syncfusion.common.desktop.props"/>
+	<PropertyGroup>
+		<OutputType>WinExe</OutputType>
+		<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+		<EnableDefaultCompileItems>false</EnableDefaultCompileItems>
+		<EnableDefaultPageItems>false</EnableDefaultPageItems>
+		<TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion>
+		<TargetFramework>net6.0-windows10.0.19041.0</TargetFramework>
+		<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
+		<AssemblyName>Syncfusion.CalendarDemos.WinUI</AssemblyName>
+		<RootNamespace>Syncfusion.CalendarDemos.WinUI</RootNamespace>
+		<ApplicationManifest>app.manifest</ApplicationManifest>
+		<Platforms>AnyCPU;x86;x64</Platforms>
+		<RuntimeIdentifiers>win-x86;win-x64</RuntimeIdentifiers>
+		<EnablePreviewMsixTooling>true</EnablePreviewMsixTooling>
+		<PublishProfile>Properties\PublishProfiles\win10-$(Platform).pubxml</PublishProfile>
+		<NoWarn>CA1416</NoWarn>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x86'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x86\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop;</DefineConstants>
+		<DebugType>full</DebugType>
+		<PlatformTarget>x86</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x86'">
+		<OutputPath>bin\x86\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop;</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<PlatformTarget>x86</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+		<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x64'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x64\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop;</DefineConstants>
+		<DebugType>full</DebugType>
+		<PlatformTarget>x64</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x64'">
+		<OutputPath>bin\x64\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop;</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<PlatformTarget>x64</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+		<Prefer32Bit>true</Prefer32Bit>
+		<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
+	</PropertyGroup>
+	<ItemGroup>
+		<EmbeddedResource Remove="Converters\**"/>
+		<EmbeddedResource Remove="Views\ColorPalette\**"/>
+		<EmbeddedResource Remove="Views\ColorPicker\**"/>
+		<EmbeddedResource Remove="Views\DatePicker\**"/>
+		<EmbeddedResource Remove="Views\DropDownColorPalette\**"/>
+		<EmbeddedResource Remove="Views\DropDownColorPicker\**"/>
+		<EmbeddedResource Remove="Views\TimePicker\**"/>
+		<None Remove="Converters\**"/>
+		<None Remove="Views\ColorPalette\**"/>
+		<None Remove="Views\ColorPicker\**"/>
+		<None Remove="Views\DatePicker\**"/>
+		<None Remove="Views\DropDownColorPalette\**"/>
+		<None Remove="Views\DropDownColorPicker\**"/>
+		<None Remove="Views\TimePicker\**"/>
+	</ItemGroup>
+	<ItemGroup>
+		<None Remove="Package.appxmanifest"/>
+		<None Remove="Properties\Default.rd.xml"/>
+		<None Remove="syncfusion.calendardemos.winui_TemporaryKey.pfx"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Compile Include="App.xaml.cs">
+			<DependentUpon>App.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Converter\DateFormatToDisplayFormatConverter.cs"/>
+		<Compile Include="Properties\AssemblyInfo.cs"/>
+		<Compile Include="SamplesConfiguration.cs"/>
+		<Compile Include="ViewModel\CalendarViewModel.cs"/>
+		<Compile Include="Views\CalendarDatePicker\CalendarDatePickerView.xaml.cs">
+			<DependentUpon>CalendarDatePickerView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="MainWindow.xaml.cs">
+			<DependentUpon>MainWindow.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDatePicker\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDateRangePicker\CalendarDateRangePickerView.xaml.cs">
+			<DependentUpon>CalendarDateRangePickerView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDateRangePicker\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\CalendarView.xaml.cs">
+			<DependentUpon>CalendarView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\StylesAndTemplates.xaml.cs">
+			<DependentUpon>StylesAndTemplates.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\Resources\CustomCalendarItemTemplateSelector.cs"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\Navigation_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\SimpleCalendarDatePicker_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\RangeSelection_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Navigation_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Preset_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\DateRangePicker_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\WeekNumber_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\DateNavigation_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\SimpleCalendar_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Page Include="MainWindow.xaml"/>
+		<Page Include="Views\CalendarDatePicker\CalendarDatePickerView.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\CalendarDatePicker\Customization.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+		<Page Include="Views\CalendarDateRangePicker\CalendarDateRangePickerView.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+		<Page Include="Views\CalendarDateRangePicker\Customization.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\Calendar\CalendarView.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+		<Page Include="Views\Calendar\StylesAndTemplates.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\Calendar\Customization.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Syncfusion.Editors.WinUI" Version="20.3.0.47"/>
+		<PackageReference Include="Syncfusion.Calendar.WinUI" Version="20.3.0.47"/>
+		<Manifest Include="$(ApplicationManifest)"/>
+	</ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\common\Syncfusion.DemosCommon.WinUI_lib_Net60.csproj"/>
+	</ItemGroup>
+</Project>

calendar/Syncfusion.CalendarDemos.WinUI_Net60.sln

@@ -0,0 +1,45 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.2.32210.308
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.CalendarDemos.WinUI_Net60", "Syncfusion.CalendarDemos.WinUI_Net60.csproj", "{1FE280A9-39A3-445F-A5A6-761081E30991}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.DemosCommon.WinUI_lib_Net60", "..\common\Syncfusion.DemosCommon.WinUI_lib_Net60.csproj", "{453F5862-BF8C-4F7D-BFC6-7DC247FD1339}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|x64 = Debug|x64
+		Debug|x86 = Debug|x86
+		Release|x64 = Release|x64
+		Release|x86 = Release|x86
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Debug|x64.ActiveCfg = Debug|x64
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Debug|x64.Build.0 = Debug|x64
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Debug|x64.Deploy.0 = Debug|x64
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Debug|x86.ActiveCfg = Debug|x86
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Debug|x86.Build.0 = Debug|x86
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Debug|x86.Deploy.0 = Debug|x86
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Release|x64.ActiveCfg = Release|x64
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Release|x64.Build.0 = Release|x64
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Release|x64.Deploy.0 = Release|x64
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Release|x86.ActiveCfg = Release|x86
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Release|x86.Build.0 = Release|x86
+		{1FE280A9-39A3-445F-A5A6-761081E30991}.Release|x86.Deploy.0 = Release|x86
+		{453F5862-BF8C-4F7D-BFC6-7DC247FD1339}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{453F5862-BF8C-4F7D-BFC6-7DC247FD1339}.Debug|x64.Build.0 = Debug|Any CPU
+		{453F5862-BF8C-4F7D-BFC6-7DC247FD1339}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{453F5862-BF8C-4F7D-BFC6-7DC247FD1339}.Debug|x86.Build.0 = Debug|Any CPU
+		{453F5862-BF8C-4F7D-BFC6-7DC247FD1339}.Release|x64.ActiveCfg = Release|Any CPU
+		{453F5862-BF8C-4F7D-BFC6-7DC247FD1339}.Release|x64.Build.0 = Release|Any CPU
+		{453F5862-BF8C-4F7D-BFC6-7DC247FD1339}.Release|x86.ActiveCfg = Release|Any CPU
+		{453F5862-BF8C-4F7D-BFC6-7DC247FD1339}.Release|x86.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {5C053C8B-907D-43A1-A8E7-B642A12A3660}
+	EndGlobalSection
+EndGlobal

calendar/Syncfusion.CalendarDemos.WinUI_lib_Net50.csproj

@@ -0,0 +1,202 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project Sdk="Microsoft.NET.Sdk">
+	<Import Project="..\syncfusion.common.desktop.props"/>
+	<PropertyGroup>
+		<TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion>
+		<TargetFramework>net5.0-windows10.0.19041.0</TargetFramework>
+		<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
+		<RootNamespace>syncfusion.calendardemos.winui</RootNamespace>
+		<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+		<EnableDefaultCompileItems>false</EnableDefaultCompileItems>
+		<EnableDefaultPageItems>false</EnableDefaultPageItems>
+		<Platforms>AnyCPU;x86;x64</Platforms>
+		<RuntimeIdentifiers>win-x86;win-x64</RuntimeIdentifiers>
+		<AssemblyName>syncfusion.calendardemos.winui</AssemblyName>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<NoWarn>CA1416</NoWarn>
+		<UseWinUI>true</UseWinUI>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|AnyCPU'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<DebugType>full</DebugType>
+		<Optimize>false</Optimize>
+		<PlatformTarget>AnyCPU</PlatformTarget>
+		<ErrorReport>prompt</ErrorReport>
+		<WarningLevel>4</WarningLevel>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|AnyCPU'">
+		<OutputPath>bin\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<DebugType>pdbonly</DebugType>
+		<Optimize>true</Optimize>
+		<PlatformTarget>AnyCPU</PlatformTarget>
+		<ErrorReport>prompt</ErrorReport>
+		<WarningLevel>4</WarningLevel>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x86'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x86\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<DebugType>full</DebugType>
+		<PlatformTarget>x86</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x86'">
+		<OutputPath>bin\x86\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<PlatformTarget>x86</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x64'">
+		<DebugSymbols>true</DebugSymbols>
+		<OutputPath>bin\x64\Debug\</OutputPath>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<DebugType>full</DebugType>
+		<PlatformTarget>x64</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+	</PropertyGroup>
+	<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x64'">
+		<OutputPath>bin\x64\Release\</OutputPath>
+		<DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<Optimize>true</Optimize>
+		<DebugType>pdbonly</DebugType>
+		<PlatformTarget>x64</PlatformTarget>
+		<UseVSHostingProcess>false</UseVSHostingProcess>
+		<ErrorReport>prompt</ErrorReport>
+	</PropertyGroup>
+	<ItemGroup>
+		<Content Remove="Assets\**"/>
+		<Content Remove="syncfusion.calendardemos.winui_net50 %28Package%29\**"/>
+		<EmbeddedResource Remove="Assets\**"/>
+		<EmbeddedResource Remove="Converters\**"/>
+		<EmbeddedResource Remove="Properties\PublishProfiles\**"/>
+		<EmbeddedResource Remove="syncfusion.calendardemos.winui_net50 %28Package%29\**"/>
+		<EmbeddedResource Remove="Views\ColorPalette\**"/>
+		<EmbeddedResource Remove="Views\ColorPicker\**"/>
+		<EmbeddedResource Remove="Views\DatePicker\**"/>
+		<EmbeddedResource Remove="Views\DropDownColorPalette\**"/>
+		<EmbeddedResource Remove="Views\DropDownColorPicker\**"/>
+		<EmbeddedResource Remove="Views\TimePicker\**"/>
+		<None Remove="Assets\**"/>
+		<None Remove="Converters\**"/>
+		<None Remove="Properties\PublishProfiles\**"/>
+		<None Remove="syncfusion.calendardemos.winui_net50 %28Package%29\**"/>
+		<None Remove="Views\ColorPalette\**"/>
+		<None Remove="Views\ColorPicker\**"/>
+		<None Remove="Views\DatePicker\**"/>
+		<None Remove="Views\DropDownColorPalette\**"/>
+		<None Remove="Views\DropDownColorPicker\**"/>
+		<None Remove="Views\TimePicker\**"/>
+		<PRIResource Remove="syncfusion.calendardemos.winui_net50 %28Package%29\**"/>
+		<None Remove="app.manifest"/>
+		<None Remove="App.xaml"/>
+		<None Remove="MainWindow.xaml"/>
+		<None Remove="Package.appxmanifest"/>
+		<None Remove="Properties\Default.rd.xml"/>
+		<None Remove="syncfusion.calendardemos.winui_TemporaryKey.pfx"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Compile Include="Converter\DateFormatToDisplayFormatConverter.cs"/>
+		<Compile Include="ViewModel\CalendarViewModel.cs"/>
+		<Compile Include="Views\CalendarDatePicker\CalendarDatePickerView.xaml.cs">
+			<DependentUpon>CalendarDatePickerView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDatePicker\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDateRangePicker\CalendarDateRangePickerView.xaml.cs">
+			<DependentUpon>CalendarDateRangePickerView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDateRangePicker\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\CalendarView.xaml.cs">
+			<DependentUpon>CalendarView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\StylesAndTemplates.xaml.cs">
+			<DependentUpon>StylesAndTemplates.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\Resources\CustomCalendarItemTemplateSelector.cs"/>
+		<Compile Include="Properties\AssemblyInfo.cs"/>
+		<Compile Include="SamplesConfiguration.cs"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\Navigation_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\SimpleCalendarDatePicker_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\RangeSelection_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Navigation_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Preset_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\DateRangePicker_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\DateNavigation_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\WeekNumber_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\SimpleCalendar_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Page Include="Views\CalendarDatePicker\CalendarDatePickerView.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\CalendarDateRangePicker\CalendarDateRangePickerView.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+		<Page Include="Views\CalendarDateRangePicker\Customization.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\CalendarDatePicker\Customization.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\Calendar\CalendarView.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\Calendar\StylesAndTemplates.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\Calendar\Customization.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Syncfusion.Editors.WinUI" Version="20.3.0.47"/>
+		<PackageReference Include="Syncfusion.Calendar.WinUI" Version="20.3.0.47"/>
+	</ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\common\Syncfusion.DemosCommon.WinUI_lib_Net50.csproj"/>
+	</ItemGroup>
+</Project>

calendar/Syncfusion.CalendarDemos.WinUI_lib_Net50.sln

@@ -0,0 +1,37 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.30523.141
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "syncfusion.calendardemos.winui_lib_net50", "syncfusion.calendardemos.winui_lib_net50.csproj", "{91CCC31D-39F8-4254-90B8-789EACACB53F}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Debug|x64 = Debug|x64
+		Debug|x86 = Debug|x86
+		Release|Any CPU = Release|Any CPU
+		Release|x64 = Release|x64
+		Release|x86 = Release|x86
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Debug|x64.ActiveCfg = Debug|x64
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Debug|x64.Build.0 = Debug|x64
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Debug|x86.ActiveCfg = Debug|x86
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Debug|x86.Build.0 = Debug|x86
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Release|Any CPU.Build.0 = Release|Any CPU
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Release|x64.ActiveCfg = Release|x64
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Release|x64.Build.0 = Release|x64
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Release|x86.ActiveCfg = Release|x86
+		{91CCC31D-39F8-4254-90B8-789EACACB53F}.Release|x86.Build.0 = Release|x86
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {DEEAC0AD-E82C-49B1-859B-2C020C150FA5}
+	EndGlobalSection
+EndGlobal

calendar/Syncfusion.CalendarDemos.WinUI_lib_Net60.csproj

@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project Sdk="Microsoft.NET.Sdk">
+	<Import Project="..\syncfusion.common.desktop.props"/>
+	<PropertyGroup>
+		<TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion>
+		<TargetFramework>net6.0-windows10.0.19041.0</TargetFramework>
+		<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
+		<RootNamespace>syncfusion.calendardemos.winui</RootNamespace>
+		<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+		<EnableDefaultCompileItems>false</EnableDefaultCompileItems>
+		<EnableDefaultPageItems>false</EnableDefaultPageItems>
+		<RuntimeIdentifiers>win-x86;win-x64</RuntimeIdentifiers>
+		<AssemblyName>syncfusion.calendardemos.winui</AssemblyName>
+		<DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;WinUI_Desktop</DefineConstants>
+		<NoWarn>CA1416</NoWarn>
+		<UseWinUI>true</UseWinUI>
+	</PropertyGroup>
+	<ItemGroup>
+		<Content Remove="Assets\**"/>
+		<Content Remove="syncfusion.calendardemos.winui_net50 %28Package%29\**"/>
+		<EmbeddedResource Remove="Assets\**"/>
+		<EmbeddedResource Remove="Converters\**"/>
+		<EmbeddedResource Remove="Properties\PublishProfiles\**"/>
+		<EmbeddedResource Remove="syncfusion.calendardemos.winui_net50 %28Package%29\**"/>
+		<EmbeddedResource Remove="Views\ColorPalette\**"/>
+		<EmbeddedResource Remove="Views\ColorPicker\**"/>
+		<EmbeddedResource Remove="Views\DatePicker\**"/>
+		<EmbeddedResource Remove="Views\DropDownColorPalette\**"/>
+		<EmbeddedResource Remove="Views\DropDownColorPicker\**"/>
+		<EmbeddedResource Remove="Views\TimePicker\**"/>
+		<None Remove="Assets\**"/>
+		<None Remove="Converters\**"/>
+		<None Remove="Properties\PublishProfiles\**"/>
+		<None Remove="syncfusion.calendardemos.winui_net50 %28Package%29\**"/>
+		<None Remove="Views\ColorPalette\**"/>
+		<None Remove="Views\ColorPicker\**"/>
+		<None Remove="Views\DatePicker\**"/>
+		<None Remove="Views\DropDownColorPalette\**"/>
+		<None Remove="Views\DropDownColorPicker\**"/>
+		<None Remove="Views\TimePicker\**"/>
+		<PRIResource Remove="syncfusion.calendardemos.winui_net50 %28Package%29\**"/>
+		<None Remove="app.manifest"/>
+		<None Remove="App.xaml"/>
+		<None Remove="MainWindow.xaml"/>
+		<None Remove="Package.appxmanifest"/>
+		<None Remove="Properties\Default.rd.xml"/>
+		<None Remove="syncfusion.calendardemos.winui_TemporaryKey.pfx"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Compile Include="Converter\DateFormatToDisplayFormatConverter.cs"/>
+		<Compile Include="ViewModel\CalendarViewModel.cs"/>
+		<Compile Include="Views\CalendarDatePicker\CalendarDatePickerView.xaml.cs">
+			<DependentUpon>CalendarDatePickerView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDatePicker\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDateRangePicker\CalendarDateRangePickerView.xaml.cs">
+			<DependentUpon>CalendarDateRangePickerView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\CalendarDateRangePicker\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\CalendarView.xaml.cs">
+			<DependentUpon>CalendarView.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\StylesAndTemplates.xaml.cs">
+			<DependentUpon>StylesAndTemplates.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\Customization.xaml.cs">
+			<DependentUpon>Customization.xaml</DependentUpon>
+		</Compile>
+		<Compile Include="Views\Calendar\Resources\CustomCalendarItemTemplateSelector.cs"/>
+		<Compile Include="Properties\AssemblyInfo.cs"/>
+		<Compile Include="SamplesConfiguration.cs"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\Navigation_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\SimpleCalendarDatePicker_xaml.txt"/>
+		<Content Include="Views\CalendarDatePicker\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\RangeSelection_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Navigation_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\Preset_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\DateRangePicker_xaml.txt"/>
+		<Content Include="Views\CalendarDateRangePicker\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\BlackoutDates_cs.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\BlackoutDates_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\CalendarTypes_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\DateNavigation_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\WeekNumber_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\Formatting_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ItemTemplateSelector_cs.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ItemTemplateSelector_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\SimpleCalendar_xaml.txt"/>
+		<Content Include="Views\Calendar\Resources\SourceCodes\ThemeKeyCustomization_xaml.txt"/>
+	</ItemGroup>
+	<ItemGroup>
+		<Page Include="Views\CalendarDatePicker\CalendarDatePickerView.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\CalendarDateRangePicker\CalendarDateRangePickerView.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+		<Page Include="Views\CalendarDateRangePicker\Customization.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\CalendarDatePicker\Customization.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\Calendar\CalendarView.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\Calendar\StylesAndTemplates.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+		<Page Include="Views\Calendar\Customization.xaml">
+			<Generator>MSBuild:Compile</Generator>
+			<SubType>Designer</SubType>
+		</Page>
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Syncfusion.Editors.WinUI" Version="20.3.0.47"/>
+		<PackageReference Include="Syncfusion.Calendar.WinUI" Version="20.3.0.47"/>
+	</ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\common\Syncfusion.DemosCommon.WinUI_lib_Net60.csproj"/>
+	</ItemGroup>
+</Project>

calendar/Syncfusion.CalendarDemos.WinUI_lib_Net60.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.0.32014.148
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Syncfusion.CalendarDemos.WinUI_lib_Net60", "Syncfusion.CalendarDemos.WinUI_lib_Net60.csproj", "{527B6F63-3B63-4DCA-8489-1027774D51F4}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{527B6F63-3B63-4DCA-8489-1027774D51F4}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{527B6F63-3B63-4DCA-8489-1027774D51F4}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{527B6F63-3B63-4DCA-8489-1027774D51F4}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{527B6F63-3B63-4DCA-8489-1027774D51F4}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {8E182D8A-66FF-4E7D-8BBF-574F7100227D}
+	EndGlobalSection
+EndGlobal

calendar/ViewModel/CalendarViewModel.cs

@@ -0,0 +1,466 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using Microsoft.UI.Xaml.Controls;
+using Syncfusion.UI.Xaml.Calendar;
+using Syncfusion.UI.Xaml.Core;
+using Syncfusion.UI.Xaml.Editors;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+
+namespace Syncfusion.CalendarDemos.WinUI
+{
+    public class CalendarViewModel : NotificationObject
+    {
+        private DateTimeOffset minDate = new DateTimeOffset(1921, 1, 1, DateTimeOffset.Now.Hour, DateTimeOffset.Now.Minute, DateTimeOffset.Now.Second, DateTimeOffset.Now.Offset);
+        private DateTimeOffset maxDate = new DateTimeOffset(2121, 12, 31, DateTimeOffset.Now.Hour, DateTimeOffset.Now.Minute, DateTimeOffset.Now.Second, DateTimeOffset.Now.Offset);
+        private DateTimeOffset? selectedDate = DateTimeOffset.Now;
+        private DateTimeOffsetCollection blackoutDates = new DateTimeOffsetCollection();
+        private DateTimeOffsetCollection blackoutSpecificDates = new DateTimeOffsetCollection();
+        private CalendarDisplayMode minDisplayMode = CalendarDisplayMode.Month;
+        private CalendarDisplayMode maxDisplayMode = CalendarDisplayMode.Century;
+        private DateTimeOffset minimumDate = new DateTimeOffset(1601, 1, 1, 6, 0, 0, new TimeSpan(0));
+        private DateTimeOffset maximumDate = DateTimeOffset.MaxValue;
+        private DateTimeOffsetRange selectedRange;
+        private DateTimeOffsetRange selectionRange;
+
+        public DateTimeOffsetRange SelectedRange
+        {
+            get
+            {
+                return selectedRange;
+            }
+            set
+            {
+                selectedRange = value;
+                this.RaisePropertyChanged(nameof(this.SelectedRange));
+            }
+        }
+        public DateTimeOffsetRange SelectionRange
+        {
+            get
+            {
+                return selectionRange;
+            }
+            set
+            {
+                selectionRange = value;
+                this.RaisePropertyChanged(nameof(this.SelectionRange));
+            }
+        }
+
+        public CalendarDisplayMode MinDisplayMode
+        {
+            get { return minDisplayMode; }
+            set
+            {
+                if (value != minDisplayMode)
+                {
+                    minDisplayMode = value;
+                    if (maxDisplayMode < minDisplayMode)
+                    {
+                        MaxDisplayMode = minDisplayMode;
+                    }
+                    RaisePropertyChanged(nameof(MinDisplayMode));
+                }
+            }
+        }
+
+        public CalendarDisplayMode MaxDisplayMode
+        {
+            get { return maxDisplayMode; }
+            set
+            {
+                if (value != maxDisplayMode)
+                {
+                    maxDisplayMode = value;
+                    if (minDisplayMode > maxDisplayMode)
+                    {
+                        MinDisplayMode = maxDisplayMode;
+                    }
+                    RaisePropertyChanged(nameof(MaxDisplayMode));
+                }
+            }
+        }
+
+        private string dateFormat = "{month.full}";
+
+        public string DateFormat
+        {
+            get { return dateFormat; }
+            set { dateFormat = value; RaisePropertyChanged(nameof(DateFormat)); }
+        }
+
+        private bool showSubmit;
+
+        public bool ShowSubmitButtons
+        {
+            get { return showSubmit; }
+            set { showSubmit = value; RaisePropertyChanged(nameof(ShowSubmitButtons)); }
+        }
+
+        private ulong minDaycount;
+
+        public ulong MinDayCount
+        {
+            get { return minDaycount; }
+            set { minDaycount = value; 
+                RaisePropertyChanged(nameof(MinDayCount)); 
+            }
+        }
+
+        private ulong? maxDaycount;
+
+        public ulong? MaxDayCount
+        {
+            get { return maxDaycount; }
+            set { maxDaycount = value; RaisePropertyChanged(nameof(MaxDayCount)); }
+        }
+
+        private ObservableCollection<string> presetCollection;
+
+        public ObservableCollection<string> PresetColection
+        {
+            get { return presetCollection; }
+            set { presetCollection = value; RaisePropertyChanged(nameof(PresetColection)); }
+        }
+
+        private bool showCalendar = true;
+
+        public bool ShowCalendar
+        {
+            get { return showCalendar ; }
+            set { showCalendar  = value; RaisePropertyChanged(nameof(ShowCalendar)); }
+        }
+       
+        public CalendarViewModel()
+        {
+            this.UpdateWeekendDates();
+            this.AddBlackoutDates();
+
+            Items = new ObservableCollection<string>();
+            Items.Add("JulianCalendar");
+            Items.Add("GregorianCalendar");
+            Items.Add("HebrewCalendar");
+            Items.Add("HijriCalendar");
+            Items.Add("KoreanCalendar");
+            Items.Add("TaiwanCalendar");
+            Items.Add("UmAlQuraCalendar");
+            Items.Add("PersianCalendar");
+            Items.Add("ThaiCalendar");
+
+            PresetColection = new ObservableCollection<string>();
+            PresetColection.Add("This Week");
+            PresetColection.Add("This Month");
+            PresetColection.Add("Last Month");
+            PresetColection.Add("This Year");
+            PresetColection.Add("Custom Range");
+
+            var lang = new LanguageList();
+            Languages = lang.Languages;
+        }
+
+        public DateTimeOffset MinDate
+        {
+            get
+            {
+                return minDate;
+            }
+            set
+            {
+                if (minDate != value)
+                {
+                    minDate = value;
+                    this.RaisePropertyChanged(nameof(this.MinDate));
+                }
+            }
+        }
+
+        public DateTimeOffset MaxDate
+        {
+            get
+            {
+                return maxDate;
+            }
+            set
+            {
+                if (maxDate != value)
+                {
+                    maxDate = value;
+                    this.RaisePropertyChanged(nameof(this.MaxDate));
+                }
+            }
+        }
+
+        public DateTimeOffset? SelectedDate
+        {
+            get
+            {
+                return selectedDate;
+            }
+            set
+            {
+                if (selectedDate != value)
+                {
+                    selectedDate = value;
+                    this.RaisePropertyChanged(nameof(this.SelectedDate));
+                }
+            }
+        }
+
+        public DateTimeOffsetCollection BlackoutDates
+        {
+            get
+            {
+                return blackoutDates;
+            }
+            set
+            {
+                if (blackoutDates != value)
+                {
+                    blackoutDates = value;
+                    this.RaisePropertyChanged(nameof(this.BlackoutDates));
+                }
+            }
+        }
+        
+        public DateTimeOffsetCollection BlackoutSpecificDates
+        {
+            get
+            {
+                return blackoutSpecificDates;
+            }
+            set
+            {
+                if (blackoutSpecificDates != value)
+                {
+                    blackoutSpecificDates = value;
+                    this.RaisePropertyChanged(nameof(this.BlackoutSpecificDates));
+                }
+            }
+        }
+
+        public ObservableCollection<string> Items { get; set; }
+
+        public List<LanguageList.Language> Languages { get; set; }
+
+        /// <summary>
+        /// Gets or sets the minimum date for CalendarDatePicker contained in options to change Minimum and Maximum date.
+        /// </summary>
+        public DateTimeOffset MinimumDate
+        {
+            get
+            {
+                return minimumDate;
+            }
+            set
+            {
+                if (minimumDate != value)
+                {
+                    minimumDate = value;
+                    this.RaisePropertyChanged(nameof(this.MinimumDate));
+                }
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the maximum date for CalendarDatePicker contained in options to change Minimum and Maximum date.
+        /// </summary>
+        public DateTimeOffset MaximumDate
+        {
+            get
+            {
+                return maximumDate;
+            }
+            set
+            {
+                if (maximumDate != value)
+                {
+                    maximumDate = value;
+                    this.RaisePropertyChanged(nameof(this.MaximumDate));
+                }
+            }
+        }
+        private void AddBlackoutDates()
+        {
+            var date = new DateTimeOffset(new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1));
+            //BlackoutDates for Previous Month
+            BlackoutSpecificDates.Add(date.AddDays(-30));
+            BlackoutSpecificDates.Add(date.AddDays(-27));
+            BlackoutSpecificDates.Add(date.AddDays(-24));
+            BlackoutSpecificDates.Add(date.AddDays(-20));
+            BlackoutSpecificDates.Add(date.AddDays(-16));
+            BlackoutSpecificDates.Add(date.AddDays(-13));
+            BlackoutSpecificDates.Add(date.AddDays(-10));
+            BlackoutSpecificDates.Add(date.AddDays(-8));
+            BlackoutSpecificDates.Add(date.AddDays(-5));
+            BlackoutSpecificDates.Add(date.AddDays(-3));
+            BlackoutSpecificDates.Add(date.AddDays(-1));
+
+            //BlackoutDates for Current Month
+            BlackoutSpecificDates.Add(date);
+            BlackoutSpecificDates.Add(date.AddDays(4));
+            BlackoutSpecificDates.Add(date.AddDays(6));
+            BlackoutSpecificDates.Add(date.AddDays(9));
+            BlackoutSpecificDates.Add(date.AddDays(11));
+            BlackoutSpecificDates.Add(date.AddDays(13));
+            BlackoutSpecificDates.Add(date.AddDays(16));
+            BlackoutSpecificDates.Add(date.AddDays(17));
+            BlackoutSpecificDates.Add(date.AddDays(19));
+            BlackoutSpecificDates.Add(date.AddDays(23));
+            BlackoutSpecificDates.Add(date.AddDays(27));
+
+            //BlackoutDates for Next Month
+            BlackoutSpecificDates.Add(date.AddDays(31));
+            BlackoutSpecificDates.Add(date.AddDays(33));
+            BlackoutSpecificDates.Add(date.AddDays(36));
+            BlackoutSpecificDates.Add(date.AddDays(39));
+            BlackoutSpecificDates.Add(date.AddDays(43));
+            BlackoutSpecificDates.Add(date.AddDays(47));
+            BlackoutSpecificDates.Add(date.AddDays(50));
+            BlackoutSpecificDates.Add(date.AddDays(54));
+            BlackoutSpecificDates.Add(date.AddDays(58));
+            BlackoutSpecificDates.Add(date.AddDays(60));
+        }
+
+        private void UpdateWeekendDates()
+        {
+            int month = DateTime.Now.Month;
+            int year = DateTime.Now.Year;
+            int noOfDays = DateTime.DaysInMonth(year, month);
+            DateTime dateTime = new DateTime(year, month, 1);
+
+            for (int i = 0; i < noOfDays; i++)
+            {
+                DateTime date = dateTime.AddDays(i);
+                if (date.DayOfWeek == DayOfWeek.Saturday || date.DayOfWeek == DayOfWeek.Sunday)
+                {
+                    if (this.selectedDate.HasValue && this.SelectedDate.Value.Date != date)
+                        blackoutDates.Add(date);
+                }
+            }
+        }
+    }
+
+    public class LanguageList
+    {
+        private List<Language> _languages;
+        public List<Language> Languages
+        {
+            get { return _languages; }
+        }
+
+        public LanguageList()
+        {
+            if (_languages == null)
+            {
+                _languages = new List<Language>();
+            }
+
+            _languages.Add(new Language("English", "en"));
+            _languages.Add(new Language("Arabic", "ar"));
+            _languages.Add(new Language("Afrikaans", "af"));
+            _languages.Add(new Language("Albanian", "sq"));
+            _languages.Add(new Language("Amharic", "am"));
+            _languages.Add(new Language("Armenian", "hy"));
+            _languages.Add(new Language("Assamese", "as"));
+            _languages.Add(new Language("Azerbaijani", "az"));
+            _languages.Add(new Language("Basque ", "eu"));
+            _languages.Add(new Language("Belarusian", "be"));
+            _languages.Add(new Language("Bangla", "bn"));
+            _languages.Add(new Language("Bosnian", "bs"));
+            _languages.Add(new Language("Bulgarian", "bg"));
+            _languages.Add(new Language("Catalan", "ca"));
+            _languages.Add(new Language("Chinese (Simplified)", "zh"));
+            _languages.Add(new Language("Croatian", "hr"));
+            _languages.Add(new Language("Czech", "cs"));
+            _languages.Add(new Language("Danish", "da"));
+            _languages.Add(new Language("Dari", "prs"));
+            _languages.Add(new Language("Dutch", "nl"));
+            _languages.Add(new Language("Estonian", "et"));
+            _languages.Add(new Language("Filipino", "fil"));
+            _languages.Add(new Language("Finnish", "fi"));
+            _languages.Add(new Language("French ", "fr"));
+            _languages.Add(new Language("Galician", "gl"));
+            _languages.Add(new Language("Georgian", "ka"));
+            _languages.Add(new Language("German", "de"));
+            _languages.Add(new Language("Greek", "el"));
+            _languages.Add(new Language("Gujarati", "gu"));
+            _languages.Add(new Language("Hausa", "ha"));
+            _languages.Add(new Language("Hebrew", "he"));
+            _languages.Add(new Language("Hindi", "hi"));
+            _languages.Add(new Language("Hungarian", "hu"));
+            _languages.Add(new Language("Icelandic", "is"));
+            _languages.Add(new Language("Indonesian", "id"));
+            _languages.Add(new Language("Irish", "ga"));
+            _languages.Add(new Language("isiXhosa", "xh"));
+            _languages.Add(new Language("isiZulu", "zu"));
+            _languages.Add(new Language("Italian", "it"));
+            _languages.Add(new Language("Japanese ", "ja"));
+            _languages.Add(new Language("Kannada", "kn"));
+            _languages.Add(new Language("Kazakh", "kk"));
+            _languages.Add(new Language("Khmer", "km"));
+            _languages.Add(new Language("Kinyarwanda", "rw"));
+            _languages.Add(new Language("KiSwahili", "sw"));
+            _languages.Add(new Language("Konkani", "kok"));
+            _languages.Add(new Language("Korean", "ko"));
+            _languages.Add(new Language("Lao", "lo"));
+            _languages.Add(new Language("Latvian", "lv"));
+            _languages.Add(new Language("Lithuanian", "lt"));
+            _languages.Add(new Language("Luxembourgish", "lb"));
+            _languages.Add(new Language("Macedonian", "mk"));
+            _languages.Add(new Language("Malay", "ms"));
+            _languages.Add(new Language("Malayalam", "ml"));
+            _languages.Add(new Language("Maltese", "mt"));
+            _languages.Add(new Language("Maori ", "mi"));
+            _languages.Add(new Language("Marathi", "mr"));
+            _languages.Add(new Language("Nepali", "ne"));
+            _languages.Add(new Language("Norwegian", "nb"));
+            _languages.Add(new Language("Odia", "or"));
+            _languages.Add(new Language("Persian", "fa"));
+            _languages.Add(new Language("Polish", "pl"));
+            _languages.Add(new Language("Portuguese", "pt"));
+            _languages.Add(new Language("Punjabi", "pa"));
+            _languages.Add(new Language("Quechua", "quz"));
+            _languages.Add(new Language("Romanian", "ro"));
+            _languages.Add(new Language("Russian", "ru"));
+            _languages.Add(new Language("Serbian (Latin)", "sr"));
+            _languages.Add(new Language("Sesotho sa Leboa", "nso"));
+            _languages.Add(new Language("Setswana", "tn"));
+            _languages.Add(new Language("Sinhala", "si"));
+            _languages.Add(new Language("Slovak ", "sk"));
+            _languages.Add(new Language("Slovenian", "sl"));
+            _languages.Add(new Language("Spanish", "es"));
+            _languages.Add(new Language("Swedish", "sv"));
+            _languages.Add(new Language("Tamil", "ta"));
+            _languages.Add(new Language("Telugu", "te"));
+            _languages.Add(new Language("Thai", "th"));
+            _languages.Add(new Language("Tigrinya", "ti"));
+            _languages.Add(new Language("Turkish", "tr"));
+            _languages.Add(new Language("Ukrainian", "uk"));
+            _languages.Add(new Language("Urdu", "ur"));
+            _languages.Add(new Language("Uzbek (Latin)", "uz"));
+            _languages.Add(new Language("Vietnamese", "vi"));
+            _languages.Add(new Language("Welsh", "cy"));
+            _languages.Add(new Language("Wolof", "wo"));
+
+        }
+
+        public class Language
+        {
+            public string Name { get; set; }
+            public string Code { get; set; }
+
+            public Language(string name, string code)
+            {
+                this.Name = name;
+                this.Code = code;
+            }
+        }
+    }
+}

calendar/Views/Calendar/CalendarView.xaml

@@ -0,0 +1,202 @@
+<Page
+    x:Class="Syncfusion.CalendarDemos.WinUI.Views.Calendar.CalendarView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Syncfusion.CalendarDemos.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:common="using:Syncfusion.DemosCommon.WinUI"
+    xmlns:enumextension="using:Syncfusion.DemosCommon.WinUI"
+    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
+    mc:Ignorable="d"
+    Background="Transparent">
+
+    <Page.DataContext>
+        <local:CalendarViewModel x:Name="viewModel"/>
+    </Page.DataContext>
+
+    <ScrollViewer>
+        <StackPanel x:Name="calendarViewPanel">
+            <common:DemoLayout 
+                HeaderText="A simple Calendar control."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/Calendar/Resources/SourceCodes/SimpleCalendar_xaml.txt,
+                                                               Common=Calendar/Views/Calendar/Resources/SourceCodes/SimpleCalendar_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendar
+                        x:Name="calendar1"/>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            Header="SelectionMode"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:CalendarSelectionMode},ElementName=calendar1,Path=SelectionMode, Mode=TwoWay}"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:CalendarSelectionMode}"/>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            Header="SelectionShape"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:SelectionShape}, ElementName=calendar1,Path=SelectionShape, Mode=TwoWay}"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:SelectionShape}"/>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            Header="SelectionHighlightMode"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:SelectionHighlightMode}, ElementName=calendar1,Path=SelectionHighlightMode, Mode=TwoWay}"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:SelectionHighlightMode}"/>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            Header="FirstDayOfWeek"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:FirstDayOfWeek}, ElementName=calendar1,Path=FirstDayOfWeek, Mode=TwoWay}"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:FirstDayOfWeek}"/>
+                        <Slider
+                            Margin="5"
+                            Width="180"
+                            Header="NumberOfWeeksInView"
+                            Value="{Binding ElementName=calendar1, Path=NumberOfWeeksInView, Mode=TwoWay}"
+                            Minimum="1"
+                            Maximum="10"/>
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution
+                        Key="SelectionMode" 
+                        SubstitutionValue="{Binding ElementName=calendar1, Path=SelectionMode, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="SelectionShape" 
+                        SubstitutionValue="{Binding ElementName=calendar1, Path=SelectionShape, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="SelectionHighlightMode" 
+                        SubstitutionValue="{Binding ElementName=calendar1, Path=SelectionHighlightMode, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="FirstDayOfWeek" 
+                        SubstitutionValue="{Binding ElementName=calendar1, Path=FirstDayOfWeek, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="NumberOfWeeksInView" 
+                        SubstitutionValue="{Binding ElementName=calendar1, Path=NumberOfWeeksInView, Mode=OneWay}"/>
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout 
+                HeaderText="Date and View Navigation."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/Calendar/Resources/SourceCodes/DateNavigation_xaml.txt,
+                                                               Common=Calendar/Views/Calendar/Resources/SourceCodes/DateNavigation_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendar
+                        x:Name="calendar2"
+                        MinDisplayMode="{Binding MinDisplayMode, Mode=TwoWay}"
+                        MaxDisplayMode="{Binding MaxDisplayMode, Mode=TwoWay}"
+                        MinDate="{Binding MinDate, Mode=TwoWay}"
+                        MaxDate="{Binding MaxDate, Mode=TwoWay}"/>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <TextBlock
+                            Margin="5, 5, 5, 2"
+                            Width="180"
+                            Text="MinimumDate"/>
+                        <calendar:SfCalendarDatePicker
+                            x:Name="optionDatePicker1"
+                            Margin="5, 0, 5, 5"
+                            Width="180"
+                            AllowNull="False"
+                            SelectedDate="{Binding MinDate, Mode=TwoWay}"/>
+                        <TextBlock
+                            Margin="5, 5, 5, 2"
+                            Width="180"
+                            Text="MaximumDate"/>
+                        <calendar:SfCalendarDatePicker
+                            x:Name="optionDatePicker2"
+                            Margin="5, 0, 5, 5"
+                            Width="180"
+                            AllowNull="False"
+                            SelectedDate="{Binding MaxDate, Mode=TwoWay}"/>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            Header="MinDisplayMode"
+                            SelectedItem="{Binding MinDisplayMode, Converter={enumextension:StringToEnumValueConverter Type=calendar:CalendarDisplayMode}, Mode=TwoWay}"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:CalendarDisplayMode}"/>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            Header="MaxDisplayMode"
+                            SelectedItem="{Binding MaxDisplayMode, Converter={enumextension:StringToEnumValueConverter Type=calendar:CalendarDisplayMode}, Mode=TwoWay}"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:CalendarDisplayMode}"/>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            Header="DisplayMode"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:CalendarDisplayMode}, ElementName=calendar2, Path=DisplayMode, Mode=TwoWay}"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:CalendarDisplayMode}"/>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            Header="NavigationDirection"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=Orientation}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=Orientation}, ElementName=calendar2, Path=NavigationDirection, Mode=TwoWay}" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution
+                        Key="CalendarMinDate" 
+                        SubstitutionValue="{Binding ElementName=calendar2, Path=MinDate, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="CalendarMaxDate" 
+                        SubstitutionValue="{Binding ElementName=calendar2, Path=MaxDate, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="CalendarMinDisplayMode" 
+                        SubstitutionValue="{Binding ElementName=calendar2, Path=MinDisplayMode, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="CalendarMaxDisplayMode" 
+                        SubstitutionValue="{Binding ElementName=calendar2, Path=MaxDisplayMode, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="DisplayMode" 
+                        SubstitutionValue="{Binding ElementName=calendar2, Path=DisplayMode, Mode=OneWay}"/> 
+                    <common:DemoLayoutSubstitution
+                        Key="NavigationDirection" 
+                        SubstitutionValue="{Binding ElementName=calendar2, Path=NavigationDirection, Mode=OneWay}"/>
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout 
+                HeaderText="Different types of Calendar."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/Calendar/Resources/SourceCodes/CalendarTypes_xaml.txt,
+                                                               Common=Calendar/Views/Calendar/Resources/SourceCodes/CalendarTypes_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendar
+                        x:Name="calendar3"/>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            Header="CalendarIdentifier"
+                            ItemsSource="{Binding Items}"
+                            SelectedItem="{Binding ElementName=calendar3, Path=CalendarIdentifier, Mode=TwoWay}"/>
+                        <ComboBox
+                            x:Name="languages"
+                            Margin="5"
+                            Width="180"
+                            Header="Languages"
+                            DisplayMemberPath="Name"
+                            SelectedValuePath="Code"
+                            ItemsSource="{Binding Languages}"
+                            SelectedIndex="0"
+                            SelectionChanged="languages_SelectionChanged"/>
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution
+                        Key="CalendarIdentifier" 
+                        SubstitutionValue="{Binding ElementName=calendar3, Path=CalendarIdentifier, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="Language" 
+                        SubstitutionValue="{Binding ElementName=calendar3, Path=Language, Mode=OneWay}"/>
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+        </StackPanel>
+    </ScrollViewer>
+    
+</Page>

calendar/Views/Calendar/CalendarView.xaml.cs

@@ -0,0 +1,75 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using Microsoft.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace Syncfusion.CalendarDemos.WinUI.Views.Calendar
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class CalendarView : Page, IDisposable
+    {
+        public CalendarView()
+        {
+            this.InitializeComponent();
+            this.calendarViewPanel.PointerPressed += OnCalendarViewPanelPointerPressed;
+        }
+
+        private void OnCalendarViewPanelPointerPressed(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            // To restrict the focus on first control when clicking on empty area.
+            e.Handled = true;
+        }
+
+        private void languages_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            string selectedLang = languages.SelectedValue.ToString();
+            if (Windows.Globalization.Language.IsWellFormed(selectedLang))
+            {
+                calendar3.Language = selectedLang;
+            }
+        }
+
+        public void Dispose()
+        {
+            this.calendarViewPanel.PointerPressed -= OnCalendarViewPanelPointerPressed;
+            if (this.calendar1 != null)
+            {
+                this.calendar1.Dispose();
+                this.calendar1 = null;
+            }
+
+            if (this.calendar2 != null)
+            {
+                this.calendar2.Dispose();
+                this.calendar2 = null;
+            }
+
+            if (this.calendar3 != null)
+            {
+                this.calendar3.Dispose();
+                this.calendar3 = null;
+            }
+
+            if (this.optionDatePicker1 != null)
+            {
+                this.optionDatePicker1.Dispose();
+                this.optionDatePicker1 = null;
+            }
+
+            if (this.optionDatePicker2 != null)
+            {
+                this.optionDatePicker2.Dispose();
+                this.optionDatePicker2 = null;
+            }
+        }
+    }
+}

calendar/Views/Calendar/Customization.xaml

@@ -0,0 +1,173 @@
+<Page
+    x:Class="Syncfusion.CalendarDemos.WinUI.Views.Calendar.Customization"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Syncfusion.CalendarDemos.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+    xmlns:common="using:Syncfusion.DemosCommon.WinUI" 
+    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
+    xmlns:global="using:System.Globalization" 
+    xmlns:core="using:Syncfusion.UI.Xaml.Core"
+    mc:Ignorable="d"
+    Background="Transparent">
+
+    <Page.Resources>
+        <local:DateFormatToDisplayFormatConverter x:Name="dateFormatToDisplayFormatConverter"/>
+    </Page.Resources>
+
+    <Page.DataContext>
+        <local:CalendarViewModel/>
+    </Page.DataContext>
+    
+    <ScrollViewer>
+        <StackPanel x:Name="customizationViewPanel">
+            <common:DemoLayout 
+                HeaderText="Date Formatting."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/Calendar/Resources/SourceCodes/Formatting_xaml.txt,
+                                                               Common=Calendar/Views/Calendar/Resources/SourceCodes/Formatting_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendar
+                        x:Name="calendar4"
+                        DayFormat="{Binding 
+                            ElementName=DayFormat, 
+                            Path=SelectedItem, 
+                            ConverterParameter='day', 
+                            Mode=TwoWay,
+                            Converter={StaticResource dateFormatToDisplayFormatConverter}}"
+                        MonthFormat="{Binding 
+                            ElementName=MonthFormat, 
+                            Path=SelectedItem, 
+                            ConverterParameter='month', 
+                            Mode=TwoWay,
+                            Converter={StaticResource dateFormatToDisplayFormatConverter}}"
+                        DayOfWeekFormat="{Binding 
+                            ElementName=DayOfWeekFormat, 
+                            Path=SelectedItem,
+                            ConverterParameter='dayofweek', 
+                            Mode=TwoWay,
+                            Converter={StaticResource dateFormatToDisplayFormatConverter}}"
+                        MonthHeaderFormat="{Binding 
+                            ElementName=MonthHeaderFormat, 
+                            Path=SelectedItem, 
+                            ConverterParameter='header', 
+                            Mode=TwoWay,
+                            Converter={StaticResource dateFormatToDisplayFormatConverter}}"/>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            SelectedIndex="0"
+                            Header="DayFormat"
+                            Name="DayFormat">
+                            <x:String>Abbreviated</x:String>
+                            <x:String>Full</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            SelectedIndex="0"
+                            Header="MonthFormat"
+                            Name="MonthFormat">
+                            <x:String>Abbreviated</x:String>
+                            <x:String>Full</x:String>
+                            <x:String>Number</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            SelectedIndex="0"
+                            Header="DayOfWeekFormat"
+                            Name="DayOfWeekFormat">
+                            <x:String>Abbreviated - 2 char</x:String>
+                            <x:String>Abbreviated - 3 char</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            SelectedIndex="0"
+                            Header="MonthHeaderFormat"
+                            Name="MonthHeaderFormat">
+                            <x:String>Full</x:String>
+                            <x:String>Abbreviated</x:String>
+                        </ComboBox>
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution
+                        Key="CalendarDayFormat" 
+                        SubstitutionValue="{Binding ElementName=calendar4, Path=DayFormat, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="CalendarMonthFormat" 
+                        SubstitutionValue="{Binding ElementName=calendar4, Path=MonthFormat, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="CalendarDayOfWeekFormat" 
+                        SubstitutionValue="{Binding ElementName=calendar4, Path=DayOfWeekFormat, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="CalendarMonthHeaderFormat" 
+                        SubstitutionValue="{Binding ElementName=calendar4, Path=MonthHeaderFormat, Mode=OneWay}"/>
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout 
+                HeaderText="Blackout all weekends.">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendar
+                        x:Name="calendar5"
+                        ItemPrepared="Blackout_ItemPrepared">
+                    </calendar:SfCalendar>
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+            <common:DemoLayout 
+                HeaderText="Blackout specific dates."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/Calendar/Resources/SourceCodes/BlackoutDates_xaml.txt,
+                                                               Common=Calendar/Views/Calendar/Resources/SourceCodes/BlackoutDates_xaml.txt}"
+                CSharpSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/Calendar/Resources/SourceCodes/BlackoutDates_cs.txt,
+                                                                 Common=Calendar/Views/Calendar/Resources/SourceCodes/BlackoutDates_cs.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendar
+                        x:Name="calendar6"
+                        BlackoutDates="{Binding BlackoutSpecificDates}"/>
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+            <common:DemoLayout 
+                HeaderText="Week number."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/Calendar/Resources/SourceCodes/WeekNumber_xaml.txt,
+                                                               Common=Calendar/Views/Calendar/Resources/SourceCodes/WeekNumber_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendar
+                        x:Name="weekNumber"
+                        ShowWeekNumbers="True"
+                        WeekNumberFormat=""/>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <ComboBox
+                            Margin="5"
+                            Width="180"
+                            Header="WeekNumberRule"
+                            ItemsSource="{core:EnumValuesExtension Type=global:CalendarWeekRule}"
+                            SelectedItem="{Binding WeekNumberRule, ElementName=weekNumber, Mode=TwoWay}"/>
+                        <TextBox
+                            Margin="5"
+                            Width="180"
+                            HorizontalAlignment="Left"
+                            PlaceholderText="Try: #, W#, W #, Week#"
+                            Header="WeekNumberFormat"
+                            Text="{Binding WeekNumberFormat, ElementName=weekNumber, Mode=TwoWay}"/>
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution
+                        Key="WeekNumberRule" 
+                        SubstitutionValue="{Binding ElementName=weekNumber, Path=WeekNumberRule, Mode=OneWay}"/>
+                    <common:DemoLayoutSubstitution
+                        Key="WeekNumberFormat" 
+                        SubstitutionValue="{Binding ElementName=weekNumber, Path=WeekNumberFormat, Mode=OneWay}"/>
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+        </StackPanel>
+    </ScrollViewer>
+    
+</Page>

calendar/Views/Calendar/Customization.xaml.cs

@@ -0,0 +1,71 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using Microsoft.UI.Xaml.Controls;
+using Syncfusion.UI.Xaml.Calendar;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace Syncfusion.CalendarDemos.WinUI.Views.Calendar
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class Customization : Page, IDisposable
+    {
+        public Customization()
+        {
+            this.InitializeComponent();
+            this.customizationViewPanel.PointerPressed += OnCustomizationViewPanelPointerPressed;
+        }
+
+        private void OnCustomizationViewPanelPointerPressed(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            // To restrict the focus on first control when clicking on empty area.
+            e.Handled = true;
+        }
+
+        private void Blackout_ItemPrepared(object sender, CalendarItemPreparedEventArgs e)
+        {
+            if (e.ItemInfo.ItemType == CalendarItemType.Day &&
+                (e.ItemInfo.Date.DayOfWeek == DayOfWeek.Saturday ||
+                e.ItemInfo.Date.DayOfWeek == DayOfWeek.Sunday))
+            {
+                e.ItemInfo.IsBlackout = true;
+            }
+        }
+
+        public void Dispose()
+        {
+            this.customizationViewPanel.PointerPressed -= OnCustomizationViewPanelPointerPressed;
+            if (this.calendar4 != null)
+            {
+                this.calendar4.Dispose();
+                this.calendar4 = null;
+            }
+
+            if (this.calendar5 != null)
+            {
+                this.calendar5.Dispose();
+                this.calendar5 = null;
+            }
+
+            if (this.calendar6 != null)
+            {
+                this.calendar6.Dispose();
+                this.calendar6 = null;
+            }
+
+            if (this.weekNumber != null)
+            {
+                this.weekNumber.Dispose();
+                this.weekNumber = null;
+            }
+        }
+    }
+}

calendar/Views/Calendar/Resources/CustomCalendarItemTemplateSelector.cs

@@ -0,0 +1,88 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Syncfusion.UI.Xaml.Calendar;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Syncfusion.CalendarDemos.WinUI
+{
+    public class CustomCalendarItemTemplateSelector : DataTemplateSelector
+    {
+        public CustomCalendarItemTemplateSelector()
+        {
+            SpecialDates = new Dictionary<DateTimeOffset, string>();
+            SpecialDates.Add(DateTimeOffset.Now.AddMonths(-1).AddDays(1), "SingleEvent_1");
+            SpecialDates.Add(DateTimeOffset.Now.AddMonths(-1).AddDays(5), "DoubleEvent_1");
+            SpecialDates.Add(DateTimeOffset.Now.AddMonths(-1).AddDays(-2), "TripleEvent_2");
+            SpecialDates.Add(DateTimeOffset.Now.AddDays(1), "TripleEvent_1");
+            SpecialDates.Add(DateTimeOffset.Now.AddDays(5), "SingleEvent_2");
+            SpecialDates.Add(DateTimeOffset.Now.AddDays(7), "DoubleEvent_2");
+            SpecialDates.Add(DateTimeOffset.Now.AddDays(9), "SingleEvent_1");
+            SpecialDates.Add(DateTimeOffset.Now.AddDays(12), "TripleEvent_2");
+            SpecialDates.Add(DateTimeOffset.Now.AddDays(-4), "DoubleEvent_1");
+            SpecialDates.Add(DateTimeOffset.Now.AddMonths(1).AddDays(1), "DoubleEvent_3");
+            SpecialDates.Add(DateTimeOffset.Now.AddMonths(1).AddDays(3), "SingleEvent_2");
+            SpecialDates.Add(DateTimeOffset.Now.AddMonths(1).AddDays(-5), "DoubleEvent_2");
+        }
+        private Dictionary<DateTimeOffset, string> SpecialDates { get; set; }
+
+        public DataTemplate DefaultTemplate { get; set; }
+        public DataTemplate SingleEventTemplate_1 { get; set; }
+        public DataTemplate SingleEventTemplate_2 { get; set; }
+        public DataTemplate DoubleEventTemplate_1 { get; set; }
+        public DataTemplate DoubleEventTemplate_2 { get; set; }
+        public DataTemplate DoubleEventTemplate_3 { get; set; }
+        public DataTemplate TripleEventTemplate_1 { get; set; }
+        public DataTemplate TripleEventTemplate_2 { get; set; }
+
+        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
+        {
+            if (item != null)
+            {
+                var calendarItemInfo = (container as ContentControl).DataContext as CalendarItemInfo;
+                if (calendarItemInfo != null && calendarItemInfo.ItemType != CalendarItemType.Day)
+                {
+                    return DefaultTemplate;
+                }
+
+                DateTimeOffset calendarItem = (DateTimeOffset)item;
+                DateTimeOffset dateTimeOffset = SpecialDates.Keys.FirstOrDefault(x => x.Date == calendarItem.Date);
+
+                if (dateTimeOffset != DateTimeOffset.MinValue)
+                {
+                    string template = this.SpecialDates[dateTimeOffset];
+
+                    switch (template)
+                    {
+                        case "SingleEvent_1":
+                            return SingleEventTemplate_1;
+                        case "SingleEvent_2":
+                            return SingleEventTemplate_2;
+                        case "DoubleEvent_1":
+                            return DoubleEventTemplate_1;
+                        case "DoubleEvent_2":
+                            return DoubleEventTemplate_2;
+                        case "DoubleEvent_3":
+                            return DoubleEventTemplate_3;
+                        case "TripleEvent_1":
+                            return TripleEventTemplate_1;
+                        case "TripleEvent_2":
+                            return TripleEventTemplate_2;
+                    }
+                }
+
+                return DefaultTemplate;
+            }
+
+            return base.SelectTemplateCore(item, container);
+        }
+    }
+}

calendar/Views/Calendar/Resources/SourceCodes/BlackoutDates_cs.txt

@@ -0,0 +1,13 @@
+public class ViewModel
+{       
+    public DateTimeOffsetCollection BlackoutSpecificDates { get; set; }
+
+    public ViewModel()
+    {
+        BlackoutSpecificDates = new DateTimeOffsetCollection();
+        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 4)));
+        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 11)));
+        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 28)));
+        ...
+    }
+}

calendar/Views/Calendar/Resources/SourceCodes/BlackoutDates_xaml.txt

@@ -0,0 +1,2 @@
+<calendar:SfCalendar
+    BlackoutDates="{Binding BlackoutSpecificDates}"/>

calendar/Views/Calendar/Resources/SourceCodes/CalendarTypes_xaml.txt

@@ -0,0 +1,3 @@
+<calendar:SfCalendar
+    CalendarIdentifier="$(CalendarIdentifier)"
+    Language="$(Language)"/>

calendar/Views/Calendar/Resources/SourceCodes/DateNavigation_xaml.txt

@@ -0,0 +1,7 @@
+<calendar:SfCalendar
+    MinDate="$(CalendarMinDate)"
+    MaxDate="$(CalendarMaxDate)"
+    MinDisplayMode="$(CalendarMinDisplayMode)"
+    MaxDisplayMode="$(CalendarMaxDisplayMode)"
+    DisplayMode="$(DisplayMode)"
+    NavigationDirection="$(NavigationDirection)"/>

calendar/Views/Calendar/Resources/SourceCodes/Formatting_xaml.txt

@@ -0,0 +1,5 @@
+<calendar:SfCalendar
+    DayFormat="$(CalendarDayFormat)"
+    MonthFormat="$(CalendarMonthFormat)"
+    DayOfWeekFormat="$(CalendarDayOfWeekFormat)"
+    MonthHeaderFormat="$(CalendarMonthHeaderFormat)"/>

calendar/Views/Calendar/Resources/SourceCodes/ItemTemplateSelector_cs.txt

@@ -0,0 +1,39 @@
+public class CustomCalendarItemTemplateSelector : DataTemplateSelector
+{
+    public CustomCalendarItemTemplateSelector()
+    {
+        SpecialDates = new Dictionary<DateTimeOffset, string>();
+        SpecialDates.Add(DateTimeOffset.Now.AddMonths(-1).AddDays(1), "SingleEvent_1");
+        SpecialDates.Add(DateTimeOffset.Now.AddMonths(-1).AddDays(5), "DoubleEvent_1");
+        ...
+    }
+
+    private Dictionary<DateTimeOffset, string> SpecialDates { get; set; }
+
+    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
+    {
+        if (item != null)
+        {
+            DateTimeOffset calendarItem = (DateTimeOffset)item;
+            DateTimeOffset dateTimeOffset = SpecialDates.Keys.FirstOrDefault(x => x.Date == calendarItem.Date);
+
+            if (dateTimeOffset != DateTimeOffset.MinValue)
+            {
+                string template = this.SpecialDates[dateTimeOffset];
+
+                switch (template)
+                {
+                    case "SingleEvent_1":
+                        return Application.Current.Resources["singleEventTemplate_1"] as DataTemplate;
+                    case "DoubleEvent_1":
+                        return Application.Current.Resources["doubleEventTemplate_1"] as DataTemplate;
+                    ...
+                }
+            }
+
+            return Application.Current.Resources["defaultTemplate"] as DataTemplate;
+        }
+
+        return base.SelectTemplateCore(item, container);
+    }
+}

calendar/Views/Calendar/Resources/SourceCodes/ItemTemplateSelector_xaml.txt

@@ -0,0 +1,22 @@
+<calendar:SfCalendar
+    DayOfWeekFormat="{}{dayofweek.abbreviated(3)}">
+    <calendar:SfCalendar.Resources>
+        <local:CustomCalendarItemTemplateSelector x:Key="selector" />
+        <Style TargetType="calendar:CalendarItem">
+            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+            <Setter Property="ContentTemplate">
+                <Setter.Value>
+                    <DataTemplate>
+                        <Grid>
+                            <ContentControl Content="{Binding DisplayText}"/>
+                            <ContentControl 
+                                Content="{Binding Date}" 
+                                ContentTemplateSelector="{StaticResource selector}"/>
+                        </Grid>
+                    </DataTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </calendar:SfCalendar.Resources>
+</calendar:SfCalendar>

calendar/Views/Calendar/Resources/SourceCodes/SimpleCalendar_xaml.txt

@@ -0,0 +1,6 @@
+<calendar:SfCalendar
+    SelectionMode="$(SelectionMode)"
+    SelectionShape="$(SelectionShape)"
+    SelectionHighlightMode="$(SelectionHighlightMode)"
+    FirstDayOfWeek="$(FirstDayOfWeek)"
+    NumberOfWeeksInView="$(NumberOfWeeksInView)"/>

calendar/Views/Calendar/Resources/SourceCodes/ThemeKeyCustomization_xaml.txt

@@ -0,0 +1,31 @@
+<calendar:SfCalendar>
+    <calendar:SfCalendar.Resources>
+        <ResourceDictionary>
+        
+            <!--Theme key customization-->
+            <SolidColorBrush x:Key="SyncfusionCalendarNavigationButtonForeground"
+                             Color="#FF248D92" />
+            <SolidColorBrush x:Key="SyncfusionCalendarWeekItemForeground"
+                             Color="#FF248D92" />                                
+            <SolidColorBrush x:Key="SyncfusionCalendarTodayItemBackground"
+                             Color="#FF9BC5ED" />
+            <Thickness x:Key="SyncfusionCalendarItemMargin">1.5</Thickness>
+            <x:Double x:Key="SyncfusionSubtitleAltFontSize">30</x:Double>
+            ...
+            
+            <Style TargetType="calendar:CalendarItem">
+                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+                <Setter Property="ContentTemplate">
+                    <Setter.Value>
+                        <DataTemplate>
+                            <Grid>
+                                <ContentControl Content="{Binding DisplayText}"/>
+                            </Grid>
+                        </DataTemplate>
+                    </Setter.Value>
+                </Setter>
+            </Style>
+        </ResourceDictionary>
+    </calendar:SfCalendar.Resources>
+</calendar:SfCalendar>

calendar/Views/Calendar/Resources/SourceCodes/WeekNumber_xaml.txt

@@ -0,0 +1,4 @@
+<calendar:SfCalendar
+    ShowWeekNumbers="True"
+    WeekNumberRule="$(WeekNumberRule)"
+    WeekNumberFormat="$(WeekNumberFormat)"/>

calendar/Views/Calendar/StylesAndTemplates.xaml

@@ -0,0 +1,178 @@
+<Page
+    x:Class="Syncfusion.CalendarDemos.WinUI.Views.Calendar.StylesAndTemplates"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Syncfusion.CalendarDemos.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+    xmlns:common="using:Syncfusion.DemosCommon.WinUI" 
+    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
+    mc:Ignorable="d"
+    Background="Transparent">
+
+    <ScrollViewer>
+        <StackPanel x:Name="styleAndTemplatesViewPanel">
+            <StackPanel.Resources>
+                <DataTemplate x:Key="defaultTemplate">
+                </DataTemplate>
+                <DataTemplate x:Key="singleEventTemplate_1">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="DeepPink" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="singleEventTemplate_2">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Cyan" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="doubleEventTemplate_1">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Violet" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Orange" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="doubleEventTemplate_2">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Gold" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Green" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="doubleEventTemplate_3">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Brown" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Blue" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="tripleEventTemplate_1">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Green" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="DeepSkyBlue" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Orange" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="tripleEventTemplate_2">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Red" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Green" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Gold" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+            </StackPanel.Resources>
+            <common:DemoLayout 
+                HeaderText="Calendar Item Template Customization."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/Calendar/Resources/SourceCodes/ItemTemplateSelector_xaml.txt,
+                                                               Common=Calendar/Views/Calendar/Resources/SourceCodes/ItemTemplateSelector_xaml.txt}"
+                CSharpSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/Calendar/Resources/SourceCodes/ItemTemplateSelector_cs.txt,
+                                                                 Common=Calendar/Views/Calendar/Resources/SourceCodes/ItemTemplateSelector_cs.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendar x:Name="calendar7"
+                        CornerRadius="14"
+                        DayOfWeekFormat="{}{dayofweek.abbreviated(3)}">
+                        <calendar:SfCalendar.Resources>
+                            <ResourceDictionary>
+                                <!--  Resources and color keys for Calendar Control  -->
+                                <SolidColorBrush x:Key="SyncfusionCalendarItemOutOfScopeForeground"
+                                                 Color="SlateGray" Opacity="0.5" />
+                                <SolidColorBrush x:Key="SyncfusionCalendarWeekItemForeground"
+                                                 Color="{ThemeResource SystemBaseMediumLowColor}" />
+                                <x:Double x:Key="SyncfusionSubtitleAltFontSize">16</x:Double>
+                                <Thickness x:Key="SyncfusionCalendarItemMargin">1</Thickness>
+                                <x:Double x:Key="SyncfusionBodyFontSize">13</x:Double>
+                                
+                                <local:CustomCalendarItemTemplateSelector x:Key="selector"
+                                    SingleEventTemplate_1="{StaticResource singleEventTemplate_1}"
+                                    SingleEventTemplate_2="{StaticResource singleEventTemplate_2}"
+                                    DoubleEventTemplate_1="{StaticResource doubleEventTemplate_1}"
+                                    DoubleEventTemplate_2="{StaticResource doubleEventTemplate_2}"                                                                     
+                                    DoubleEventTemplate_3="{StaticResource doubleEventTemplate_3}"
+                                    TripleEventTemplate_1="{StaticResource tripleEventTemplate_1}"
+                                    TripleEventTemplate_2="{StaticResource tripleEventTemplate_2}"
+                                    DefaultTemplate="{StaticResource defaultTemplate}"/>
+                                <Style TargetType="calendar:CalendarItem">
+                                    <Setter Property="CornerRadius" Value="14"/>
+                                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+                                    <Setter Property="ContentTemplate">
+                                        <Setter.Value>
+                                            <DataTemplate>
+                                                <Grid MinWidth="40" MinHeight="40">
+                                                    <ContentControl
+                                                        HorizontalAlignment="Center"
+                                                        VerticalAlignment="Center"
+                                                        Margin="2"
+                                                        Content="{Binding DisplayText}"/>
+                                                    <ContentControl
+                                                        Margin="3"
+                                                        HorizontalAlignment="Center"
+                                                        VerticalAlignment="Bottom"
+                                                        Content="{Binding Date}"
+                                                        ContentTemplateSelector="{StaticResource selector}"/>
+                                                </Grid>
+                                            </DataTemplate>
+                                        </Setter.Value>
+                                    </Setter>
+                                </Style>
+                            </ResourceDictionary>
+                        </calendar:SfCalendar.Resources>
+                    </calendar:SfCalendar>
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+            <common:DemoLayout 
+                HeaderText="Calendar Item ThemeKey Customization."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/Calendar/Resources/SourceCodes/ThemeKeyCustomization_xaml.txt,
+                                                               Common=Calendar/Views/Calendar/Resources/SourceCodes/ThemeKeyCustomization_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendar x:Name="calendar8"
+                        CornerRadius="6">
+                        <calendar:SfCalendar.Resources>
+                            <ResourceDictionary>
+                                
+                                <!--Theme Key customization-->
+                                <SolidColorBrush x:Key="SyncfusionCalendarNavigationButtonForeground"
+                                                 Color="#FF248D92" />
+                                <SolidColorBrush x:Key="SyncfusionCalendarWeekItemForeground"
+                                                 Color="#FF248D92" />
+                                <SolidColorBrush x:Key="SyncfusionCalendarTodayItemForeground"
+                                                 Color="{ThemeResource SystemBaseHighColor}" />
+                                <SolidColorBrush x:Key="SyncfusionCalendarItemBackground"
+                                                 Color="{ThemeResource SystemChromeMediumLowColor}" />
+                                <SolidColorBrush x:Key="SyncfusionCalendarItemBorderBrush"
+                                                 Color="{ThemeResource SystemChromeMediumLowColor}"/>
+                                <SolidColorBrush x:Key="SyncfusionCalendarTodayItemBackground"
+                                                 Color="#FF9BC5ED" />
+                                <SolidColorBrush x:Key="SyncfusionCalendarTodayItemBorderBrush"
+                                                 Color="#FF9BC5ED" />
+                                <SolidColorBrush x:Key="SyncfusionCalendarItemOutOfScopeForeground"
+                                                 Color="SlateGray" Opacity="0.5" />
+                                <Thickness x:Key="SyncfusionCalendarItemMargin">1</Thickness>
+                                <x:Double x:Key="SyncfusionSubtitleAltFontSize">16</x:Double>
+                                <x:Double x:Key="SyncfusionBodyFontSize">13</x:Double>
+                                <FontFamily x:Key="SyncfusionControlThemeFontFamily">SimSun</FontFamily>
+
+                                <Style TargetType="calendar:CalendarItem">
+                                    <Setter Property="CornerRadius" Value="5"/>
+                                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+                                    <Setter Property="ContentTemplate">
+                                        <Setter.Value>
+                                            <DataTemplate>
+                                                <Grid MinWidth="40" MinHeight="40">
+                                                    <ContentControl
+                                                        HorizontalAlignment="Center"
+                                                        VerticalAlignment="Center"
+                                                        Margin="3"
+                                                        Content="{Binding DisplayText}"/>
+                                                </Grid>
+                                            </DataTemplate>
+                                        </Setter.Value>
+                                    </Setter>
+                                </Style>
+                            </ResourceDictionary>
+                        </calendar:SfCalendar.Resources>
+                    </calendar:SfCalendar>
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+        </StackPanel>
+    </ScrollViewer>
+    
+</Page>

calendar/Views/Calendar/StylesAndTemplates.xaml.cs

@@ -0,0 +1,48 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using Microsoft.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace Syncfusion.CalendarDemos.WinUI.Views.Calendar
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class StylesAndTemplates : Page, IDisposable
+    {
+        public StylesAndTemplates()
+        {
+            this.InitializeComponent();
+            this.styleAndTemplatesViewPanel.PointerPressed += OnStyleAndTemplatesViewPanelPointerPressed;
+        }
+
+        private void OnStyleAndTemplatesViewPanelPointerPressed(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            // To restrict the focus on first control when clicking on empty area.
+            e.Handled = true;
+        }
+
+        public void Dispose()
+        {
+            this.styleAndTemplatesViewPanel.PointerPressed -= OnStyleAndTemplatesViewPanelPointerPressed;
+            if (this.calendar7 != null)
+            {
+                this.calendar7.Dispose();
+                this.calendar7 = null;
+            }
+
+            if (this.calendar8 != null)
+            {
+                this.calendar8.Dispose();
+                this.calendar8 = null;
+            }
+        }
+    }
+}

calendar/Views/CalendarDatePicker/CalendarDatePickerView.xaml

@@ -0,0 +1,458 @@
+<Page
+    x:Class="Syncfusion.CalendarDemos.WinUI.Views.CalendarDatePicker.CalendarDatePickerView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:common="using:Syncfusion.DemosCommon.WinUI"
+    xmlns:enumextension="using:Syncfusion.DemosCommon.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
+    xmlns:local="using:Syncfusion.CalendarDemos.WinUI"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
+    Background="Transparent"
+    mc:Ignorable="d">
+    <Page.Resources>
+        <local:DateFormatToDisplayFormatConverter x:Name="dateFormatToDisplayFormatConverter" />
+    </Page.Resources>
+
+    <Page.DataContext>
+        <local:CalendarViewModel x:Name="viewModel" />
+    </Page.DataContext>
+
+    <ScrollViewer>
+        <StackPanel x:Name="calendarDatePickerViewPanel">
+            <common:DemoLayout HeaderText="A simple Calendar Date Picker control." 
+                               XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDatePicker/Resources/SourceCodes/SimpleCalendarDatePicker_xaml.txt,
+                                                                              Common=Calendar/Views/CalendarDatePicker/Resources/SourceCodes/SimpleCalendarDatePicker_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDatePicker
+                        x:Name="calendarDatePicker1"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center" />
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="EditMode"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=editors:DateTimeEditMode}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=editors:DateTimeEditMode}, ElementName=calendarDatePicker1, Path=EditMode, Mode=TwoWay}" />
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="SelectionShape"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:SelectionShape}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:SelectionShape}, ElementName=calendarDatePicker1, Path=SelectionShape, Mode=TwoWay}" />
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="SelectionHighlightMode"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:SelectionHighlightMode}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:SelectionHighlightMode}, ElementName=calendarDatePicker1, Path=SelectionHighlightMode, Mode=TwoWay}" />
+                        <TextBox
+                            Width="180"
+                            Margin="5"
+                            Header="PlaceholderText"
+                            Text="{Binding ElementName=calendarDatePicker1, Path=PlaceholderText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="FirstDayOfWeek"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:FirstDayOfWeek}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:FirstDayOfWeek}, ElementName=calendarDatePicker1, Path=FirstDayOfWeek, Mode=TwoWay}" />
+                        <Slider
+                            Width="180"
+                            Margin="5"
+                            Header="NumberOfWeeksInView"
+                            Maximum="10"
+                            Minimum="1"
+                            Value="{Binding ElementName=calendarDatePicker1, Path=NumberOfWeeksInView, Mode=TwoWay}" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="EditMode" SubstitutionValue="{Binding ElementName=calendarDatePicker1, Path=EditMode, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="SelectionShape" SubstitutionValue="{Binding ElementName=calendarDatePicker1, Path=SelectionShape, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="SelectionHighlightMode" SubstitutionValue="{Binding ElementName=calendarDatePicker1, Path=SelectionHighlightMode, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="CalendarPlaceholderText" SubstitutionValue="{Binding ElementName=calendarDatePicker1, Path=PlaceholderText, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="FirstDayOfWeek" SubstitutionValue="{Binding ElementName=calendarDatePicker1, Path=FirstDayOfWeek, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="NumberOfWeeksInView" SubstitutionValue="{Binding ElementName=calendarDatePicker1, Path=NumberOfWeeksInView, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="Date and View Navigation." 
+                               XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDatePicker/Resources/SourceCodes/Navigation_xaml.txt,
+                                                                              Common=Calendar/Views/CalendarDatePicker/Resources/SourceCodes/Navigation_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDatePicker
+                        x:Name="calendarDatePicker2"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        MinDisplayMode="{Binding MinDisplayMode, Mode=TwoWay}"
+                        MaxDisplayMode="{Binding MaxDisplayMode, Mode=TwoWay}"
+                        MinDate="{Binding MinDate, Mode=TwoWay}"
+                        MaxDate="{Binding MaxDate, Mode=TwoWay}" />
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <calendar:SfCalendarDatePicker
+                            x:Name="optionDatePicker1"
+                            Width="180"
+                            Margin="5"
+                            AllowNull ="False"
+                            Header="MinimumDate"
+                            MinDate="{Binding MinimumDate, Mode=TwoWay}"
+                            MaxDate="{Binding MaximumDate, Mode=TwoWay}"
+                            SelectedDate="{Binding MinDate, Mode=TwoWay}" />
+                        <calendar:SfCalendarDatePicker
+                            x:Name="optionDatePicker2"
+                            Width="180"
+                            Margin="5"
+                            AllowNull ="False"
+                            Header="MaximumDate"
+                            MinDate="{Binding MinimumDate, Mode=TwoWay}"
+                            MaxDate="{Binding MaximumDate, Mode=TwoWay}"
+                            SelectedDate="{Binding MaxDate, Mode=TwoWay}" />
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="MinDisplayMode"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:CalendarDisplayMode}"
+                            SelectedItem="{Binding MinDisplayMode, Converter={enumextension:StringToEnumValueConverter Type=calendar:CalendarDisplayMode}, Mode=TwoWay}" />
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="MaxDisplayMode"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:CalendarDisplayMode}"
+                            SelectedItem="{Binding MaxDisplayMode, Converter={enumextension:StringToEnumValueConverter Type=calendar:CalendarDisplayMode}, Mode=TwoWay}" />
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="DisplayMode"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:CalendarDisplayMode}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:CalendarDisplayMode}, ElementName=calendarDatePicker2, Path=DisplayMode, Mode=TwoWay}" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="MinDate" SubstitutionValue="{Binding ElementName=calendarDatePicker2, Path=MinDate, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MaxDate" SubstitutionValue="{Binding ElementName=calendarDatePicker2, Path=MaxDate, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MinDisplayMode" SubstitutionValue="{Binding ElementName=calendarDatePicker2, Path=MinDisplayMode, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MaxDisplayMode" SubstitutionValue="{Binding ElementName=calendarDatePicker2, Path=MaxDisplayMode, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="DisplayMode" SubstitutionValue="{Binding ElementName=calendarDatePicker2, Path=DisplayMode, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="Different types of Calendar." 
+                               XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDatePicker/Resources/SourceCodes/CalendarTypes_xaml.txt,
+                                                                              Common=Calendar/Views/CalendarDatePicker/Resources/SourceCodes/CalendarTypes_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDatePicker
+                        x:Name="calendarDatePicker3"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"/>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="CalendarIdentifier"
+                            ItemsSource="{Binding Items}"
+                            SelectedItem="{Binding ElementName=calendarDatePicker3, Path=CalendarIdentifier, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="languages"
+                            Width="180"
+                            Margin="5"
+                            DisplayMemberPath="Name"
+                            Header="Languages"
+                            ItemsSource="{Binding Languages}"
+                            SelectedIndex="0"
+                            SelectedValuePath="Code"
+                            SelectionChanged="languages_SelectionChanged" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="CalendarIdentifier" SubstitutionValue="{Binding ElementName=calendarDatePicker3, Path=CalendarIdentifier, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="Language" SubstitutionValue="{Binding ElementName=calendarDatePicker3, Path=Language, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="Date Formatting." 
+                               XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDatePicker/Resources/SourceCodes/Formatting_xaml.txt,
+                                                                              Common=Calendar/Views/CalendarDatePicker/Resources/SourceCodes/Formatting_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDatePicker
+                        x:Name="calendarDatePicker4"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        DayFormat="{Binding ElementName=DayFormat, Path=SelectedItem, ConverterParameter='day', Mode=TwoWay, Converter={StaticResource dateFormatToDisplayFormatConverter}}"
+                        DayOfWeekFormat="{Binding ElementName=DayOfWeekFormat, Path=SelectedItem, ConverterParameter='dayofweek', Mode=TwoWay, Converter={StaticResource dateFormatToDisplayFormatConverter}}"
+                        MonthHeaderFormat="{Binding ElementName=MonthHeaderFormat, Path=SelectedItem, ConverterParameter='header', Mode=TwoWay, Converter={StaticResource dateFormatToDisplayFormatConverter}}"
+                        MonthFormat="{Binding ElementName=MonthFormat, Path=SelectedItem, ConverterParameter='month', Mode=TwoWay, Converter={StaticResource dateFormatToDisplayFormatConverter}}" />
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <ComboBox
+                            Name="FormatString"
+                            Width="180"
+                            Margin="5"
+                            Header="FormatString"
+                            SelectedItem="{Binding ElementName=calendarDatePicker4, Path=DisplayDateFormat, Mode=TwoWay}">
+                            <x:String>d</x:String>
+                            <x:String>D</x:String>
+                            <x:String>f</x:String>
+                            <x:String>F</x:String>
+                            <x:String>g</x:String>
+                            <x:String>G</x:String>
+                            <x:String>s</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Name="DayFormat"
+                            Width="180"
+                            Margin="5"
+                            Header="DayFormat"
+                            SelectedIndex="0">
+                            <x:String>Abbreviated</x:String>
+                            <x:String>Full</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Name="MonthFormat"
+                            Width="180"
+                            Margin="5"
+                            Header="MonthFormat"
+                            SelectedIndex="0">
+                            <x:String>Abbreviated</x:String>
+                            <x:String>Full</x:String>
+                            <x:String>Number</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Name="DayOfWeekFormat"
+                            Width="180"
+                            Margin="5"
+                            Header="DayOfWeekFormat"
+                            SelectedIndex="0">
+                            <x:String>Abbreviated - 2 char</x:String>
+                            <x:String>Abbreviated - 3 char</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Name="MonthHeaderFormat"
+                            Width="180"
+                            Margin="5"
+                            Header="MonthHeaderFormat"
+                            SelectedIndex="0">
+                            <x:String>Full</x:String>
+                            <x:String>Abbreviated</x:String>
+                        </ComboBox>
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="FormatString" SubstitutionValue="{Binding ElementName=calendarDatePicker4, Path=DisplayDateFormat, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="DayFormat" SubstitutionValue="{Binding ElementName=calendarDatePicker4, Path=DayFormat, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MonthFormat" SubstitutionValue="{Binding ElementName=calendarDatePicker4, Path=MonthFormat, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="DayOfWeekFormat" SubstitutionValue="{Binding ElementName=calendarDatePicker4, Path=DayOfWeekFormat, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MonthHeaderFormat" SubstitutionValue="{Binding ElementName=calendarDatePicker4, Path=MonthHeaderFormat, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="Blackout specific dates."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDatePicker/Resources/SourceCodes/BlackoutDates_xaml.txt,
+                                                               Common=Calendar/Views/CalendarDatePicker/Resources/SourceCodes/BlackoutDates_xaml.txt}"
+                CSharpSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDatePicker/Resources/SourceCodes/BlackoutDates_cs.txt,
+                                                                 Common=Calendar/Views/CalendarDatePicker/Resources/SourceCodes/BlackoutDates_cs.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDatePicker
+                        x:Name="calendarDatePicker5"
+                        BlackoutDates="{Binding BlackoutSpecificDates}"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center" />
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="CreditCard Bill Payment.">
+                <common:DemoLayout.Example>
+                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">                         
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width=".5*" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="0.1*" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width=".5*" />
+                        </Grid.ColumnDefinitions>
+
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*"></RowDefinition>
+                            <RowDefinition Height="*"></RowDefinition>
+                            <RowDefinition Height="*"></RowDefinition>
+                            <RowDefinition Height="*"></RowDefinition>
+                            <RowDefinition Height="*"></RowDefinition>
+                        </Grid.RowDefinitions>
+                        
+                        <TextBlock
+                            Text="From Account"
+                            VerticalAlignment="Center"
+                            Grid.Row="0"
+                            Grid.Column="1"
+                            Margin="10" />
+						<TextBlock
+                            Text=":"
+                            VerticalAlignment="Center"
+                            Grid.Row="0"
+                            Grid.Column="2"
+                            Margin="10" />
+                        <TextBlock
+                            Text="500100184959"
+                            VerticalAlignment="Center"
+                            Grid.Row="0"
+                            Grid.Column="3"
+                            Margin="10" />
+
+                        <TextBlock 
+                            Text="Select Card No"
+                            VerticalAlignment="Center"
+                            Grid.Row="1"
+                            Grid.Column="1"
+                            Margin="10" />
+						<TextBlock
+                            Text=":"
+                            VerticalAlignment="Center"
+                            Grid.Row="1"
+                            Grid.Column="2"
+                            Margin="10" />
+                        <ComboBox
+                            MinWidth="190"
+                            Grid.Row="1"
+                            Grid.Column="3"
+                            HorizontalAlignment="Left"
+                            Margin="10" >
+                            <ComboBoxItem
+                                Content="8674-9898-XXXX-6373"
+                                IsSelected="True"/>
+                            <ComboBoxItem Content="4384-8347-XXXX-3088"/>
+                        </ComboBox>
+
+                        <TextBlock
+                            Grid.Row="2" 
+                            Grid.Column="1" 
+                            VerticalAlignment="Center"
+                            Margin="10"
+                            Text="Card Expiry Date :"/>
+						<TextBlock
+                            Text=":"
+                            VerticalAlignment="Center"
+                            Grid.Row="2"
+                            Grid.Column="2"
+                            Margin="10" />
+                        <calendar:SfCalendarDatePicker
+                            x:Name="cardExpiryDate"
+                            EditMode="Mask"
+                            PlaceholderText="MM/YY"
+                            DisplayDateFormat="{}{month.integer(2)}/{year.abbreviated}"
+                            MinDisplayMode="Year"
+                            MaxDisplayMode="Decade"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center" 
+                            Margin="10" 
+                            Grid.Row="2" 
+                            Grid.Column="3"/>
+
+                        <Grid
+                            HorizontalAlignment="Stretch"
+                            Grid.Row="3"
+                            Grid.ColumnSpan="3"
+                            Grid.Column="1" >
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="*"/>
+                                <RowDefinition Height="*"/>
+                                <RowDefinition Height="*"/>
+                                <RowDefinition Height="*"/>
+                            </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*"/>
+                                <ColumnDefinition Width="0.1*"/>
+                                <ColumnDefinition Width="*"/>
+                            </Grid.ColumnDefinitions>
+                            
+                            <TextBlock
+                                Text="Select Payment"
+                                VerticalAlignment="Center" 
+                                HorizontalAlignment="Center"
+                                Grid.Row="0"
+                                Grid.ColumnSpan="4"
+                                Margin="10" />
+
+                            <RadioButton
+                                Margin="10" 
+                                GroupName="Payment"
+                                Content="Last Statement Bal"
+                                Grid.Row="1"
+                                Grid.Column="0"/>
+							<TextBlock
+                                Text=":"
+                                VerticalAlignment="Center"
+                                Grid.Row="1"
+                                Grid.Column="1"
+                                Margin="10" />
+								
+                            <TextBlock 
+                                VerticalAlignment="Center"
+                                Text="$2845.00" 
+                                Grid.Row="1"
+                                Grid.Column="2"
+                                Margin="10" />
+
+                            <RadioButton
+                                Margin="10" 
+                                IsChecked="True" 
+                                GroupName="Payment"
+                                Content="Minimum Amount Due:"
+                                Grid.Row="2"
+                                Grid.Column="0"/>
+							<TextBlock
+								Text=":"
+								VerticalAlignment="Center"
+								Grid.Row="2"
+								Grid.Column="1"
+								Margin="10" />
+                            <TextBlock 
+                                Text="$1.0"
+                                VerticalAlignment="Center"
+                                Grid.Row="2"
+                                Grid.Column="2"
+                                Margin="10" />
+
+                            <RadioButton
+                                Name="otherAmountButton"
+                                Margin="10"
+                                GroupName="Payment"
+                                Content="Other Amount:"
+                                Grid.Row="3"
+                                Grid.Column="0"/>
+							<TextBlock
+								Text=":"
+								VerticalAlignment="Center"
+								Grid.Row="3"
+								Grid.Column="1"
+								Margin="10" />
+                            <NumberBox
+                                Name="otherDueAmount"
+                                Grid.Row="3"
+                                Minimum="2"
+                                Maximum="2844"
+                                HorizontalAlignment="Left"
+                                Grid.Column="2"
+                                Margin="10" />
+                        </Grid>
+                        
+                        <Button 
+                            Click="OnSubmitButtonClick"
+                            Content="Submit"
+                            Grid.Row="4"
+                            Grid.ColumnSpan="4"
+                            Grid.Column="2"
+                            Margin="10" />
+                    </Grid>
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+        </StackPanel>
+    </ScrollViewer>
+</Page>

calendar/Views/CalendarDatePicker/CalendarDatePickerView.xaml.cs

@@ -0,0 +1,121 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using Microsoft.UI.Xaml.Controls;
+using Windows.UI.Popups;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace Syncfusion.CalendarDemos.WinUI.Views.CalendarDatePicker
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class CalendarDatePickerView : Page , IDisposable
+    {
+        public CalendarDatePickerView()
+        {
+            this.InitializeComponent();
+            this.calendarDatePickerViewPanel.PointerPressed += OnCalendarDatePickerViewPanelPointerPressed;
+        }
+
+        private void OnCalendarDatePickerViewPanelPointerPressed(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            // To restrict the focus on first control when clicking on empty area.
+            e.Handled = true;
+        }
+
+        private void languages_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            string selectedLang = languages.SelectedValue.ToString();
+            if (Windows.Globalization.Language.IsWellFormed(selectedLang))
+            {
+                calendarDatePicker3.Language = selectedLang;
+            }
+        }
+
+        private async void OnSubmitButtonClick(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        {
+            var cd = new ContentDialog
+            {
+                Title = "Warning!",
+                Content = "Enter valid expiry date.",
+                CloseButtonText = "Ok"
+            };
+
+            if (cardExpiryDate.SelectedDate != null)
+            {
+                if ((otherAmountButton.IsChecked == true && !double.IsNaN(otherDueAmount.Value)) || otherAmountButton.IsChecked != true)
+                {
+                    cd.Title = "Due payment Succeed!";
+                    cd.Content = "Notification sent to registered email address regarding bill payment.";
+                    cardExpiryDate.SelectedDate = null;
+                    otherDueAmount.Value = double.NaN;
+                }
+                else
+                {
+                    cd.Content = "Enter valid amount.";
+                }
+            }
+
+            cd.XamlRoot = this.Content.XamlRoot;
+            var result = await cd.ShowAsync();
+        }
+        public void Dispose()
+        {
+            this.calendarDatePickerViewPanel.PointerPressed -= OnCalendarDatePickerViewPanelPointerPressed;
+            if (this.calendarDatePicker1 != null)
+            {
+                this.calendarDatePicker1.Dispose();
+                this.calendarDatePicker1 = null;
+            }
+
+            if (this.calendarDatePicker2 != null)
+            {
+                this.calendarDatePicker2.Dispose();
+                this.calendarDatePicker2 = null;
+            }
+
+            if (this.calendarDatePicker3 != null)
+            {
+                this.calendarDatePicker3.Dispose();
+                this.calendarDatePicker3 = null;
+            }
+
+            if (this.calendarDatePicker4 != null)
+            {
+                this.calendarDatePicker4.Dispose();
+                this.calendarDatePicker4 = null;
+            }
+
+            if (this.calendarDatePicker5 != null)
+            {
+                this.calendarDatePicker5.Dispose();
+                this.calendarDatePicker5 = null;
+            }
+
+            if (this.cardExpiryDate != null)
+            {
+                this.cardExpiryDate.Dispose();
+                this.cardExpiryDate = null;
+            }
+
+            if (this.optionDatePicker1 != null)
+            {
+                this.optionDatePicker1.Dispose();
+                this.optionDatePicker1 = null;
+            }
+
+            if (this.optionDatePicker2 != null)
+            {
+                this.optionDatePicker2.Dispose();
+                this.optionDatePicker2 = null;
+            }
+        }
+    }
+}

calendar/Views/CalendarDatePicker/Customization.xaml

@@ -0,0 +1,199 @@
+<Page
+    x:Class="Syncfusion.CalendarDemos.WinUI.Views.CalendarDatePicker.Customization"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:common="using:Syncfusion.DemosCommon.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Syncfusion.CalendarDemos.WinUI"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
+    xmlns:editor="using:Syncfusion.UI.Xaml.Editors"
+    Background="Transparent"
+    mc:Ignorable="d">
+
+    <ScrollViewer>
+        <StackPanel x:Name="customizationViewPanel">
+            <StackPanel.Resources>
+                <DataTemplate x:Key="defaultTemplate">
+                </DataTemplate>
+                <DataTemplate x:Key="singleEventTemplate_1">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="DeepPink" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="singleEventTemplate_2">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Cyan" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="doubleEventTemplate_1">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Violet" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Orange" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="doubleEventTemplate_2">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Gold" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Green" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="doubleEventTemplate_3">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Brown" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Blue" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="tripleEventTemplate_1">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Green" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="DeepSkyBlue" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Orange" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="tripleEventTemplate_2">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Red" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Green" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Gold" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+            </StackPanel.Resources>
+            <common:DemoLayout
+                CSharpSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDatePicker/Resources/SourceCodes/ItemTemplateSelector_cs.txt,
+                                                                 Common=Calendar/Views/CalendarDatePicker/Resources/SourceCodes/ItemTemplateSelector_cs.txt}"
+                HeaderText="Calendar DatePicker Item Template Customization."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDatePicker/Resources/SourceCodes/ItemTemplateSelector_xaml.txt,
+                                                               Common=Calendar/Views/CalendarDatePicker/Resources/SourceCodes/ItemTemplateSelector_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDatePicker
+                        x:Name="calendarDatePicker1"
+                        MinWidth="180"
+                        DayOfWeekFormat="{}{dayofweek.abbreviated(3)}"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center">
+                        <FlyoutBase.AttachedFlyout>
+                            <editor:DropDownFlyout>
+                                <calendar:SfCalendar>
+                                    <calendar:SfCalendar.Resources>
+                                        <ResourceDictionary>
+                                            <!--  Resources and color keys for Calendar Control  -->
+                                            <SolidColorBrush x:Key="SyncfusionCalendarItemOutOfScopeForeground"
+                                                             Color="SlateGray" Opacity="0.5" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarWeekItemForeground"
+                                                             Color="{ThemeResource SystemBaseMediumLowColor}" />
+                                            <x:Double x:Key="SyncfusionSubtitleAltFontSize">16</x:Double>
+                                            <Thickness x:Key="SyncfusionCalendarItemMargin">1</Thickness>
+                                            <x:Double x:Key="SyncfusionBodyFontSize">13</x:Double>
+                                            <Thickness x:Key="SyncfusionCalendarBorderThickness">0</Thickness>
+                                            
+                                            <local:CustomCalendarItemTemplateSelector x:Key="selector"
+                                                SingleEventTemplate_1="{StaticResource singleEventTemplate_1}"
+                                                SingleEventTemplate_2="{StaticResource singleEventTemplate_2}"
+                                                DoubleEventTemplate_1="{StaticResource doubleEventTemplate_1}"
+                                                DoubleEventTemplate_2="{StaticResource doubleEventTemplate_2}"                                                                     
+                                                DoubleEventTemplate_3="{StaticResource doubleEventTemplate_3}"
+                                                TripleEventTemplate_1="{StaticResource tripleEventTemplate_1}"
+                                                TripleEventTemplate_2="{StaticResource tripleEventTemplate_2}"
+                                                DefaultTemplate="{StaticResource defaultTemplate}"/>
+                                            <Style TargetType="calendar:CalendarItem">
+                                                <Setter Property="CornerRadius" Value="14"/>
+                                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+                                                <Setter Property="ContentTemplate">
+                                                    <Setter.Value>
+                                                        <DataTemplate>
+                                                            <Grid MinWidth="40" MinHeight="40">
+                                                                <ContentControl
+                                                                    HorizontalAlignment="Center"
+                                                                    VerticalAlignment="Center"
+                                                                    Margin="2"
+                                                                    Content="{Binding DisplayText}"/>
+                                                                <ContentControl
+                                                                    Margin="3"
+                                                                    HorizontalAlignment="Center"
+                                                                    VerticalAlignment="Bottom"
+                                                                    Content="{Binding Date}"
+                                                                    ContentTemplateSelector="{StaticResource selector}" />
+                                                            </Grid>
+                                                        </DataTemplate>
+                                                    </Setter.Value>
+                                                </Setter>
+                                            </Style>
+                                        </ResourceDictionary>
+                                    </calendar:SfCalendar.Resources>
+                                </calendar:SfCalendar>
+                            </editor:DropDownFlyout>
+                        </FlyoutBase.AttachedFlyout>
+                    </calendar:SfCalendarDatePicker>
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+            <common:DemoLayout
+                HeaderText="Calendar DatePicker ThemeKey Customization."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDatePicker/Resources/SourceCodes/ThemeKeyCustomization_xaml.txt,
+                                                               Common=Calendar/Views/CalendarDatePicker/Resources/SourceCodes/ThemeKeyCustomization_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDatePicker
+                        x:Name="calendarDatePicker2"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center">
+                        <FlyoutBase.AttachedFlyout>
+                            <editor:DropDownFlyout>
+                                <calendar:SfCalendar>
+                                    <calendar:SfCalendar.Resources>
+                                        <ResourceDictionary>
+
+                                            <!--Theme Key customization-->
+                                            <SolidColorBrush x:Key="SyncfusionCalendarNavigationButtonForeground"
+                                                             Color="#FF248D92" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarWeekItemForeground"
+                                                             Color="#FF248D92" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarTodayItemForeground"
+                                                             Color="{ThemeResource SystemBaseHighColor}" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarItemBackground"
+                                                             Color="{ThemeResource SystemListLowColor}" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarItemBorderBrush"
+                                                             Color="{ThemeResource SystemListLowColor}"/>
+                                            <SolidColorBrush x:Key="SyncfusionCalendarTodayItemBackground"
+                                                             Color="#FF9BC5ED" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarTodayItemBorderBrush"
+                                                             Color="#FF9BC5ED" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarItemOutOfScopeForeground"
+                                                             Color="SlateGray" Opacity="0.5" />
+                                            <Thickness x:Key="SyncfusionCalendarItemMargin">1</Thickness>
+                                            <x:Double x:Key="SyncfusionBodyFontSize">13</x:Double>
+                                            <FontFamily x:Key="SyncfusionControlThemeFontFamily">SimSun</FontFamily>
+                                            <x:Double x:Key="SyncfusionSubtitleAltFontSize">16</x:Double>
+                                            <Thickness x:Key="SyncfusionCalendarBorderThickness">0</Thickness>
+                                            
+                                            <Style TargetType="calendar:CalendarItem">
+                                                <Setter Property="CornerRadius" Value="5"/>
+                                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+                                                <Setter Property="ContentTemplate">
+                                                    <Setter.Value>
+                                                        <DataTemplate>
+                                                            <Grid MinWidth="40" MinHeight="40">
+                                                                <ContentControl
+                                                                    HorizontalAlignment="Center"
+                                                                    VerticalAlignment="Center"
+                                                                    Margin="3"
+                                                                    Content="{Binding DisplayText}"/>
+                                                            </Grid>
+                                                        </DataTemplate>
+                                                    </Setter.Value>
+                                                </Setter>
+                                            </Style>
+                                        </ResourceDictionary>
+                                    </calendar:SfCalendar.Resources>
+                                </calendar:SfCalendar>
+                            </editor:DropDownFlyout>
+                        </FlyoutBase.AttachedFlyout>
+                    </calendar:SfCalendarDatePicker>
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+        </StackPanel>
+    </ScrollViewer>
+
+</Page>

calendar/Views/CalendarDatePicker/Customization.xaml.cs

@@ -0,0 +1,48 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using Microsoft.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace Syncfusion.CalendarDemos.WinUI.Views.CalendarDatePicker
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class Customization : Page, IDisposable
+    {
+        public Customization()
+        {
+            this.InitializeComponent();
+            this.customizationViewPanel.PointerPressed += OnCustomizationViewPanelPointerPressed;
+        }
+
+        private void OnCustomizationViewPanelPointerPressed(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            // To restrict the focus on first control when clicking on empty area.
+            e.Handled = true;
+        }
+
+        public void Dispose()
+        {
+            this.customizationViewPanel.PointerPressed -= OnCustomizationViewPanelPointerPressed;
+            if (this.calendarDatePicker1 != null)
+            {
+                this.calendarDatePicker1.Dispose();
+                this.calendarDatePicker1 = null;
+            }
+
+            if (this.calendarDatePicker2 != null)
+            {
+                this.calendarDatePicker2.Dispose();
+                this.calendarDatePicker2 = null;
+            }
+        }
+    }
+}

calendar/Views/CalendarDatePicker/Resources/SourceCodes/BlackoutDates_cs.txt

@@ -0,0 +1,13 @@
+public class ViewModel
+{       
+    public DateTimeOffsetCollection BlackoutSpecificDates { get; set; }
+
+    public ViewModel()
+    {
+        BlackoutSpecificDates = new DateTimeOffsetCollection();
+        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 4)));
+        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 11)));
+        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 28)));
+        ...
+    }
+}

calendar/Views/CalendarDatePicker/Resources/SourceCodes/BlackoutDates_xaml.txt

@@ -0,0 +1,2 @@
+<calendar:SfCalendarDatePicker
+    BlackoutDates="{Binding BlackoutSpecificDates}"/>

calendar/Views/CalendarDatePicker/Resources/SourceCodes/CalendarTypes_xaml.txt

@@ -0,0 +1,3 @@
+<calendar:SfCalendarDatePicker
+    CalendarIdentifier="$(CalendarIdentifier)"
+    Language="$(Language)"/>

calendar/Views/CalendarDatePicker/Resources/SourceCodes/Formatting_xaml.txt

@@ -0,0 +1,6 @@
+<calendar:SfCalendarDatePicker
+    FormatString="$(FormatString)"
+    DayFormat="$(DayFormat)"
+    MonthFormat="$(MonthFormat)"
+    DayOfWeekFormat="$(DayOfWeekFormat)"
+    MonthHeaderFormat="$(MonthHeaderFormat)"/>

calendar/Views/CalendarDatePicker/Resources/SourceCodes/ItemTemplateSelector_cs.txt

@@ -0,0 +1,39 @@
+public class CustomCalendarItemTemplateSelector : DataTemplateSelector
+{
+    public CustomCalendarItemTemplateSelector()
+    {
+        SpecialDates = new Dictionary<DateTimeOffset, string>();
+        SpecialDates.Add(DateTimeOffset.Now.AddMonths(-1).AddDays(1), "SingleEvent_1");
+        SpecialDates.Add(DateTimeOffset.Now.AddMonths(-1).AddDays(5), "DoubleEvent_1");
+        ...
+    }
+
+    private Dictionary<DateTimeOffset, string> SpecialDates { get; set; }
+
+    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
+    {
+        if (item != null)
+        {
+            DateTimeOffset calendarItem = (DateTimeOffset)item;
+            DateTimeOffset dateTimeOffset = SpecialDates.Keys.FirstOrDefault(x => x.Date == calendarItem.Date);
+
+            if (dateTimeOffset != DateTimeOffset.MinValue)
+            {
+                string template = this.SpecialDates[dateTimeOffset];
+
+                switch (template)
+                {
+                    case "SingleEvent_1":
+                        return Application.Current.Resources["singleEventTemplate_1"] as DataTemplate;
+                    case "DoubleEvent_1":
+                        return Application.Current.Resources["doubleEventTemplate_1"] as DataTemplate;
+                    ...
+                }
+            }
+
+            return Application.Current.Resources["defaultTemplate"] as DataTemplate;
+        }
+
+        return base.SelectTemplateCore(item, container);
+    }
+}

calendar/Views/CalendarDatePicker/Resources/SourceCodes/ItemTemplateSelector_xaml.txt

@@ -0,0 +1,28 @@
+<calendar:SfCalendarDatePicker
+    DayOfWeekFormat="{}{dayofweek.abbreviated(3)}">
+    <FlyoutBase.AttachedFlyout>
+        <editor:DropDownFlyout>
+            <calendar:SfCalendar>
+                <calendar:SfCalendar.Resources>
+                    <local:CustomCalendarItemTemplateSelector x:Key="selector" />
+                    <Style TargetType="calendar:CalendarItem">
+                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+                        <Setter Property="ContentTemplate">
+                            <Setter.Value>
+                                <DataTemplate>
+                                    <Grid>
+                                        <ContentControl Content="{Binding DisplayText}"/>
+                                        <ContentControl
+                                            Content="{Binding Date}"
+                                            ContentTemplateSelector="{StaticResource selector}"/>
+                                    </Grid>
+                                </DataTemplate>
+                            </Setter.Value>
+                        </Setter>
+                    </Style>
+                </calendar:SfCalendar.Resources>
+            </calendar:SfCalendar>
+        </editor:DropDownFlyout>
+    </FlyoutBase.AttachedFlyout>
+</calendar:SfCalendarDatePicker>

calendar/Views/CalendarDatePicker/Resources/SourceCodes/Navigation_xaml.txt

@@ -0,0 +1,6 @@
+<calendar:SfCalendarDatePicker
+    MinDate="$(MinDate)"
+    MaxDate="$(MaxDate)"
+    MinDisplayMode="$(MinDisplayMode)"
+    MaxDisplayMode="$(MaxDisplayMode)"
+    DisplayMode="$(DisplayMode)"/>

calendar/Views/CalendarDatePicker/Resources/SourceCodes/SimpleCalendarDatePicker_xaml.txt

@@ -0,0 +1,7 @@
+<calendar:SfCalendarDatePicker
+    EditMode="$(EditMode)"
+    SelectionShape="$(SelectionShape)"
+    SelectionHighlightMode="$(SelectionHighlightMode)"
+    PlaceholderText="$(CalendarPlaceholderText)"
+    FirstDayOfWeek="$(FirstDayOfWeek)"
+    NumberOfWeeksInView="$(NumberOfWeeksInView)"/>

calendar/Views/CalendarDatePicker/Resources/SourceCodes/ThemeKeyCustomization_xaml.txt

@@ -0,0 +1,37 @@
+<calendar:SfCalendarDatePicker>
+    <FlyoutBase.AttachedFlyout>
+        <editor:DropDownFlyout>
+            <calendar:SfCalendar>
+                <calendar:SfCalendar.Resources>
+                    <ResourceDictionary>
+                    
+                        <!--Theme key customization-->
+                        <SolidColorBrush x:Key="SyncfusionCalendarNavigationButtonForeground"
+                                         Color="#FF248D92" />
+                        <SolidColorBrush x:Key="SyncfusionCalendarWeekItemForeground"
+                                         Color="#FF248D92" />                                
+                        <SolidColorBrush x:Key="SyncfusionCalendarTodayItemBackground"
+                                         Color="#FF9BC5ED" />
+                        <Thickness x:Key="SyncfusionCalendarItemMargin">1.5</Thickness>
+                        <x:Double x:Key="SyncfusionSubtitleAltFontSize">30</x:Double>
+                        ...
+                        
+                        <Style TargetType="calendar:CalendarItem">
+                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+                            <Setter Property="ContentTemplate">
+                                <Setter.Value>
+                                    <DataTemplate>
+                                        <Grid>
+                                            <ContentControl Content="{Binding DisplayText}"/>
+                                        </Grid>
+                                    </DataTemplate>
+                                </Setter.Value>
+                            </Setter>
+                        </Style>
+                    </ResourceDictionary>
+                </calendar:SfCalendar.Resources>
+            </calendar:SfCalendar>
+        </editor:DropDownFlyout>
+    </FlyoutBase.AttachedFlyout>
+</calendar:SfCalendarDatePicker>

calendar/Views/CalendarDateRangePicker/CalendarDateRangePickerView.xaml

@@ -0,0 +1,303 @@
+<Page
+    x:Class="Syncfusion.CalendarDemos.WinUI.Views.CalendarDateRangePicker.CalendarDateRangePickerView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:common="using:Syncfusion.DemosCommon.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
+    xmlns:enumextension="using:Syncfusion.DemosCommon.WinUI"
+    xmlns:local="using:Syncfusion.CalendarDemos.WinUI"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    Background="Transparent"
+    mc:Ignorable="d">
+    <Page.Resources>
+        <local:DateFormatToDisplayFormatConverter x:Name="dateFormatToDisplayFormatConverter" />
+        <local:ValueToUlongConverter x:Name="ValueToUlongConverter" />
+    </Page.Resources>
+
+    <Page.DataContext>
+        <local:CalendarViewModel x:Name="viewModel" />
+    </Page.DataContext>
+
+    <ScrollViewer>
+        <StackPanel x:Name="calendarDateRangePickerViewPanel">
+            <common:DemoLayout HeaderText="A simple Calendar Date Picker control." 
+                               XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/DateRangePicker_xaml.txt,
+                                                                              Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/DateRangePicker_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDateRangePicker
+                        x:Name="calendarDateRangePicker1"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        MinDatesCountInRange="{Binding MinDayCount}"
+                        ShowSubmitButtons="{Binding ShowSubmitButtons}" />
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <muxc:NumberBox
+                            Width="180"
+                            Margin="5"
+                            Minimum="0"
+                            Header="Minimum Dates Count"
+                            Text="{Binding MinDayCount, Converter={StaticResource ValueToUlongConverter}, Mode=TwoWay}" />
+                        <muxc:NumberBox
+                            Name="maxText"
+                            Width="180"
+                            Margin="5"
+                            Header="Maximum Dates Count"
+                            ValueChanged="MaxText_ValueChanged" />
+                        <TextBox
+                            Width="180"
+                            Margin="5"
+                            Header="PlaceholderText"
+                            Text="{Binding ElementName=calendarDateRangePicker1, Path=PlaceholderText, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="ShowSubmitButton" SubstitutionValue="{Binding ElementName=calendarDateRangePicker1, Path=ShowSubmitButtons, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MinimumDayCount" SubstitutionValue="{Binding ElementName=calendarDateRangePicker1, Path=MinDatesCountInRange, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MaximumDayCount" SubstitutionValue="{Binding ElementName=calendarDateRangePicker1, Path=MaxDatesCountInRange, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="PlaceholderText" SubstitutionValue="{Binding ElementName=calendarDateRangePicker1, Path=PlaceholderText, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="Preset and its position." 
+                               XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/Preset_xaml.txt,
+                                                                              Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/Preset_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDateRangePicker
+                        x:Name="calendarDateRangePicker2"
+                        SelectedDateRangeChanged="calendarDateRangePicker2_SelectedDateRangeChanged"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Preset="{Binding PresetColection}"
+                        PresetPosition="End">
+                        <calendar:SfCalendarDateRangePicker.PresetTemplate>
+                            <DataTemplate>
+                                <ListView ItemsSource="{Binding}" SelectionChanged="ListView_SelectionChanged"  SelectedIndex="4" />
+                            </DataTemplate>
+                        </calendar:SfCalendarDateRangePicker.PresetTemplate>
+                    </calendar:SfCalendarDateRangePicker>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="Preset Position"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:PresetPosition}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:PresetPosition}, ElementName=calendarDateRangePicker2, Path=PresetPosition, Mode=TwoWay}" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="PresetPosition" SubstitutionValue="{Binding ElementName=calendarDateRangePicker2, Path=PresetPosition, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="Date restriction." 
+                               XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/Navigation_xaml.txt,
+                                                                              Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/Navigation_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDateRangePicker
+                        x:Name="calendarDateRangePicker3"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        MaxDate="{Binding MaxDate, Mode=TwoWay}"
+                        MinDate="{Binding MinDate, Mode=TwoWay}" />
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <calendar:SfCalendarDatePicker
+                            x:Name="optionsDatePicker1"
+                            Width="180"
+                            Margin="5"
+                            AllowNull="False"
+                            Header="MinimumDate"
+                            MaxDate="{Binding MaximumDate, Mode=TwoWay}"
+                            MinDate="{Binding MinimumDate, Mode=TwoWay}"
+                            SelectedDate="{Binding MinDate, Mode=TwoWay}" />
+                        <calendar:SfCalendarDatePicker
+                            x:Name="optionsDatePicker2"
+                            Width="180"
+                            Margin="5"
+                            AllowNull="False"
+                            Header="MaximumDate"
+                            MaxDate="{Binding MaximumDate, Mode=TwoWay}"
+                            MinDate="{Binding MinimumDate, Mode=TwoWay}"
+                            SelectedDate="{Binding MaxDate, Mode=TwoWay}" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="MinDate" SubstitutionValue="{Binding ElementName=calendarDateRangePicker3, Path=MinDate, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MaxDate" SubstitutionValue="{Binding ElementName=calendarDateRangePicker3, Path=MaxDate, Mode=OneWay}" />
+                  </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="Month range selection." 
+                               XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/RangeSelection_xaml.txt,
+                                                                              Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/RangeSelection_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDateRangePicker
+                        x:Name="calendarDateRangePicker8"
+                        MinWidth="180"
+                        DisplayDateFormat="{}{0:MM/yy} - {1:MM/yy}"
+                        MinDisplayMode="Year"
+                        MaxDisplayMode="Decade"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"/>
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="MinDisplayMode" SubstitutionValue="{Binding ElementName=calendarDateRangePicker8, Path=MinDisplayMode, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MaxDisplayMode" SubstitutionValue="{Binding ElementName=calendarDateRangePicker8, Path=MaxDisplayMode, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="Different types of Calendar."
+                               XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/CalendarTypes_xaml.txt,
+                                                                              Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/CalendarTypes_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDateRangePicker
+                        x:Name="CalendarTypes"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center" />
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="CalendarIdentifier"
+                            ItemsSource="{Binding Items}"
+                            SelectedItem="{Binding ElementName=CalendarTypes, Path=CalendarIdentifier, Mode=TwoWay}" />
+                        <ComboBox
+                            x:Name="languages"
+                            Width="180"
+                            Margin="5"
+                            DisplayMemberPath="Name"
+                            Header="Languages"
+                            ItemsSource="{Binding Languages}"
+                            SelectedIndex="0"
+                            SelectedValuePath="Code"
+                            SelectionChanged="languages_SelectionChanged" />
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="CalendarIdentifier" SubstitutionValue="{Binding ElementName=CalendarTypes, Path=CalendarIdentifier, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="Language" SubstitutionValue="{Binding ElementName=CalendarTypes, Path=Language, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="Date Formatting." 
+                               XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/Formatting_xaml.txt,
+                                                                              Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/Formatting_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDateRangePicker
+                        x:Name="calendarDateRangePicker5"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center" 
+                        DisplayDateFormat="{Binding ElementName=FormatString, Path=SelectedItem, Mode=TwoWay}"
+                        DayFormat="{Binding ElementName=DayFormat, Path=SelectedItem, ConverterParameter='day', Mode=TwoWay, Converter={StaticResource dateFormatToDisplayFormatConverter}}"
+                        DayOfWeekFormat="{Binding ElementName=DayOfWeekFormat, Path=SelectedItem, ConverterParameter='dayofweek', Mode=TwoWay, Converter={StaticResource dateFormatToDisplayFormatConverter}}"
+                        MonthFormat="{Binding ElementName=MonthFormat, Path=SelectedItem, ConverterParameter='month', Mode=TwoWay, Converter={StaticResource dateFormatToDisplayFormatConverter}}"
+                        MonthHeaderFormat="{Binding ElementName=MonthHeaderFormat, Path=SelectedItem, ConverterParameter='header', Mode=TwoWay, Converter={StaticResource dateFormatToDisplayFormatConverter}}" />
+                </common:DemoLayout.Example>
+                <common:DemoLayout.Options>
+                    <StackPanel>
+                        <ComboBox
+                            Width="180"
+                            Margin="5"
+                            Header="FirstDayOfWeek"
+                            ItemsSource="{enumextension:EnumToStringValuesExtension Type=calendar:FirstDayOfWeek}"
+                            SelectedItem="{Binding Converter={enumextension:StringToEnumValueConverter Type=calendar:FirstDayOfWeek}, ElementName=calendarDateRangePicker5, Path=FirstDayOfWeek, Mode=TwoWay}" />
+                        <ComboBox
+                            Name="FormatString"
+                            Width="180"
+                            Margin="5"
+                            SelectedIndex="0"
+                            Header="FormatString">
+                            <x:String>{0:d} - {1:d}</x:String>
+                            <x:String>{0:D} - {1:D}</x:String>
+                            <x:String>{0:f} - {1:f}</x:String>
+                            <x:String>{0:F} - {1:F}</x:String>
+                            <x:String>{0:g} - {1:g}</x:String>
+                            <x:String>{0:G} - {1:G}</x:String>
+                            <x:String>{0:s} - {1:s}</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Name="DayFormat"
+                            Width="180"
+                            Margin="5"
+                            Header="DayFormat"
+                            SelectedIndex="0">
+                            <x:String>Abbreviated</x:String>
+                            <x:String>Full</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Name="MonthFormat"
+                            Width="180"
+                            Margin="5"
+                            Header="MonthFormat"
+                            SelectedIndex="0">
+                            <x:String>Abbreviated</x:String>
+                            <x:String>Full</x:String>
+                            <x:String>Number</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Name="DayOfWeekFormat"
+                            Width="180"
+                            Margin="5"
+                            Header="DayOfWeekFormat"
+                            SelectedIndex="0">
+                            <x:String>Abbreviated - 2 char</x:String>
+                            <x:String>Abbreviated - 3 char</x:String>
+                        </ComboBox>
+                        <ComboBox
+                            Name="MonthHeaderFormat"
+                            Width="180"
+                            Margin="5"
+                            Header="MonthHeaderFormat"
+                            SelectedIndex="0">
+                            <x:String>Full</x:String>
+                            <x:String>Abbreviated</x:String>
+                        </ComboBox>
+                    </StackPanel>
+                </common:DemoLayout.Options>
+                <common:DemoLayout.Substitutions>
+                    <common:DemoLayoutSubstitution Key="FormatString" SubstitutionValue="{Binding ElementName=calendarDateRangePicker5, Path=DisplayDateFormat, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="DayFormat" SubstitutionValue="{Binding ElementName=calendarDateRangePicker5, Path=DayFormat, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MonthFormat" SubstitutionValue="{Binding ElementName=calendarDateRangePicker5, Path=MonthFormat, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="DayOfWeekFormat" SubstitutionValue="{Binding ElementName=calendarDateRangePicker5, Path=DayOfWeekFormat, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="MonthHeaderFormat" SubstitutionValue="{Binding ElementName=calendarDateRangePicker5, Path=MonthHeaderFormat, Mode=OneWay}" />
+                    <common:DemoLayoutSubstitution Key="FirstDayOfWeek" SubstitutionValue="{Binding ElementName=calendarDateRangePicker1, Path=FirstDayOfWeek, Mode=OneWay}" />
+                </common:DemoLayout.Substitutions>
+            </common:DemoLayout>
+            <common:DemoLayout HeaderText="Blackout all weekends.">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDateRangePicker
+                        x:Name="calendarDateRangePicker6"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        ItemPrepared="Blackout_ItemPrepared" />
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+            <common:DemoLayout 
+                HeaderText="Blackout specific dates."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/BlackoutDates_xaml.txt,
+                                                               Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/BlackoutDates_xaml.txt}"
+                CSharpSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/BlackoutDates_cs.txt,
+                                                                 Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/BlackoutDates_cs.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDateRangePicker
+                        x:Name="calendarDateRangePicker7"
+                        MinWidth="180"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center" 
+                        BlackoutDates="{Binding BlackoutSpecificDates}"/>
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+        </StackPanel>
+    </ScrollViewer>
+</Page>

calendar/Views/CalendarDateRangePicker/CalendarDateRangePickerView.xaml.cs

@@ -0,0 +1,195 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using System.Globalization;
+using Microsoft.UI.Xaml.Controls;
+using Syncfusion.UI.Xaml.Calendar;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace Syncfusion.CalendarDemos.WinUI.Views.CalendarDateRangePicker
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class CalendarDateRangePickerView : Page, IDisposable
+    {
+        private ListView listView;
+        public CalendarDateRangePickerView()
+        {
+            this.InitializeComponent();
+            this.calendarDateRangePickerViewPanel.PointerPressed += OnCalendarDateRangePickerViewPanelPointerPressed;
+        }
+
+        private void OnCalendarDateRangePickerViewPanelPointerPressed(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            // To restrict the focus on first control when clicking on empty area.
+            e.Handled = true;
+        }
+
+        private void languages_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            string selectedLang = languages.SelectedValue.ToString();
+            if (Windows.Globalization.Language.IsWellFormed(selectedLang))
+            {
+                CalendarTypes.Language = selectedLang;
+            }
+        }
+
+        private void MaxText_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs args)
+        {
+            ulong? nullableCount;
+            ulong i;
+            if (ulong.TryParse(maxText.Value.ToString(), out i))
+            {
+                nullableCount = i;
+            }
+            else
+            {
+                nullableCount = null;
+            }
+
+            calendarDateRangePicker1.MaxDatesCountInRange = nullableCount;
+        }
+
+        private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            listView = sender as ListView;
+            if (listView.SelectedItem.ToString() == "This Week")
+            {
+                DateTimeOffset startdate = DateTimeOffset.Now.AddDays(-(DateTimeOffset.Now.DayOfWeek - this.GetFirstDayOfWeek(calendarDateRangePicker2.FirstDayOfWeek)));
+                this.calendarDateRangePicker2.SelectedRange = new Syncfusion.UI.Xaml.Calendar.DateTimeOffsetRange(startdate, startdate.AddDays(6));
+            }
+            else if (listView.SelectedItem.ToString() == "This Month")
+            {
+                DateTimeOffset startdate = DateTimeOffset.Now.AddDays(-(DateTimeOffset.Now.Date.Day - 1));
+                this.calendarDateRangePicker2.SelectedRange = new Syncfusion.UI.Xaml.Calendar.DateTimeOffsetRange(startdate, startdate.AddDays(DateTime.DaysInMonth(startdate.Year, startdate.Month) - 1));
+            }
+            else if (listView.SelectedItem.ToString() == "Last Month")
+            {
+                DateTimeOffset startdate = DateTimeOffset.Now.AddMonths(-1).AddDays(-(DateTimeOffset.Now.Date.Day - 1));
+                this.calendarDateRangePicker2.SelectedRange = new Syncfusion.UI.Xaml.Calendar.DateTimeOffsetRange(startdate, startdate.AddDays(DateTime.DaysInMonth(startdate.Year, startdate.Month) - 1));
+            }
+            else if (listView.SelectedItem.ToString() == "This Year")
+            {
+                DateTimeOffset startdate = DateTimeOffset.Now.AddMonths(-(DateTimeOffset.Now.Month - 1)).AddDays(-(DateTimeOffset.Now.Date.Day - 1));
+                this.calendarDateRangePicker2.SelectedRange = new Syncfusion.UI.Xaml.Calendar.DateTimeOffsetRange(startdate, startdate.AddMonths(11).AddDays(DateTime.DaysInMonth(startdate.Year, startdate.Month) - 1));
+            }
+            else if (listView.SelectedItem.ToString() == "Custom Range" && this.calendarDateRangePicker2.SelectedRange != null &&  this.calendarDateRangePicker2.SelectedRange.EndDate != null)
+            {
+                this.calendarDateRangePicker2.SelectedRange = null;
+            }
+        }
+
+        private void Blackout_ItemPrepared(object sender, Syncfusion.UI.Xaml.Calendar.CalendarItemPreparedEventArgs e)
+        {
+            if (e.ItemInfo.ItemType == CalendarItemType.Day &&
+                (e.ItemInfo.Date.DayOfWeek == DayOfWeek.Saturday ||
+                e.ItemInfo.Date.DayOfWeek == DayOfWeek.Sunday))
+            {
+                e.ItemInfo.IsBlackout = true;
+            }
+        }
+
+        private void calendarDateRangePicker2_SelectedDateRangeChanged(object sender, SelectedDateRangeChangedEventArgs e)
+        {
+            if (listView != null && ((e.RangeStartNewValue != null && e.RangeEndNewValue == null) || (e.RangeStartOldValue != null && e.RangeEndOldValue != null && e.RangeEndNewValue == null)))
+            {
+                listView.SelectedIndex = 4;
+            }
+        }
+
+        private DayOfWeek GetFirstDayOfWeek(FirstDayOfWeek firstDayOfWeek)
+        {
+            switch (firstDayOfWeek)
+            {
+                case FirstDayOfWeek.Sunday:
+                    return DayOfWeek.Sunday;
+                case FirstDayOfWeek.Monday:
+                    return DayOfWeek.Monday;
+                case FirstDayOfWeek.Tuesday:
+                    return DayOfWeek.Tuesday;
+                case FirstDayOfWeek.Wednesday:
+                    return DayOfWeek.Wednesday;
+                case FirstDayOfWeek.Thursday:
+                    return DayOfWeek.Thursday;
+                case FirstDayOfWeek.Friday:
+                    return DayOfWeek.Friday;
+                case FirstDayOfWeek.Saturday:
+                    return DayOfWeek.Saturday;
+                default:
+                    return CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek;
+            }
+        }
+
+        public void Dispose()
+        {
+            this.calendarDateRangePickerViewPanel.PointerPressed -= OnCalendarDateRangePickerViewPanelPointerPressed;
+            if (this.calendarDateRangePicker1 != null)
+            {
+                this.calendarDateRangePicker1.Dispose();
+                this.calendarDateRangePicker1 = null;
+            }
+
+            if (this.calendarDateRangePicker2 != null)
+            {
+                this.calendarDateRangePicker2.SelectedDateRangeChanged -= calendarDateRangePicker2_SelectedDateRangeChanged;
+                this.calendarDateRangePicker2.Dispose();
+                this.calendarDateRangePicker2 = null;
+            }
+
+            if (this.calendarDateRangePicker3 != null)
+            {
+                this.calendarDateRangePicker3.Dispose();
+                this.calendarDateRangePicker3 = null;
+            }
+
+            if (this.calendarDateRangePicker5 != null)
+            {
+                this.calendarDateRangePicker5.Dispose();
+                this.calendarDateRangePicker5 = null;
+            }
+
+            if (this.calendarDateRangePicker6 != null)
+            {
+                this.calendarDateRangePicker6.Dispose();
+                this.calendarDateRangePicker6 = null;
+            }
+
+            if (this.calendarDateRangePicker7 != null)
+            {
+                this.calendarDateRangePicker7.Dispose();
+                this.calendarDateRangePicker7 = null;
+            }
+
+            if (this.calendarDateRangePicker8 != null)
+            {
+                this.calendarDateRangePicker8.Dispose();
+                this.calendarDateRangePicker8 = null;
+            }
+
+            if (this.CalendarTypes != null)
+            {
+                this.CalendarTypes.Dispose();
+                this.CalendarTypes = null;
+            }
+
+            if (this.optionsDatePicker1 != null)
+            {
+                this.optionsDatePicker1.Dispose();
+                this.optionsDatePicker1 = null;
+            }
+
+            if (this.optionsDatePicker2 != null)
+            {
+                this.optionsDatePicker2.Dispose();
+                this.optionsDatePicker2 = null;
+            }
+        }
+    }
+}

calendar/Views/CalendarDateRangePicker/Customization.xaml

@@ -0,0 +1,208 @@
+<Page
+    x:Class="Syncfusion.CalendarDemos.WinUI.Views.CalendarDateRangePicker.Customization"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:common="using:Syncfusion.DemosCommon.WinUI"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Syncfusion.CalendarDemos.WinUI"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar"
+    xmlns:editor="using:Syncfusion.UI.Xaml.Editors"
+    Background="Transparent"
+    mc:Ignorable="d">
+    
+    <Page.DataContext>
+        <local:CalendarViewModel x:Name="viewModel" />
+    </Page.DataContext>
+
+    <ScrollViewer>
+        <StackPanel x:Name="customizationViewPanel">
+            <StackPanel.Resources>
+                <DataTemplate x:Key="defaultTemplate">
+                </DataTemplate>
+                <DataTemplate x:Key="singleEventTemplate_1">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="DeepPink" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="singleEventTemplate_2">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Cyan" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="doubleEventTemplate_1">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Violet" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Orange" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="doubleEventTemplate_2">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Gold" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Green" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="doubleEventTemplate_3">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Brown" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Blue" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="tripleEventTemplate_1">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Green" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="DeepSkyBlue" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Orange" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Key="tripleEventTemplate_2">
+                    <StackPanel Orientation="Horizontal">
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Red" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Green" Margin="2"/>
+                        <Ellipse MinWidth="4" MinHeight="4" Fill="Gold" Margin="2"/>
+                    </StackPanel>
+                </DataTemplate>
+            </StackPanel.Resources>
+            <common:DemoLayout
+                CSharpSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/ItemTemplateSelector_cs.txt,
+                                                                 Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/ItemTemplateSelector_cs.txt}"
+                HeaderText="Calendar DatePicker Item Template Customization."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/ItemTemplateSelector_xaml.txt,
+                                                               Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/ItemTemplateSelector_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDateRangePicker
+                        x:Name="calendarDateRangePicker1"
+                        MinWidth="180"
+                        SelectedRange="{Binding SelectedRange, Mode=TwoWay}"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center">
+                        <FlyoutBase.AttachedFlyout>
+                            <editor:DropDownFlyout>
+                                <calendar:SfCalendar DayOfWeekFormat="{}{dayofweek.abbreviated(3)}"
+                                    SelectionMode="Range"
+                                    SelectedRange="{Binding SelectedRange, Mode=TwoWay}">
+                                    <calendar:SfCalendar.Resources>
+                                        <ResourceDictionary>
+                                            <!--  Resources and color keys for Calendar Control  -->
+                                            <SolidColorBrush x:Key="SyncfusionCalendarItemOutOfScopeForeground"
+                                                             Color="SlateGray" Opacity="0.5" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarWeekItemForeground"
+                                                             Color="{ThemeResource SystemBaseMediumLowColor}" />
+                                            <x:Double x:Key="SyncfusionSubtitleAltFontSize">16</x:Double>
+                                            <Thickness x:Key="SyncfusionCalendarItemMargin">1</Thickness>
+                                            <x:Double x:Key="SyncfusionBodyFontSize">13</x:Double>
+                                            <Thickness x:Key="SyncfusionCalendarBorderThickness">0</Thickness>
+                                            
+                                            <local:CustomCalendarItemTemplateSelector x:Key="selector"
+                                                SingleEventTemplate_1="{StaticResource singleEventTemplate_1}"
+                                                SingleEventTemplate_2="{StaticResource singleEventTemplate_2}"
+                                                DoubleEventTemplate_1="{StaticResource doubleEventTemplate_1}"
+                                                DoubleEventTemplate_2="{StaticResource doubleEventTemplate_2}"                                                                     
+                                                DoubleEventTemplate_3="{StaticResource doubleEventTemplate_3}"
+                                                TripleEventTemplate_1="{StaticResource tripleEventTemplate_1}"
+                                                TripleEventTemplate_2="{StaticResource tripleEventTemplate_2}"
+                                                DefaultTemplate="{StaticResource defaultTemplate}"/>
+                                            <Style TargetType="calendar:CalendarItem">
+                                                <Setter Property="CornerRadius" Value="14"/>
+                                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+                                                <Setter Property="ContentTemplate">
+                                                    <Setter.Value>
+                                                        <DataTemplate>
+                                                            <Grid MinWidth="40" MinHeight="40">
+                                                                <ContentControl
+                                                                    HorizontalAlignment="Center"
+                                                                    VerticalAlignment="Center"
+                                                                    Margin="2"
+                                                                    Content="{Binding DisplayText}"/>
+                                                                <ContentControl
+                                                                    Margin="3"
+                                                                    HorizontalAlignment="Center"
+                                                                    VerticalAlignment="Bottom"
+                                                                    Content="{Binding Date}"
+                                                                    ContentTemplateSelector="{StaticResource selector}" />
+                                                            </Grid>
+                                                        </DataTemplate>
+                                                    </Setter.Value>
+                                                </Setter>
+                                            </Style>
+                                        </ResourceDictionary>
+                                    </calendar:SfCalendar.Resources>
+                                </calendar:SfCalendar>
+                            </editor:DropDownFlyout>
+                        </FlyoutBase.AttachedFlyout>
+                    </calendar:SfCalendarDateRangePicker>
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+            <common:DemoLayout
+                HeaderText="Calendar DatePicker ThemeKey Customization."
+                XamlSource="{common:ConditionalXAML Individual=Syncfusion.CalendarDemos.WinUI/Views/CalendarDateRangePicker/Resources/SourceCodes/ThemeKeyCustomization_xaml.txt,
+                                                               Common=Calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/ThemeKeyCustomization_xaml.txt}">
+                <common:DemoLayout.Example>
+                    <calendar:SfCalendarDateRangePicker
+                        x:Name="calendarDateRangePicker2"
+                        MinWidth="180"
+                        SelectedRange="{Binding SelectionRange, Mode=TwoWay}"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center">
+                        <FlyoutBase.AttachedFlyout>
+                            <editor:DropDownFlyout>
+                                <calendar:SfCalendar
+                                    SelectionMode="Range"
+                                    SelectedRange="{Binding SelectionRange, Mode=TwoWay}">
+                                    <calendar:SfCalendar.Resources>
+                                        <ResourceDictionary>
+
+                                            <!--Theme Key customization-->
+                                            <SolidColorBrush x:Key="SyncfusionCalendarNavigationButtonForeground"
+                                                             Color="#FF248D92" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarWeekItemForeground"
+                                                             Color="#FF248D92" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarTodayItemForeground"
+                                                             Color="{ThemeResource SystemBaseHighColor}" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarItemBackground"
+                                                             Color="{ThemeResource SystemListLowColor}" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarItemBorderBrush"
+                                                             Color="{ThemeResource SystemListLowColor}"/>
+                                            <SolidColorBrush x:Key="SyncfusionCalendarTodayItemBackground"
+                                                             Color="#FF9BC5ED" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarTodayItemBorderBrush"
+                                                             Color="#FF9BC5ED" />
+                                            <SolidColorBrush x:Key="SyncfusionCalendarItemOutOfScopeForeground"
+                                                             Color="SlateGray" Opacity="0.5" />
+                                            <Thickness x:Key="SyncfusionCalendarItemMargin">1</Thickness>
+                                            <x:Double x:Key="SyncfusionBodyFontSize">13</x:Double>
+                                            <FontFamily x:Key="SyncfusionControlThemeFontFamily">SimSun</FontFamily>
+                                            <x:Double x:Key="SyncfusionSubtitleAltFontSize">16</x:Double>
+                                            <Thickness x:Key="SyncfusionCalendarBorderThickness">0</Thickness>
+                                            
+                                            <Style TargetType="calendar:CalendarItem">
+                                                <Setter Property="CornerRadius" Value="5"/>
+                                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+                                                <Setter Property="ContentTemplate">
+                                                    <Setter.Value>
+                                                        <DataTemplate>
+                                                            <Grid MinWidth="40" MinHeight="40">
+                                                                <ContentControl
+                                                                    HorizontalAlignment="Center"
+                                                                    VerticalAlignment="Center"
+                                                                    Margin="3"
+                                                                    Content="{Binding DisplayText}"/>
+                                                            </Grid>
+                                                        </DataTemplate>
+                                                    </Setter.Value>
+                                                </Setter>
+                                            </Style>
+                                        </ResourceDictionary>
+                                    </calendar:SfCalendar.Resources>
+                                </calendar:SfCalendar>
+                            </editor:DropDownFlyout>
+                        </FlyoutBase.AttachedFlyout>
+                    </calendar:SfCalendarDateRangePicker>
+                </common:DemoLayout.Example>
+            </common:DemoLayout>
+        </StackPanel>
+    </ScrollViewer>
+
+</Page>

calendar/Views/CalendarDateRangePicker/Customization.xaml.cs

@@ -0,0 +1,48 @@
+#region Copyright Syncfusion Inc. 2001-2022.
+// Copyright Syncfusion Inc. 2001-2022. All rights reserved.
+// Use of this code is subject to the terms of our license.
+// A copy of the current license can be obtained at any time by e-mailing
+// licensing@syncfusion.com. Any infringement will be prosecuted under
+// applicable laws. 
+#endregion
+using System;
+using Microsoft.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace Syncfusion.CalendarDemos.WinUI.Views.CalendarDateRangePicker
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class Customization : Page, IDisposable
+    {
+        public Customization()
+        {
+            this.InitializeComponent();
+            this.customizationViewPanel.PointerPressed += OnCustomizationViewPanelPointerPressed;
+        }
+
+        private void OnCustomizationViewPanelPointerPressed(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            //To restrict the focus on first control when clicking on empty area.
+            e.Handled = true;
+        }
+
+        public void Dispose()
+        {
+            this.customizationViewPanel.PointerPressed -= OnCustomizationViewPanelPointerPressed;
+            if (this.calendarDateRangePicker1 != null)
+            {
+                this.calendarDateRangePicker1.Dispose();
+                this.calendarDateRangePicker1 = null;
+            }
+
+            if (this.calendarDateRangePicker2 != null)
+            {
+                this.calendarDateRangePicker2.Dispose();
+                this.calendarDateRangePicker2 = null;
+            }
+        }
+    }
+}

calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/BlackoutDates_cs.txt

@@ -0,0 +1,13 @@
+public class ViewModel
+{       
+    public DateTimeOffsetCollection BlackoutSpecificDates { get; set; }
+
+    public ViewModel()
+    {
+        BlackoutSpecificDates = new DateTimeOffsetCollection();
+        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 4)));
+        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 11)));
+        BlackoutSpecificDates.Add(new DateTimeOffset(new DateTime(2021, 04, 28)));
+        ...
+    }
+}

calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/BlackoutDates_xaml.txt

@@ -0,0 +1,2 @@
+<calendar:SfCalendarDateRangePicker
+    BlackoutDates="{Binding BlackoutSpecificDates}"/>

calendar/Views/CalendarDateRangePicker/Resources/SourceCodes/CalendarTypes_xaml.txt

@@ -0,0 +1,3 @@
+<calendar:SfCalendarDateRangePicker
+    CalendarIdentifier="$(CalendarIdentifier)"
+    Language="$(Language)"/>