Add DropDown

DemoApp/DemoApp/DemoApp.csproj

@@ -47,7 +47,7 @@
 		<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#0063a3" />
 
 		<!-- Splash Screen -->
-		<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#0063a3"  BaseSize="128,128"/>
+		<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#0063a3" BaseSize="128,128" />
 
 		<!-- Images -->
 		<MauiImage Include="Resources\Images\*" />
@@ -155,6 +155,9 @@
 	</ItemGroup>
 
 	<ItemGroup>
+	  <MauiXaml Update="Views\DropDownSamplePage.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	  <MauiXaml Update="Views\ProgressBarSamplePage.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>

DemoApp/DemoApp/MainPage.xaml.cs

@@ -18,6 +18,7 @@ public MainPage()
                 "CheckBox",
                 "Chips",
                 "DataGrid",
+                "DropDown",
                 "Input",
                 "MultiLineInput",
                 "NumberInput",
@@ -101,6 +102,9 @@ private void ItemTapped(object sender, ItemTappedEventArgs e)
                     case "Switch":
                         Navigation.PushAsync(new SwitchSamplePage());
                         break;
+                    case "DropDown":
+                        Navigation.PushAsync(new DropDownSamplePage());
+                        break;
                     default:
                         Console.WriteLine("Default Case");
                         break;

DemoApp/DemoApp/ViewModels/DropDownSampleViewModel.cs

@@ -0,0 +1,25 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace DemoApp.ViewModels
+{
+    public partial class DropDownSampleViewModel : ObservableObject
+    {
+        [ObservableProperty]
+        private int selectedIndex;
+        [ObservableProperty]
+        private List<string> dropdownSource;
+        [ObservableProperty]
+        public List<string> colorSource;
+        public DropDownSampleViewModel()
+        {
+            DropdownSource = new List<string>() { "Excavator", "Bulldozer", "Loader", "Grader", "Trencher", "Backhoe", "Compactors", "Crane" };
+            ColorSource = new List<string>() { "Red", "Yellow", "Black" };
+            SelectedIndex = 6; ;
+        }
+    }
+}

DemoApp/DemoApp/Views/DropDownSamplePage.xaml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:modus="http://modus.trimble.com/components"
+             x:Class="DemoApp.Views.DropDownSamplePage"
+             Title="DropDownSamplePage">
+  <StackLayout HorizontalOptions="Start" Padding="10" Spacing="13">
+
+    <Label Text="Equipment Type:"/>
+    <modus:TMDropDown ItemsSource="{Binding DropdownSource}" SelectedIndex="{Binding SelectedIndex}" ></modus:TMDropDown>
+    <Label Text="Color"/>
+    <modus:TMDropDown ItemsSource="{Binding ColorSource}" ></modus:TMDropDown>
+
+  </StackLayout>
+</ContentPage>

DemoApp/DemoApp/Views/DropDownSamplePage.xaml.cs

@@ -0,0 +1,11 @@
+using DemoApp.ViewModels;
+namespace DemoApp.Views;
+
+public partial class DropDownSamplePage : ContentPage
+{
+    public DropDownSamplePage()
+    {
+        InitializeComponent();
+        BindingContext = new DropDownSampleViewModel();
+    }
+}

Trimble.Modus.Components/Constant/ColorsConstants.cs

@@ -43,4 +43,6 @@ internal class ColorsConstants
     public const string AccordionDescriptionColor = "AccordionDescriptionColor";
     public const string SwitchSelected = "SwitchSelected";
     public const string SwitchUnselected = "SwitchUnselected";
-}
+    public const string DropDownListBorder = "DropDownListBorder"; 
+    public const string DropDownItemSelected = "DropDownItemSelected";
+}

Trimble.Modus.Components/Constant/ImageConstants.cs

@@ -26,6 +26,7 @@ internal static class ImageConstants
         public const string CaretDownImage = "caret_down_bold.png";
         public const string Check = "check.png";
         public const string CancelCircle = "cancel_circle.png";
-        public const string ChevronDownIcon = "chevron_down_icon.png";
+        public const string ChevronDownIcon = "chevron_down_icon.png";
+        public const string ChevronDownIconWhite = "chevron_down_icon_white.png";
     }
 }

Trimble.Modus.Components/Controls/DropDown/DropDownViewCell.cs

@@ -0,0 +1,40 @@
+namespace Trimble.Modus.Components;
+
+public class DropDownViewCell : ViewCell
+{
+    internal Label label;
+    public static readonly BindableProperty TextProperty =
+        BindableProperty.Create(nameof(Text), typeof(string), typeof(DropDownViewCell), "");
+
+    public string Text
+    {
+        get { return (string)GetValue(TextProperty); }
+        set { SetValue(TextProperty, value); }
+    }
+
+    public DropDownViewCell()
+    {
+        label = new Label
+        {
+            TextColor = Colors.Black,
+            FontAttributes = FontAttributes.None,
+            BackgroundColor = Colors.Transparent,
+            VerticalOptions = LayoutOptions.Center,
+            HorizontalOptions = LayoutOptions.Start,
+            Padding = new Thickness(8, 12)
+        };
+
+        label.SetBinding(Label.TextProperty, new Binding("Text", source: this));
+
+        View = new StackLayout
+        {
+            Children = { label },
+            BackgroundColor = Colors.Transparent,
+        };
+    }
+    internal void UpdateBackgroundColor(Color backgroundColor, bool textAttribute)
+    {
+        View.BackgroundColor = backgroundColor;
+        label.FontAttributes = textAttribute ? FontAttributes.Bold : FontAttributes.None;
+    }
+}