MADE-Apps · jamesmcroft · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022
@@ -5,7 +5,7 @@ title: Using the DropDownList control
 
 # Using the DropDownList control
 
-The `MADE.UI.Controls.DropDownList` element is a custom-built UI element for Windows (UWP) applications that provides a selection user experience, allowing a user to select one or multiple items from a list.
+The `MADE.UI.Controls.DropDownList` element is a custom-built UI element that works with [Uno's supported platforms](https://platform.uno/) that provides a selection user experience, allowing a user to select one or multiple items from a list.
 
 The control works in a similar way to the `ComboBox` element in the Windows SDK, with the added extensibility to change modes to select multiple items.
 

@@ -17,7 +17,7 @@
     <AndroidUseAapt2>true</AndroidUseAapt2>
     <GenerateSerializationAssemblies>Off</GenerateSerializationAssemblies>
     <AndroidUseLatestPlatformSdk>False</AndroidUseLatestPlatformSdk>
-    <TargetFrameworkVersion>v10.0</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v12.0</TargetFrameworkVersion>
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <AndroidUseIntermediateDesignerFile>True</AndroidUseIntermediateDesignerFile>
     <ResourcesDirectory>..\MADE.Samples.Shared\Strings</ResourcesDirectory>
@@ -74,13 +74,22 @@
     <PackageReference Include="Microsoft.Extensions.DependencyInjection">
       <Version>5.0.2</Version>
     </PackageReference>
+    <PackageReference Include="Microsoft.Extensions.Logging">
+      <Version>5.0.0</Version>
+    </PackageReference>
+    <PackageReference Include="Microsoft.Extensions.Logging.Console">
+      <Version>5.0.0</Version>
+    </PackageReference>
     <PackageReference Include="Uno.ColorCode.UWP">
       <Version>2.1.0-uno.32</Version>
     </PackageReference>
     <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives">
       <Version>7.1.11</Version>
     </PackageReference>
     <PackageReference Include="Uno.UI" Version="4.0.13" />
+    <PackageReference Include="Uno.UI.Adapter.Microsoft.Extensions.Logging">
+      <Version>4.0.13</Version>
+    </PackageReference>
     <PackageReference Include="Uno.UI.RemoteControl" Version="4.0.13" Condition="'$(Configuration)'=='Debug'" />
     <PackageReference Include="Uno.UniversalImageLoader" Version="1.9.35" />
   </ItemGroup>
@@ -97,9 +106,6 @@
   <ItemGroup>
     <AndroidResource Include="Resources\values\Strings.xml" />
   </ItemGroup>
-  <ItemGroup>
-    <AndroidResource Include="Resources\drawable\Icon.png" />
-  </ItemGroup>
   <ItemGroup>
     <None Include="Properties\AndroidManifest.xml" />
   </ItemGroup>
@@ -111,6 +117,10 @@
       <Project>{d1a16208-5a34-4cc1-b175-01b5ac99e69e}</Project>
       <Name>MADE.UI.Controls.ChipBox</Name>
     </ProjectReference>
+    <ProjectReference Include="..\..\..\src\MADE.UI.Controls.DropDownList\MADE.UI.Controls.DropDownList.csproj">
+      <Project>{347cdc37-e140-42fa-8710-a0f3297d2b6b}</Project>
+      <Name>MADE.UI.Controls.DropDownList</Name>
+    </ProjectReference>
     <ProjectReference Include="..\..\..\src\MADE.UI.Controls.FilePicker\MADE.UI.Controls.FilePicker.csproj">
       <Project>{774fd8d5-ccc1-4eed-aa14-f7069bfae5ce}</Project>
       <Name>MADE.UI.Controls.FilePicker</Name>
@@ -144,6 +154,41 @@
       <Name>MADE.UI</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\mipmap-hdpi\icon.png">
+      <Generator>MSBuild:UpdateGeneratedFiles</Generator>
+    </AndroidResource>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\mipmap-ldpi\icon.png">
+      <Generator>MSBuild:UpdateGeneratedFiles</Generator>
+    </AndroidResource>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\mipmap-mdpi\icon.png">
+      <Generator>MSBuild:UpdateGeneratedFiles</Generator>
+    </AndroidResource>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\mipmap-tvdpi\icon.png">
+      <Generator>MSBuild:UpdateGeneratedFiles</Generator>
+    </AndroidResource>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\mipmap-xhdpi\icon.png">
+      <Generator>MSBuild:UpdateGeneratedFiles</Generator>
+    </AndroidResource>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\mipmap-xxhdpi\icon.png">
+      <Generator>MSBuild:UpdateGeneratedFiles</Generator>
+    </AndroidResource>
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\mipmap-xxxhdpi\icon.png">
+      <Generator>MSBuild:UpdateGeneratedFiles</Generator>
+    </AndroidResource>
+  </ItemGroup>
   <Import Project="..\MADE.Samples.Shared\MADE.Samples.Shared.projitems" Label="Shared" Condition="Exists('..\MADE.Samples.Shared\MADE.Samples.Shared.projitems')" />
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
   <!-- This will force the generation of the APK when not building inside visual studio -->

@@ -14,30 +14,29 @@
 
 namespace MADE.Samples.Droid
 {
-	[global::Android.App.ApplicationAttribute(
-		Label = "@string/ApplicationName",
-		LargeHeap = true,
-		HardwareAccelerated = true,
-		Theme = "@style/AppTheme"
-	)]
-	public class Application : Windows.UI.Xaml.NativeApplication
-	{
-		public Application(IntPtr javaReference, JniHandleOwnership transfer)
-			: base(() => new App(), javaReference, transfer)
-		{
-			ConfigureUniversalImageLoader();
-		}
+    [global::Android.App.ApplicationAttribute(
+        Label = "@string/ApplicationName",
+        Icon = "@mipmap/icon",
+        LargeHeap = true,
+        HardwareAccelerated = true,
+        Theme = "@style/AppTheme"
+    )]
+    public class Application : Windows.UI.Xaml.NativeApplication
+    {
+        public Application(IntPtr javaReference, JniHandleOwnership transfer)
+            : base(() => new App(), javaReference, transfer)
+        {
+            ConfigureUniversalImageLoader();
+        }
 
-		private void ConfigureUniversalImageLoader()
-		{
-			// Create global configuration and initialize ImageLoader with this config
-			ImageLoaderConfiguration config = new ImageLoaderConfiguration
-				.Builder(Context)
-				.Build();
+        private void ConfigureUniversalImageLoader()
+        {
+            // Create global configuration and initialize ImageLoader with this config
+            ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(Context).Build();
 
-			ImageLoader.Instance.Init(config);
+            ImageLoader.Instance.Init(config);
 
-			ImageSource.DefaultImageLoader = ImageLoader.Instance.LoadImageAsync;
-		}
-	}
-}
+            ImageSource.DefaultImageLoader = ImageLoader.Instance.LoadImageAsync;
+        }
+    }
+}
@@ -1,4 +1,4 @@
-using Android.App;
+using Android.App;
 using Android.Widget;
 using Android.OS;
 using Android.Content.PM;

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="MADE.Samples" android:versionCode="1" android:versionName="1.0">
-  <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="29" />
-  <application android:label="MADE.Samples"></application>
-</manifest>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="MADE.Samples" android:versionCode="1" android:versionName="1.0" android:installLocation="auto">
+	<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="31" />
+	<application android:label="MADE.Samples"></application>
+</manifest>
@@ -36,6 +36,10 @@ private static ICollection<SampleGroup> GetSampleGroups()
                         "ChipBox",
                         typeof(ChipBoxPage),
                         "/Features/Samples/Assets/ChipBox/ChipBox.png"),
+                    new Sample(
+                        "DropDownList",
+                        typeof(DropDownListPage),
+                        "/Features/Samples/Assets/DropDownList/DropDownList.png"),
                     new Sample(
                         "FilePicker",
                         typeof(FilePickerPage),

@@ -0,0 +1,19 @@
+public ICommand SelectedItemsUpdateCommand => new RelayCommand<IEnumerable<object>>(selectedItems => this.OnSelectedItemsUpdated(selectedItems.Cast<string>()));
+
+public ObservableCollection<string> Items { get; } = new()
+{
+    "Red",
+    "Green",
+    "Blue",
+    "Cyan",
+    "Magenta",
+    "Yellow",
+    "White"
+};
+
+public ObservableCollection<string> SelectedItems { get; } = new();
+
+private void OnSelectedItemsUpdated(IEnumerable<string> obj)
+{
+    this.SelectedItems.MakeEqualTo(obj);
+}
@@ -0,0 +1,20 @@
+<Page
+    x:Class="MADE.Samples.Features.Samples.Pages.DropDownListPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:made="using:MADE.UI.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
+
+    <Grid>
+        <made:DropDownList
+            x:Name="DropDownListControl"
+            Header="DropDownList"
+            ItemsSource="{x:Bind ViewModel.Items}"
+            SelectionMode="Multiple"
+            SelectedItemsUpdateCommand="{x:Bind ViewModel.SelectedItemsUpdateCommand}"/>
+    </Grid>
+</Page>
@@ -42,7 +42,7 @@
 
             <TextBlock
                 Grid.Row="1"
-                Margin="0,0,0,48"
+                Margin="0,0,0,24"
                 Style="{StaticResource BaseTextBlockStyle}"
                 Text="The AppDialog is a UI helper that provides a mechanism to simplify the showing of application modal dialogs." />
 

@@ -43,7 +43,7 @@
 
             <TextBlock
                 Grid.Row="1"
-                Margin="0,0,0,48"
+                Margin="0,0,0,24"
                 Style="{StaticResource BaseTextBlockStyle}"
                 Text="The ChipBox is a custom-built UI element that provides multi value input for a text box with auto-suggest capabilities. Values added are displayed as removable chips." />
 
@@ -66,8 +66,6 @@
                                 Suggestions="{x:Bind ViewModel.ChipSuggestions}"
                                 Chips="{x:Bind ViewModel.SelectedChips}"
                                 TextChangeCommand="{x:Bind ViewModel.SuggestionTextChangeCommand}"/>
-
-                                <Button Grid.Row="1" Command="{x:Bind ViewModel.AddChipCommand}">Add New Chip</Button>
                             </Grid>
                         </samples:SampleControl.Sample>
                     </samples:SampleControl>

@@ -0,0 +1,76 @@
+<pages:MvvmPage
+    x:Class="MADE.Samples.Features.Samples.Pages.DropDownListPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:made="using:MADE.UI.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:pages="using:MADE.UI.Views.Navigation.Pages"
+    xmlns:samples="using:MADE.Samples.Infrastructure.Controls"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <win:CommandBar>
+            <win:CommandBar.Content>
+                <Button
+                    x:Name="BackButton"
+                    VerticalAlignment="Top"
+                    Command="{x:Bind ViewModel.GoBackCommand}"
+                    IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"
+                    Style="{StaticResource NavigationBackButtonNormalStyle}"
+                    ToolTipService.ToolTip="Back" />
+            </win:CommandBar.Content>
+        </win:CommandBar>
+
+        <Grid Grid.Row="1" Padding="16">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+
+            <TextBlock
+                Margin="0,0,0,16"
+                Style="{StaticResource TitleTextBlockStyle}"
+                Text="DropDownList control" />
+
+            <TextBlock
+                Grid.Row="1"
+                Margin="0,0,0,24"
+                Style="{StaticResource BaseTextBlockStyle}"
+                Text="The DropDownList is a custom-built UI element that provides a selection control using a drop-down combo box that allows users to select one or multiple items from a list." />
+
+            <ScrollViewer Grid.Row="2">
+                <Grid>
+                    <samples:SampleControl
+                        CodeSource="DropDownList/DropDownListCode.txt"
+                        SampleName="A drop-down combo box input control with multi-select support"
+                        XamlSource="DropDownList/DropDownListXaml.txt">
+                        <samples:SampleControl.Sample>
+                            <Grid>
+                                <Grid.RowDefinitions>
+                                    <RowDefinition />
+                                    <RowDefinition Height="Auto"/>
+                                </Grid.RowDefinitions>
+
+                                <made:DropDownList
+                                    x:Name="DropDownListControl"
+                                    Header="DropDownList"
+                                    ItemsSource="{x:Bind ViewModel.Items}"
+                                    SelectionMode="Multiple"
+                                    SelectedItemsUpdateCommand="{x:Bind ViewModel.SelectedItemsUpdateCommand}"/>
+                            </Grid>
+                        </samples:SampleControl.Sample>
+                    </samples:SampleControl>
+                </Grid>
+            </ScrollViewer>
+        </Grid>
+    </Grid>
+</pages:MvvmPage>
@@ -0,0 +1,21 @@
+namespace MADE.Samples.Features.Samples.Pages
+{
+    using CommunityToolkit.Mvvm.Messaging;
+    using MADE.Samples.Features.Samples.ViewModels;
+    using MADE.UI.Views.Navigation;
+    using MADE.UI.Views.Navigation.Pages;
+    using Microsoft.Extensions.DependencyInjection;
+
+    public sealed partial class DropDownListPage : MvvmPage
+    {
+        public DropDownListPage()
+        {
+            this.InitializeComponent();
+            this.DataContext = new DropDownListPageViewModel(
+                App.Services.GetService<INavigationService>(),
+                App.Services.GetService<IMessenger>());
+        }
+
+        public DropDownListPageViewModel ViewModel => this.DataContext as DropDownListPageViewModel;
+    }
+}
@@ -43,7 +43,7 @@
 
             <TextBlock
                 Grid.Row="1"
-                Margin="0,0,0,48"
+                Margin="0,0,0,24"
                 Style="{StaticResource BaseTextBlockStyle}"
                 Text="The FilePicker is a custom-built UI element that provides a file selection user experience. The control works in a similar way to the file input element in web applications." />
 

@@ -43,7 +43,7 @@
 
             <TextBlock
                 Grid.Row="1"
-                Margin="0,0,0,48"
+                Margin="0,0,0,24"
                 Style="{StaticResource BaseTextBlockStyle}"
                 Text="The InputValidator is a custom-built UI element wrapper for input controls that provides an input validation experience using MADE's in-built or custom built validators." />
 

@@ -43,7 +43,7 @@
 
             <TextBlock
                 Grid.Row="1"
-                Margin="0,0,0,48"
+                Margin="0,0,0,24"
                 Style="{StaticResource BaseTextBlockStyle}"
                 Text="The WindowManager is UI helper that provides a mechanism to launch additional windows for an application through a similar implementation to navigating from page to page with the Frame. The WindowManager takes advantage of the ViewServiceManager approach by registering necessary view specific dependencies within a container that can be referenced anywhere in an application. This allows multiple application windows to be able to communicate with each other seamlessly." />