Merge pull request #50 from syncfusion/SampleBrowserUnitTest

Sample Browser And Unit Test cases added for Calendar, Numeric Entry, Numeric Up Down, Button, Bottom Sheet new controls

README.md

@@ -1,10 +1,10 @@
 ![NET_MAUI__Toolkit_Banner](https://cdn.syncfusion.com/content/images/maui/maui-toolkit--controls-banner.png)
 
-# Syncfusion Toolkit for .NET MAUI
+# Syncfusion® Toolkit for .NET MAUI
 
-The Syncfusion Toolkit for .NET MAUI is a high-performance collection of UI controls designed to streamline cross-platform app development across Android, iOS, macOS, and Windows. With this toolkit, developers can deliver beautiful, feature-rich applications with minimal effort, cutting down development time while ensuring a seamless and engaging user experience across platforms.
+The Syncfusion® Toolkit for .NET MAUI is a high-performance collection of UI controls designed to streamline cross-platform app development across Android, iOS, macOS, and Windows. With this toolkit, developers can deliver beautiful, feature-rich applications with minimal effort, cutting down development time while ensuring a seamless and engaging user experience across platforms.
 
-The Syncfusion Toolkit is built with community collaboration in mind, aiming to incorporate user feedback and contributions. It is the perfect companion for developers looking to build engaging cross-platform applications faster and more efficiently using the Syncfusion ecosystem.
+The Syncfusion® Toolkit is built with community collaboration in mind, aiming to incorporate user feedback and contributions. It is the perfect companion for developers looking to build engaging cross-platform applications faster and more efficiently using the Syncfusion® ecosystem.
 
 [![NuGet version](https://img.shields.io/nuget/v/Syncfusion.Maui.Toolkit)](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit)
 [![NuGet Downloads](https://img.shields.io/nuget/dt/Syncfusion.Maui.Toolkit)](https://www.nuget.org/stats/packages/Syncfusion.Maui.Toolkit?groupby=Version)
@@ -35,12 +35,17 @@ The Syncfusion Toolkit is built with community collaboration in mind, aiming to
 |                      | Pyramid Charts        | Visualize hierarchical data, perfect for business and analytics applications.                            |
 |                      | Funnel Charts         | Represent processes and data flow, often used in sales and analytics.                                    |
 |                      | Polar Charts          | Showcase categories in a circular format, ideal for unordered data.                                      |
+| Calendars            | Calendar              | The calendar supports month, year, decade, and century views, multiple selection modes, and customizable appearance.      |
+| Editors              | Numeric Entry         | Advanced control for numeric input with support for various formats and validation.                      |
+|                      | Numeric Up Down       | Adjust values with up/down buttons and culture-specific formatting.                                      |
 | Navigation           | Navigation Drawer     | Slide-in menu for navigation, positionable on any side of the app with customizable animations.          |
 |                      | Tab View              | Organize app content with customizable tabs, enabling easy navigation across sections.                   |
+|                      | Bottom Sheet          | Slides up from the bottom of the screen to display additional content or functionality.                  |
 | Layout               | Carousel              | Smooth, touch-enabled sliding galleries for showcasing images or featured content.                       |
 |                      | Text Input Layout     | Enhances input fields with floating labels and validation, improving user interaction.                   |
 | Buttons              | Chips                 | Interactive tags for filtering, labeling, or visual options, perfect for e-commerce or task management.  |
 |                      | Segmented Control     | Quickly switch between views or categories, ideal for apps with multiple layout options.                 |
+|                      | Button                | Customizable button control with icon support, background images, and visual state styling.              |
 | Notification         | Pull to Refresh       | Allows users to refresh live data by pulling down, ideal for real-time data syncing.                     |
 | Miscellaneous        | Effects View          | Add visual enhancements like shadows, blurs, or highlights to make UI elements stand out.                |
 |                      | Shimmer               | Indicates loading content with customizable wave directions, great for data-heavy apps.                  |
@@ -59,9 +64,9 @@ Alternatively, add it directly in your `.csproj` file:
 <PackageReference Include="Syncfusion.Maui.Toolkit" Version="x.x.x" />
 ```
 
-## Configure Syncfusion Toolkit
+## Configure Syncfusion® Toolkit
 
-In order to use the Syncfusion .NET MAUI Toolkit you need to call the extension method in your MauiProgram.cs file as follows:
+In order to use the Syncfusion® .NET MAUI Toolkit you need to call the extension method in your MauiProgram.cs file as follows:
 
 **MauiProgram.cs**
 
@@ -103,7 +108,7 @@ xmlns:toolkit="http://schemas.syncfusion.com/maui/toolkit"
 
 Here’s a quick example to get you started with one of the controls, such as the Cartesian Chart:
 
-The following XAML code demonstrates how to set up a basic `SfCartesianChart` using the Syncfusion MAUI Toolkit. This code snippet should be included in the `MainPage.xaml` file of your MAUI project. It sets up the necessary namespaces, binds the `ViewModel` to the `ContentPage`, and configures the `SfCartesianChart` with `CategoryAxis` for the X-axis and `NumericalAxis` for the Y-axis. The creation of the `ViewModel` will be explained in the following section.
+The following XAML code demonstrates how to set up a basic `SfCartesianChart` using the Syncfusion® MAUI Toolkit. This code snippet should be included in the `MainPage.xaml` file of your MAUI project. It sets up the necessary namespaces, binds the `ViewModel` to the `ContentPage`, and configures the `SfCartesianChart` with `CategoryAxis` for the X-axis and `NumericalAxis` for the Y-axis. The creation of the `ViewModel` will be explained in the following section.
 
 **MainPage.xaml**
 
@@ -237,8 +242,8 @@ See the [Development Guide](./.github/DEVELOPMENT.md) for more details about thi
 
 You can see the full list of contributors [here](https://github.com/syncfusion/maui-toolkit/graphs/contributors)
 
-## About Syncfusion
-Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
+## About Syncfusion®
+Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion® has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
 
 Today, we provide 1800+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [Angular](https://www.syncfusion.com/angular-ui-components?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [React](https://www.syncfusion.com/react-ui-components?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [Vue](https://www.syncfusion.com/vue-ui-components?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget)), mobile ([.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), and [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget) and [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=nuget&utm_medium=listing&utm_campaign=maui-toolkit-nuget)).
 ___

maui/samples/Gallery/ControlList.xml

@@ -15,5 +15,9 @@
 		<Assembly Name="PullToRefresh" />
 		<Assembly Name="NavigationDrawer" />
 		<Assembly Name="Carousel" />
+    <Assembly Name="BottomSheet" />
+    <Assembly Name="NumericEntry" />
+    <Assembly Name="NumericUpDown" />
+	<Assembly Name="Calendar" />
 	</Assemblies>
 </SampleBrowser>

maui/samples/Gallery/SampleList/BottomSheetSamplesList.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<SyncfusionControls>
+		<ControlCategory Name="Navigation">
+		<Control ControlName="BottomSheet"
+				 Title="Bottom Sheet"
+				 Image="bottomsheet.png"
+				 Description="The BottomSheet is a panel that slides up from the bottom of the screen to display content.">
+			<Sample SampleName="GettingStarted"
+					Title="Getting Started"
+					SearchTags="bottomsheet,bottomslide,nav,menubar,slidingpanel,overlay,drawer,actionsheet,slideup,expandable,maiu,bottommenu,dropdown"/>
+		</Control>
+		</ControlCategory>
+
+</SyncfusionControls>

maui/samples/Gallery/SampleList/ButtonsSamplesList.xml

@@ -10,5 +10,18 @@
 			<Sample Title="Getting Started"
               SampleName="GettingStarted"/>
 		</Control>
+    <Control ControlName="Button"
+				 Title="Button"
+				 Image="button.png"
+				 Description="A button is a UI element for user interaction, representing a one-click or tap action." >
+      <Sample SampleName="GettingStarted"
+					Title="Getting Started"
+					SearchTags="PrimaryButton, SfButton, Buttons, FlatButton, IconButton, OutlineButton, CircleButton"/>
+      <Sample SampleName="Customizations"
+					Title="Customizations"
+					SearchTags="Button, SfButton, Buttons"/>
+
+
+    </Control>
 	</ControlCategory>
 </SyncfusionControls>

maui/samples/Gallery/SampleList/CalendarSamplesList.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<SyncfusionControls>
+  <ControlCategory Name="Calendar">
+    <Control Title="Calendar"
+             Image="calendar.png"
+             ControlName="Calendar"
+             Description="It is a lightweight control used to select a single, multiple, and a range of dates.">
+      <Sample Title="Getting Started" SampleName="GettingStarted" SearchTags="calendar"/>
+      <Category Title="Views">
+        <CardLayout>
+          <Sample SampleName="Month" ShowExpandIcon="False" Title="Month"/>
+          <Sample SampleName="Year" ShowExpandIcon="False" Title="Year"/>
+          <Sample SampleName="Decade" ShowExpandIcon="False" Title="Decade"/>
+          <Sample SampleName="Century" ShowExpandIcon="False" Title="Century"/>
+        </CardLayout>
+      </Category>
+      <Sample Title="Selection" SampleName="DateSelection"/>
+      <Sample Title="Calendar Identifier" SampleName="CalendarIdentifier"/>
+      <Sample Title="Appointment Booking" SampleName="AppointmentBooking"/>
+      <Sample Title="Color Scheme" SampleName="HighlightDates" />
+      <Sample Title="Customization" SampleName="AppearanceCustomization" />
+    </Control>
+  </ControlCategory>
+</SyncfusionControls>

maui/samples/Gallery/SampleList/NumericEntrySamplesList.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<SyncfusionControls>
+		<ControlCategory Name="Editors">
+      <Control Title="Numeric Entry" ControlName="SfNumericEntry" Image="numericentry.png" Description="Allows users to restrict input to numeric values using specified format.">
+        <Sample Title="Getting Started" SampleName="NumericEntryGettingStarted" SearchTags="numeric,entry,textbox"/>
+        <Sample Title="Culture and Formatting" SampleName="NumericEntryCultureAndFormatting" SearchTags="numeric,entry,textbox,formatting, culture"/>
+      </Control>
+		</ControlCategory>
+
+</SyncfusionControls>

maui/samples/Gallery/SampleList/NumericUpDownSamplesList.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<SyncfusionControls>
+		<ControlCategory Name="Editors">
+      <Control Title="Numeric UpDown" ControlName="SfNumericUpDown"  Image="numericupdown.png" Description="Allows users to restrict input to numeric values with value-changing buttons.">
+        <Sample Title="Getting Started"  SampleName="NumericUpDownGettingStarted" SearchTags="numeric,entry,textbox,updownbutton, numericupdown" />
+      </Control>
+		</ControlCategory>
+
+</SyncfusionControls>

maui/samples/Gallery/Samples/BottomSheet/GettingStarted/Helper/BottomSheetBehavior.cs

@@ -0,0 +1,154 @@
+using Syncfusion.Maui.ControlsGallery.CustomView;
+using Syncfusion.Maui.Toolkit.BottomSheet;
+
+namespace Syncfusion.Maui.ControlsGallery.BottomSheet.BottomSheet
+{
+    public class BottomSheetBehavior : Behavior<SampleView>
+    {
+		ListView? _listView;
+		ItemViewModel? _itemViewModel;
+		SfBottomSheet? _bottomSheet;
+		SfEffectsViewAdv? _decreaseQuantity;
+		SfEffectsViewAdv? _increaseQuantity;
+		SfEffectsViewAdv? _closeIcon;
+		CheckBox? _extraOne;
+		CheckBox? _extraTwo;
+		Grid? grid;
+
+		/// <summary>
+		/// You can override this method to subscribe to AssociatedObject events and initialize properties.
+		/// </summary>
+		/// <param name="bindable">SampleView type parameter named as bindable.</param>
+		protected override void OnAttachedTo(SampleView bindable)
+		{
+			_listView = bindable.FindByName<ListView>("ListView");
+			_listView.ItemTapped += ListView_ItemTapped;
+			_itemViewModel = new ItemViewModel();
+			bindable.BindingContext = _itemViewModel;
+			_bottomSheet = bindable.FindByName<SfBottomSheet>("BottomSheet");
+			_bottomSheet.StateChanged += OnStateChanged;
+			_decreaseQuantity = bindable.FindByName<SfEffectsViewAdv>("DecreaseQuantity");
+			_increaseQuantity = bindable.FindByName<SfEffectsViewAdv>("IncreaseQuantity");
+			_closeIcon = bindable.FindByName<SfEffectsViewAdv>("CloseIcon");
+			_extraOne = bindable.FindByName<CheckBox>("ExtraCheese");
+			_extraTwo = bindable.FindByName<CheckBox>("ExtraDoubleCheese");
+			grid = bindable.FindByName<Grid>("Grid");
+
+			TapGestureRecognizer decreaseTapped = new TapGestureRecognizer();
+			decreaseTapped.Tapped += OnDecreaseTapped;
+			_decreaseQuantity.GestureRecognizers.Add(decreaseTapped);
+
+			TapGestureRecognizer increaseTapped = new TapGestureRecognizer();
+			increaseTapped.Tapped += OnIncreaseTapped;
+			_increaseQuantity.GestureRecognizers.Add(increaseTapped);
+
+			TapGestureRecognizer closeIconTapped = new TapGestureRecognizer();
+			closeIconTapped.Tapped += OnCloseIconTapped;
+			_closeIcon.GestureRecognizers.Add(closeIconTapped);
+
+			_extraOne.CheckedChanged += ExtraOne_CheckedChanged;
+			_extraTwo.CheckedChanged += ExtraTwo_CheckedChanged;
+
+			base.OnAttachedTo(bindable);
+		}
+
+		private void ExtraTwo_CheckedChanged(object? sender, CheckedChangedEventArgs e)
+		{
+			if (_extraTwo is not null && _bottomSheet is not null && grid is not null)
+			{
+				if (_extraTwo.IsChecked && _extraOne is not null)
+				{
+					_extraOne.IsChecked = false;
+					var item = (Item)grid.BindingContext;
+					item.TotalPrice = (item.Price + 4) * item.Quantity;
+				}
+				else
+				{
+					var item = (Item)grid.BindingContext;
+					item.TotalPrice = item.Price * item.Quantity;
+				}
+			}
+		}
+
+		private void ExtraOne_CheckedChanged(object? sender, CheckedChangedEventArgs e)
+		{
+			if (_extraOne is not null && _bottomSheet is not null && grid is not null)
+			{
+				if (_extraOne.IsChecked && _extraTwo is not null)
+				{
+					_extraTwo.IsChecked = false;
+					var item = (Item)grid.BindingContext;
+					item.TotalPrice = (item.Price + 2) * item.Quantity;
+				}
+				else
+				{
+					var item = (Item)grid.BindingContext;
+					item.TotalPrice = item.Price * item.Quantity;
+				}
+			}
+		}
+
+		private void OnStateChanged(object? sender, StateChangedEventArgs e)
+		{
+			if (_bottomSheet is not null && _bottomSheet.State is BottomSheetState.Hidden && grid is not null)
+			{
+				grid.BindingContext = null;
+			}
+		}
+
+		private void ListView_ItemTapped(object? sender, ItemTappedEventArgs e)
+		{
+			var selectedItem = (Item)e.Item;
+			if (_bottomSheet is not null && grid is not null)
+			{
+				grid.BindingContext = selectedItem;
+				if (_bottomSheet.IsOpen)
+				{
+					_bottomSheet.State = BottomSheetState.HalfExpanded;
+				}
+
+				_bottomSheet.Show();
+			}
+		}
+
+		private void OnDecreaseTapped(object? sender, TappedEventArgs e)
+		{
+			if (_bottomSheet is not null && grid is not null)
+			{
+				var temp = (Item)grid.BindingContext;
+				if (temp.Quantity > 1)
+				{
+					temp.Quantity--;
+				}
+			}
+		}
+
+		private void OnIncreaseTapped(object? sender, TappedEventArgs e)
+		{
+			if (_bottomSheet is not null && grid is not null)
+			{
+				var temp = (Item)grid.BindingContext;
+				temp.Quantity++;
+			}
+		}
+
+		private void OnCloseIconTapped(object? sender, TappedEventArgs e)
+		{
+			if (_bottomSheet is not null)
+			{
+				_bottomSheet.Close();
+			}
+		}
+
+		/// <summary>
+		/// You can override this method while View was detached from window
+		/// </summary>
+		/// <param name="bindable">SampleView type parameter named as bindable</param>
+		protected override void OnDetachingFrom(SampleView bindable)
+		{
+			_listView = null;
+			_itemViewModel = null;
+			base.OnDetachingFrom(bindable);
+		}
+	}
+}

maui/samples/Gallery/Samples/BottomSheet/GettingStarted/Model/Item.cs

@@ -0,0 +1,63 @@
+using System.ComponentModel;
+
+namespace Syncfusion.Maui.ControlsGallery.BottomSheet.BottomSheet
+{
+    public class Item : INotifyPropertyChanged
+    {
+		int _quantity = 1;
+		double _price;
+		double _totalPrice;
+
+		public string FoodName { get; set; } = string.Empty;
+
+		public string SubName { get; set; } = string.Empty;
+
+		public string Description {  get; set; } = string.Empty;
+
+        public string ImageName { get; set; } = string.Empty;
+
+		public double Price
+		{
+			get => _price;
+			set
+			{
+				_price = value;
+				OnPropertyChanged(nameof(Price));
+				UpdateTotalPrice();
+			}
+		}
+
+		public int Quantity
+		{
+			get => _quantity;
+			set
+			{
+				_quantity = value;
+				OnPropertyChanged(nameof(Quantity));
+				UpdateTotalPrice();
+			}
+		}
+
+		public double TotalPrice
+		{
+			get => _totalPrice;
+			set
+			{
+				_totalPrice = value;
+				OnPropertyChanged(nameof(TotalPrice));
+			}
+		}
+
+		private void UpdateTotalPrice()
+		{
+			TotalPrice = Price * Quantity;
+		}
+
+		public event PropertyChangedEventHandler? PropertyChanged;
+
+		protected void OnPropertyChanged(string propertyName)
+		{
+			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+		}
+	}
+}

maui/samples/Gallery/Samples/BottomSheet/GettingStarted/View/GettingStarted.xaml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<localcore:SampleView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="Syncfusion.Maui.ControlsGallery.BottomSheet.BottomSheet.GettingStarted"
+               xmlns:localcore="clr-namespace:Syncfusion.Maui.ControlsGallery;assembly=Syncfusion.Maui.ControlsGallery"
+           >
+    <localcore:SampleView.Content>
+
+        <Grid HeightRequest="400" WidthRequest="400" BackgroundColor="Red"/>
+    </localcore:SampleView.Content>
+</localcore:SampleView>