Add ClearSelectedItem to the MaterialPicker

Author: AgustinBonilla

example/ExampleMaterialDesignControls/Pages/MaterialPickerPage.xaml

@@ -7,7 +7,24 @@
     <ContentPage.Content>
         <ScrollView>
             <StackLayout Padding="16" Spacing="16">
-                <material:MaterialPicker x:Name="pckColors" Type="Filled" LabelText="Color" AnimateError="True" />
+                <material:MaterialPicker x:Name="pckColors" Type="Filled" LabelText="Color" AnimateError="True"
+                                         Placeholder="Select a color"
+                                         ItemsSource="{Binding ItemsSourceColors}" SelectedItem="{Binding SelectedItemColor}" />
+                <Grid
+                    ColumnSpacing="16">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <material:MaterialFlatButton
+                        Text="Clear"
+                        Command="{Binding ClearCommand}" />
+                    <material:MaterialButton
+                        Grid.Column="1"
+                        Text="Show"
+                        Command="{Binding ShowCommand}" />
+                </Grid>
+
                 <material:MaterialPicker Type="Filled" LabelText="Color" AnimateError="True" IsEnabled="False" />
                 <material:MaterialPicker x:Name="pckSizes" SelectedItem="{Binding SelectedSizes}" Type="Outlined" LabelText="Size" Placeholder="Select option" PlaceholderColor="Red" />
                 <material:MaterialPicker x:Name="pckModels" Type="Lined" LabelText="Model" LeadingIcon="color.png" />

example/ExampleMaterialDesignControls/Pages/MaterialPickerPage.xaml.cs

@@ -8,6 +8,10 @@ namespace ExampleMaterialDesignControls.Pages
 {
     public partial class MaterialPickerPage : ContentPage
     {
+        public List<string> ItemsSourceColors { get; set; }
+
+        public string SelectedItemColor { get; set; }
+
         public string SelectedSizes { get; set; }
 
         public string SelectedItem { get; set; }
@@ -22,7 +26,8 @@ public MaterialPickerPage()
         {
             InitializeComponent();
 
-            this.pckColors.ItemsSource = new List<string> { "Red", "Blue", "Green" };
+            ItemsSourceColors = new List<string> { "Red", "Blue", "Green" };
+
             this.pckSizes.ItemsSource = new List<string> { "P", "M", "X", "XL" };
 
             this.pckModels.ItemsSource = new List<string> { "Model A", "Model B", "Model C", "Model D" };
@@ -44,6 +49,19 @@ public MaterialPickerPage()
 
             this.Tap3Command = new Command<string>(OnTap3);
 
+            ClearCommand = new Command(() =>
+            {
+                pckColors.ClearSelectedItem();
+            });
+
+            ShowCommand = new Command(async () =>
+            {
+                if (!string.IsNullOrEmpty(SelectedItemColor))
+                    await DisplayAlert("Color", SelectedItemColor, "Ok");
+                else
+                    await DisplayAlert("Color", "No color selected", "Ok");
+            });
+
             this.BindingContext = this;
         }
 
@@ -85,5 +103,9 @@ public async void OnTap3(object parameter)
         {
             this.pckDoubleWithFocus.Focus();
         }
+
+        public ICommand ClearCommand { get; set; }
+
+        public ICommand ShowCommand { get; set; }
     }
-}
+}

src/MaterialDesignControls.Android/Renderers/MaterialPickerRenderer.cs

@@ -1,11 +1,11 @@
-using System;
-using Android.Content;
+using Android.Content;
 using Android.Graphics.Drawables;
 using AndroidGraphics = Android.Graphics;
 using Plugin.MaterialDesignControls.Implementations;
 using Xamarin.Forms;
 using Xamarin.Forms.Platform.Android;
 using Plugin.MaterialDesignControls.Android.Utils;
+using System.ComponentModel;
 
 [assembly: ExportRenderer(typeof(CustomPicker), typeof(Plugin.MaterialDesignControls.Android.MaterialPickerRenderer))]
 
@@ -39,5 +39,21 @@ protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.P
                 }
             }
         }
+
+        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            base.OnElementPropertyChanged(sender, e);
+
+            var customPicker = (CustomPicker)Element;
+            if (e.PropertyName == nameof(customPicker.SelectedIndex))
+            {
+                if (customPicker.SelectedItem == null && !string.IsNullOrEmpty(customPicker.Placeholder))
+                {
+                    this.Control.Text = null;
+                    this.Control.Hint = customPicker.Placeholder;
+                    this.Control.SetHintTextColor(customPicker.PlaceholderColor.ToAndroid());
+                }
+            }
+        }
     }
-}
+}

src/MaterialDesignControls.iOS/Renderers/MaterialPickerRenderer.cs

@@ -46,6 +46,21 @@ protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.P
                 }
             }
         }
+
+        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            base.OnElementPropertyChanged(sender, e);
+
+            var customPicker = (CustomPicker)Element;
+            if (e.PropertyName == nameof(customPicker.SelectedIndex))
+            {
+                if (customPicker.SelectedItem == null && !string.IsNullOrEmpty(customPicker.Placeholder))
+                {
+                    this.Control.Text = null;
+                    this.Control.AttributedPlaceholder = new NSAttributedString(customPicker.Placeholder, foregroundColor: customPicker.PlaceholderColor.ToUIColor());
+                }
+            }
+        }
     }
 
     public class MyPickerDelegate : UIPickerViewDelegate

src/MaterialDesignControls/Controls/MaterialPicker.xaml.cs

@@ -337,6 +337,12 @@ private void PckOptions_SelectedIndexChanged(object sender, EventArgs e)
             }
         }
 
+        public void ClearSelectedItem()
+        {
+            SelectedItem = null;
+            pckOptions.SelectedIndex = -1;
+        }
+
         #endregion Methods
     }
 }