Add MaterialDoublePicker control

Author: AgustinBonilla

MaterialDesignControls.nuspec

@@ -2,7 +2,7 @@
 <package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
    <metadata minClientVersion="2.8.1">
        <id>Plugin.MaterialDesignControls</id>
-       <version>1.5.2</version>
+       <version>1.6.0</version>
        <title>MaterialDesignControls Plugin for Xamarin Forms</title>
        <authors>Horus</authors>
        <owners>AgustinBonillaHorus</owners>

README.md

@@ -111,6 +111,22 @@ Pickers let users select an option.
                          IsRequired="true" RequiredMessage="The color is required" />
 ```
 
+### MaterialDoublePicker
+Double pickers let users select two options in the same dialog.
+
+**Screenshot**
+
+<img src="https://github.com/HorusSoftwareUY/MaterialDesignControlsPlugin/blob/master/screenshots/doublePickerAndroid.jpg" width="300">
+
+<img src="https://github.com/HorusSoftwareUY/MaterialDesignControlsPlugin/blob/master/screenshots/doublePickeriOS.jpg" width="300">
+
+**Example**
+```XML
+<material:MaterialDoublePicker Type="Filled" LabelText="Double Picker" Separator=" - "
+                               ItemsSource="{Binding ItemsSource}" SecondaryItemsSource="{Binding SecondaryItemsSource}"
+                               SelectedItem="{Binding SelectedItem}" SecondarySelectedItem="{Binding SecondarySelectedItem}" />
+```
+
 ### MaterialEditor
 Text fields let users enter and edit text.
 

example/ExampleMaterialDesignControls/App.xaml

@@ -154,6 +154,21 @@
             <Setter Property="AssistiveSize" Value="{StaticResource Body3FontSize}" />
             <Setter Property="TrailingIcon" Value="arrow_drop_down.png" />
         </Style>
+
+        <!-- MaterialPicker -->
+        <Style TargetType="material:MaterialDoublePicker">
+            <Setter Property="LabelSize" Value="{StaticResource Body4FontSize}" />
+            <Setter Property="LabelTextColor" Value="{StaticResource LabelTextColor}" />
+            <Setter Property="FocusedLabelTextColor" Value="{StaticResource FocusedLabelTextColor}" />
+            <Setter Property="TextColor" Value="{StaticResource TextColor}" />
+            <Setter Property="FontSize" Value="{StaticResource Body2FontSize}" />
+            <Setter Property="BackgroundColor" Value="{StaticResource BackgroundColor}" />
+            <Setter Property="BorderColor" Value="{StaticResource BorderColor}" />
+            <Setter Property="FocusedBorderColor" Value="{StaticResource FocusedBorderColor}" />
+            <Setter Property="AssistiveTextColor" Value="{StaticResource AssistiveTextColor}" />
+            <Setter Property="AssistiveSize" Value="{StaticResource Body3FontSize}" />
+            <Setter Property="TrailingIcon" Value="arrow_drop_down.png" />
+        </Style>
 
         <!-- MaterialSelection -->
         <Style TargetType="material:MaterialSelection">

example/ExampleMaterialDesignControls/Pages/MaterialPickerPage.xaml

@@ -26,6 +26,16 @@
                         </OnPlatform>
                     </material:MaterialPicker.FontFamily>
                 </material:MaterialPicker>
+
+                <material:MaterialDoublePicker x:Name="pckDouble" Type="Filled" LabelText="Double Picker"
+                                               ItemsSource="{Binding ItemsSource}" SecondaryItemsSource="{Binding SecondaryItemsSource}"
+                                               SelectedItem="{Binding SelectedItem}" SecondarySelectedItem="{Binding SecondarySelectedItem}" />
+                <Label x:Name="lblSelectedIndexes" Text="SelectedIndexes: -" />
+                <material:MaterialButton Text="Save" Icon="save.png" Command="{Binding Tap2Command}" />
+
+                <material:MaterialDoublePicker Type="Filled" LabelText="Double Picker" Separator=" - "
+                                               ItemsSource="{Binding ItemsSource}" SecondaryItemsSource="{Binding SecondaryItemsSource}"
+                                               SelectedItem="{Binding SelectedItem}" SecondarySelectedItem="{Binding SecondarySelectedItem}" />
             </StackLayout>
         </ScrollView>
     </ContentPage.Content>

example/ExampleMaterialDesignControls/Pages/MaterialPickerPage.xaml.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Windows.Input;
+using Plugin.MaterialDesignControls;
 using Xamarin.Forms;
 
 namespace ExampleMaterialDesignControls.Pages
@@ -9,6 +10,14 @@ public partial class MaterialPickerPage : ContentPage
     {
         public string SelectedSizes { get; set; }
 
+        public string SelectedItem { get; set; }
+
+        public string SecondarySelectedItem { get; set; }
+
+        public List<string> ItemsSource { get; set; }
+
+        public List<string> SecondaryItemsSource { get; set; }
+
         public MaterialPickerPage()
         {
             InitializeComponent();
@@ -23,11 +32,24 @@ public MaterialPickerPage()
             this.pckModels3.ItemsSource = new List<string> { "Model A", "Model B", "Model C", "Model D" };
             this.pckModels4.ItemsSource = new List<string> { "Model A", "Model B", "Model C", "Model D" };
 
+            this.pckDouble.SelectedIndexesChanged += PckDouble_SelectedIndexChanged;
+            this.ItemsSource = new List<string> { "Model 1", "Model 2", "Model 3", "Model 4" };
+            this.SecondaryItemsSource = new List<string> { "A", "B", "C", "D" };
+            this.SelectedItem = "Model 2";
+            this.SecondarySelectedItem = "C";
+
             this.TapCommand = new Command<string>(OnTap);
 
+            this.Tap2Command = new Command<string>(OnTap2);
+
             this.BindingContext = this;
         }
 
+        private void PckDouble_SelectedIndexChanged(object sender, SelectedIndexesEventArgs e)
+        {
+            this.lblSelectedIndexes.Text = $"SelectedIndexes: {e.SelectedIndexes[0]} - {e.SelectedIndexes[1]}";
+        }
+
         private void PckModels_SelectedIndexChanged(object sender, EventArgs e)
         {
             this.lblSelectedIndex.Text = $"SelectedIndex: {this.pckModels.SelectedIndex}";
@@ -47,5 +69,12 @@ public async void OnTap(object parameter)
                 this.pckColors.AssistiveText = "The color is required";
             }
         }
+
+        public ICommand Tap2Command { get; set; }
+
+        public async void OnTap2(object parameter)
+        {
+            await this.DisplayAlert("Saved", $"{SelectedItem} - {SecondarySelectedItem}", "Ok");
+        }
     }
 }

screenshots/doublePickerAndroid.png

@@ -133,6 +133,7 @@
     <Compile Include="Effects\TouchAndPressEffect.cs" />
     <Compile Include="Effects.cs" />
     <Compile Include="Utils\TextAlignmentHelper.cs" />
+    <Compile Include="Renderers\MaterialDoublePickerRenderer.cs" />
   </ItemGroup>
   <ItemGroup>
     <None Include="Resources\AboutResources.txt" />

screenshots/doublePickeriOS.png

@@ -8,6 +8,7 @@ public static void Init()
             MaterialDatePickerRenderer.Init();
             MaterialEntryRenderer.Init();
             MaterialPickerRenderer.Init();
+            MaterialDoublePickerRenderer.Init();
             MaterialTimePickerRenderer.Init();
             MaterialEditorRenderer.Init();
             MaterialLabelRenderer.Init();