Add multiple selection to the MaterialChipsGroup

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.10.3</version>
+       <version>1.10.4</version>
        <title>MaterialDesignControls Plugin for Xamarin Forms</title>
        <authors>Horus</authors>
        <owners>AgustinBonillaHorus</owners>

example/ExampleMaterialDesignControls/Pages/MaterialChipsPage.xaml

@@ -25,8 +25,32 @@
                     <material:MaterialChips Grid.Column="2" Grid.Row="1" IsSelected="false" IsEnabled="false" Text="Option F" />
 
                 </Grid>
-                <material:MaterialLabel Text="Chips group control" Margin="0,24,0,0" />
-                <material:MaterialChipsGroup LabelText="Sizes" SelectedItem="{Binding SelectedSizes}" ItemsSource="{Binding Sizes}" AssistiveText="{Binding Error}" AnimateError="True" />
+
+                <BoxView
+                    HeightRequest="1"
+                    BackgroundColor="LightGray" />
+
+                <material:MaterialLabel
+                    Text="Chips group control"
+                    Margin="0,24,0,0" />
+
+                <material:MaterialChipsGroup
+                    LabelText="Sizes"
+                    SelectedItem="{Binding SelectedSizes}"
+                    ItemsSource="{Binding Sizes}"
+                    AssistiveText="{Binding Error}"
+                    AnimateError="True"
+                    ChipsFlexLayoutPercentageBasis="0.33"/>
+
+                <material:MaterialChipsGroup
+                    LabelText="Colors"
+                    IsMultipleSelection="True"
+                    SelectedItems="{Binding SelectedColors}"
+                    ItemsSource="{Binding Colors}" />
+
+                <BoxView
+                    HeightRequest="1"
+                    BackgroundColor="LightGray" />
 
                 <material:MaterialLabel Text="Filters" Margin="0,24,0,0" />
                 <FlexLayout Wrap="Wrap" Direction="Row" HorizontalOptions="FillAndExpand">

example/ExampleMaterialDesignControls/ViewModels/MaterialChipViewModel.cs

@@ -1,4 +1,4 @@
-using System;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Threading.Tasks;
 using System.Windows.Input;
@@ -32,6 +32,22 @@ public string SelectedSizes
             set { SetProperty(ref selectedSizes, value); }
         }
 
+        private ObservableCollection<string> colors;
+
+        public ObservableCollection<string> Colors
+        {
+            get { return colors; }
+            set { SetProperty(ref colors, value); }
+        }
+
+        private List<string> selectedColors;
+
+        public List<string> SelectedColors
+        {
+            get { return selectedColors; }
+            set { SetProperty(ref selectedColors, value); }
+        }
+
         private string error;
 
         public string Error
@@ -63,14 +79,17 @@ public ProductDetailsViewModel()
             })));
 
             this.Sizes = new ObservableCollection<string> { "6", "6.5", "7", "7.5", "8" };
+
+            this.Colors = new ObservableCollection<string> { "Red", "White", "Green", "Sky blue", "Black", "Gray", "Light Gray" };
         }
 
         private async void OnTapCommand()
         {
             if (!string.IsNullOrEmpty(this.SelectedSizes))
             {
                 this.Error = null;
-                await this.DisplayAlert.Invoke("", "Saved", "Ok");
+                var colors = SelectedColors != null ? string.Join(", ", SelectedColors) : string.Empty;
+                await this.DisplayAlert.Invoke("Saved", $"Size: {SelectedSizes} - Colors: {colors}", "Ok");
             }
             else
             {
@@ -90,4 +109,4 @@ public Item(string name, ICommand cmd)
             this.TapCommand = cmd;
         }
     }
-}
+}

src/MaterialDesignControls/Controls/MaterialChipsGroup.xaml

@@ -6,10 +6,12 @@
     <ContentView.Content>
         <StackLayout Spacing="2">
             <controls:MaterialLabel x:Name="lblLabel" IsVisible="false" LineBreakMode="NoWrap" Margin="14,0,14,2" HorizontalTextAlignment="Start" />
-            <ScrollView Orientation="Horizontal" HorizontalScrollBarVisibility="Never">
-                <StackLayout x:Name="stcContainer" Orientation="Horizontal" Spacing="12" Padding="12,0">
-                </StackLayout>
-            </ScrollView>
+            <FlexLayout
+                x:Name="flexContainer"
+                Wrap="Wrap"
+                Direction="Row"
+                JustifyContent="Start"
+                AlignContent="Start" />
             <controls:MaterialLabel x:Name="lblAssistive" IsVisible="false" LineBreakMode="NoWrap" Margin="14,2,14,0" HorizontalTextAlignment="Start" />
         </StackLayout>
     </ContentView.Content>

src/MaterialDesignControls/Controls/MaterialChipsGroup.xaml.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Collections;
 using System.Collections.Generic;
+using System.Linq;
 using System.Runtime.CompilerServices;
 using Plugin.MaterialDesignControls.Animations;
 using Xamarin.Forms;
@@ -50,6 +51,24 @@ public Thickness ChipsPadding
             set { SetValue(ChipsPaddingProperty, value); }
         }
 
+        public static readonly BindableProperty ChipsMarginProperty =
+            BindableProperty.Create(nameof(ChipsMargin), typeof(Thickness), typeof(MaterialChipsGroup), defaultValue: new Thickness(6));
+
+        public Thickness ChipsMargin
+        {
+            get { return (Thickness)GetValue(ChipsMarginProperty); }
+            set { SetValue(ChipsMarginProperty, value); }
+        }
+
+        public static readonly BindableProperty ChipsFlexLayoutBasisPercentageProperty =
+            BindableProperty.Create(nameof(ChipsFlexLayoutPercentageBasis), typeof(double), typeof(MaterialChipsGroup), defaultValue: 0.0);
+
+        public double ChipsFlexLayoutPercentageBasis
+        {
+            get { return (double)GetValue(ChipsFlexLayoutBasisPercentageProperty); }
+            set { SetValue(ChipsFlexLayoutBasisPercentageProperty, value); }
+        }
+
         public static readonly new BindableProperty IsEnabledProperty =
             BindableProperty.Create(nameof(IsEnabled), typeof(bool), typeof(MaterialChipsGroup), defaultValue: true);
 
@@ -69,11 +88,11 @@ public string LabelText
         }
 
         public static readonly BindableProperty ItemsSourceProperty =
-            BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable), typeof(MaterialChipsGroup), defaultValue: null, propertyChanged: OnItemsSourceChanged);
+            BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable<string>), typeof(MaterialChipsGroup), defaultValue: null, propertyChanged: OnItemsSourceChanged);
 
-        public IEnumerable ItemsSource
+        public IEnumerable<string> ItemsSource
         {
-            get { return (IEnumerable)GetValue(ItemsSourceProperty); }
+            get { return (IEnumerable<string>)GetValue(ItemsSourceProperty); }
             set { SetValue(ItemsSourceProperty, value); }
         }
 
@@ -86,6 +105,15 @@ public string SelectedItem
             set { SetValue(SelectedItemProperty, value); }
         }
 
+        public static readonly BindableProperty SelectedItemsProperty =
+            BindableProperty.Create(nameof(SelectedItems), typeof(List<string>), typeof(MaterialChipsGroup), defaultValue: null, propertyChanged: OnSelectedItemsChanged, defaultBindingMode: BindingMode.TwoWay);
+
+        public List<string> SelectedItems
+        {
+            get { return (List<string>)GetValue(SelectedItemsProperty); }
+            set { SetValue(SelectedItemsProperty, value); }
+        }
+
         public static readonly BindableProperty AssistiveTextProperty =
             BindableProperty.Create(nameof(AssistiveText), typeof(string), typeof(MaterialChipsGroup), defaultValue: null);
 
@@ -239,33 +267,57 @@ public bool AnimateError
             set { SetValue(AnimateErrorProperty, value); }
         }
 
+        public static readonly BindableProperty IsMultipleSelectionProperty =
+            BindableProperty.Create(nameof(IsMultipleSelection), typeof(bool), typeof(MaterialChipsGroup), defaultValue: false);
+
+        public bool IsMultipleSelection
+        {
+            get { return (bool)GetValue(IsMultipleSelectionProperty); }
+            set { SetValue(IsMultipleSelectionProperty, value); }
+        }
+
         #endregion Properties
 
         #region Methods
 
+        // Single selection
         private static void OnSelectedItemChanged(BindableObject bindable, object oldValue, object newValue)
         {
             var control = (MaterialChipsGroup)bindable;
-            if (control.stcContainer.Children != null)
+            if (control.flexContainer.Children != null && control.SelectedItem != null)
             {
-                foreach (var item in control.stcContainer.Children)
+                foreach (var item in control.flexContainer.Children)
                 {
                     if (item != null && item is MaterialChips)
-                    {
                         ((MaterialChips)item).IsSelected = ((MaterialChips)item).Text.Equals(control.SelectedItem);
-                    }
+                }
+            }
+        }
+
+        // Multiple selection
+        private static void OnSelectedItemsChanged(BindableObject bindable, object oldValue, object newValue)
+        {
+            var control = (MaterialChipsGroup)bindable;
+            if (control.flexContainer.Children != null && control.SelectedItems != null && control.SelectedItems.Any())
+            {
+                foreach (var item in control.flexContainer.Children)
+                {
+                    if (item != null && item is MaterialChips)
+                        ((MaterialChips)item).IsSelected = control.SelectedItems.Contains(((MaterialChips)item).Text);
                 }
             }
         }
 
         private static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
         {
             var control = (MaterialChipsGroup)bindable;
-            control.stcContainer.Children.Clear();
+            control.flexContainer.Children.Clear();
             if (!Equals(newValue, null) && newValue is IEnumerable)
             {
                 foreach (var item in (IEnumerable)newValue)
                 {
+                    // TODO: apply ChipsFlexLayoutBasis???
+
                     var materialChips = new MaterialChips
                     {
                         HorizontalOptions = LayoutOptions.FillAndExpand,
@@ -274,6 +326,7 @@ private static void OnItemsSourceChanged(BindableObject bindable, object oldValu
                         FontFamily = control.FontFamily,
                         CornerRadius = control.CornerRadius,
                         Padding = control.ChipsPadding,
+                        Margin = control.ChipsMargin,
                         BackgroundColor = control.BackgroundColor,
                         TextColor = control.TextColor,
                         SelectedBackgroundColor = control.SelectedBackgroundColor,
@@ -283,12 +336,23 @@ private static void OnItemsSourceChanged(BindableObject bindable, object oldValu
                         DisabledSelectedBackgroundColor = control.DisabledSelectedBackgroundColor,
                         DisabledSelectedTextColor = control.DisabledSelectedTextColor
                     };
-                    if (control.SelectedItem != null)
+
+                    if (control.IsMultipleSelection)
+                    {
+                        if (control.SelectedItems != null && control.SelectedItems.Any())
+                            materialChips.IsSelected = control.SelectedItems.Contains(materialChips.Text);
+                    }
+                    else
                     {
-                        materialChips.IsSelected = materialChips.Text.Equals(control.SelectedItem);
+                        if (control.SelectedItem != null)
+                            materialChips.IsSelected = materialChips.Text.Equals(control.SelectedItem);
                     }
+                    
                     materialChips.IsSelectedChanged  += control.MaterialChips_IsSelectedChanged;
-                    control.stcContainer.Children.Add(materialChips);
+                    control.flexContainer.Children.Add(materialChips);
+
+                    if (control.ChipsFlexLayoutPercentageBasis > 0 && control.ChipsFlexLayoutPercentageBasis <= 1)
+                        FlexLayout.SetBasis(materialChips, new FlexBasis((float)control.ChipsFlexLayoutPercentageBasis, true));
                 }
             }
         }
@@ -297,27 +361,58 @@ private void MaterialChips_IsSelectedChanged(object sender, EventArgs e)
         {
             if (sender is MaterialChips)
             {
-                if (((MaterialChips)sender).IsSelected)
+                if (IsMultipleSelection)
                 {
-                    this.SelectedItem = ((MaterialChips)sender).Text;
+                    if (SelectedItems == null)
+                        SelectedItems = new List<string>();
+
+                    if (((MaterialChips)sender).IsSelected)
+                        SelectedItems.Add(((MaterialChips)sender).Text);
+                    else
+                        SelectedItems.Remove(((MaterialChips)sender).Text);
+
+                    //bool hasSelected = false;
+                    //if (this.flexContainer.Children != null)
+                    //{
+                    //    foreach (var item in this.flexContainer.Children)
+                    //    {
+                    //        if (item != null && item is MaterialChips && ((MaterialChips)item).IsSelected)
+                    //        {
+                    //            hasSelected = true;
+                    //            break;
+                    //        }
+                    //    }
+                    //}
+
+                    //if (!hasSelected)
+                    //{
+                    //    ((MaterialChips)sender).IsSelected = true;
+                    //}
                 }
-
-                bool hasSelected = false;
-                if (this.stcContainer.Children != null)
+                else
                 {
-                    foreach (var item in this.stcContainer.Children)
+                    if (((MaterialChips)sender).IsSelected)
+                    {
+                        this.SelectedItem = ((MaterialChips)sender).Text;
+                    }
+
+                    bool hasSelected = false;
+                    if (this.flexContainer.Children != null)
                     {
-                        if (item != null && item is MaterialChips && ((MaterialChips)item).IsSelected)
+                        foreach (var item in this.flexContainer.Children)
                         {
-                            hasSelected = true;
-                            break;
+                            if (item != null && item is MaterialChips && ((MaterialChips)item).IsSelected)
+                            {
+                                hasSelected = true;
+                                break;
+                            }
                         }
                     }
-                }
 
-                if (!hasSelected)
-                {
-                    ((MaterialChips)sender).IsSelected = true;
+                    if (!hasSelected)
+                    {
+                        ((MaterialChips)sender).IsSelected = true;
+                    }
                 }
             }
         }
@@ -347,7 +442,7 @@ protected override void OnPropertyChanged([CallerMemberName] string propertyName
                     break;
 
                 case nameof(this.Padding):
-                    this.stcContainer.Padding = this.Padding;
+                    this.flexContainer.Padding = this.Padding;
                     break;
 
                 case nameof(this.AssistiveText):
@@ -364,10 +459,9 @@ protected override void OnPropertyChanged([CallerMemberName] string propertyName
                 case nameof(this.AssistiveSize):
                     this.lblAssistive.FontSize = this.AssistiveSize;
                     break;
-
             }
         }
 
         #endregion Methods
     }
-}
+}