Multi select drop down list in UWP - windows

Question

I want multi select drop down list for my mvvm cross UWP app. So is there any predefined control? Or I need to implement custom control to achieve this.
Any help or suggestions would be appreciated.
Thank You

Answer 1

Surprised that such common scenario is still not supported by built-in UWP ComboBox and that I couldn't found any working solutions anywhere.
Here is my minimal solution in case anyone else is looking.
XAML:
<UserControl
x:Class="MonoTorrent.GUI.Controls.MultiSelectComboBox"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<StackPanel x:Name="rootElement" Orientation="Vertical" Margin="0">
<Button x:Name="comboBoxButton" BorderBrush="Gray" BorderThickness="2" Background="Transparent"
VerticalAlignment="Top" Click="ComboBoxButton_Click"
HorizontalAlignment="Stretch" FontSize="14" MinHeight="26" Height="26" Padding="0"
Width="{Binding ElementName=rootElement, Path=ActualWidth}">
<Grid VerticalAlignment="Stretch" Width="{Binding ElementName=rootElement, Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="32" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="SelectedValueTextBlock"
Grid.Column="0" VerticalAlignment="Center" FontSize="15" HorizontalAlignment="Left" Padding="7,0,0,0" />
<FontIcon Grid.Column="1" FontSize="12" FontFamily="Segoe MDL2 Assets" Glyph="" HorizontalAlignment="Right"
Margin="0,5,10,5" VerticalAlignment="Center" />
</Grid>
</Button>
<Popup x:Name="comboBoxPopup" IsLightDismissEnabled="True">
<Border BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}"
BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}"
Background="{ThemeResource ComboBoxDropDownBackground}"
HorizontalAlignment="Stretch">
<ListView x:Name="listView"
SelectionMode="Multiple"
SingleSelectionFollowsFocus="False"
SelectionChanged="ListView_SelectionChanged">
</ListView>
</Border>
</Popup>
</StackPanel>
</UserControl>
C#:
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace MonoTorrent.GUI.Controls
{
public sealed partial class MultiSelectComboBox : UserControl
{
#region ItemsSource dependency property
public object ItemsSource
{
get { return GetValue(ItemsSourceProperty); }
set
{
SetValue(ItemsSourceProperty, value);
listView.ItemsSource = value;
}
}
public static readonly DependencyProperty ItemsSourceProperty =
DependencyProperty.Register("ItemsSource", typeof(object), typeof(MultiSelectComboBox), new PropertyMetadata(new List<object>(), OnItemsSourcePropertyChanged));
private static void OnItemsSourcePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MultiSelectComboBox instance = d as MultiSelectComboBox;
if (instance != null && e.NewValue != null)
{
instance.listView.ItemsSource = e.NewValue;
}
}
#endregion
#region ItemTemplate dependency property
public DataTemplate ItemTemplate
{
get { return (DataTemplate)GetValue(ItemTemplateProperty); }
set
{
SetValue(ItemTemplateProperty, value);
listView.ItemTemplate = value;
}
}
public static readonly DependencyProperty ItemTemplateProperty =
DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(MultiSelectComboBox), new PropertyMetadata(null, OnItemTemplatePropertyChanged));
private static void OnItemTemplatePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MultiSelectComboBox instance = d as MultiSelectComboBox;
if (instance != null && e.NewValue as DataTemplate != null)
{
instance.listView.ItemTemplate = (DataTemplate)e.NewValue;
}
}
#endregion
#region SelectedItems dependency property
public IList<object> SelectedItems
{
get { return (IList<object>)GetValue(SelectedItemsProperty); }
set { SetValue(SelectedItemsProperty, value); }
}
public static readonly DependencyProperty SelectedItemsProperty =
DependencyProperty.Register("SelectedItems", typeof(IList<object>), typeof(MultiSelectComboBox), new PropertyMetadata(new List<object>()));
#endregion
#region PopupHeight dependency property
public double PopupHeight
{
get { return (double)GetValue(PopupHeightProperty); }
set
{
SetValue(PopupHeightProperty, value);
if (value != 0)
{
listView.Height = value;
}
}
}
public static readonly DependencyProperty PopupHeightProperty =
DependencyProperty.Register("PopupHeight", typeof(double), typeof(MultiSelectComboBox), new PropertyMetadata(0.0, OnPopupHeightPropertyChanged));
private static void OnPopupHeightPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MultiSelectComboBox instance = d as MultiSelectComboBox;
if (instance != null && (double)e.NewValue != 0)
{
instance.listView.Height = (double)e.NewValue;
}
}
#endregion
#region PopupWidth dependency property
public double PopupWidth
{
get { return (double)GetValue(PopupWidthProperty); }
set
{
SetValue(PopupWidthProperty, value);
if (value != 0)
{
listView.Width = value;
}
}
}
public static readonly DependencyProperty PopupWidthProperty =
DependencyProperty.Register("PopupWidth", typeof(double), typeof(MultiSelectComboBox), new PropertyMetadata(0.0, OnPopupWidthPropertyChanged));
private static void OnPopupWidthPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MultiSelectComboBox instance = d as MultiSelectComboBox;
if (instance != null && (double)e.NewValue != 0)
{
instance.listView.Width = (double)e.NewValue;
}
}
#endregion
#region NoSelectionText dependency property
public string NoSelectionText
{
get { return (string)GetValue(NoSelectionTextProperty); }
set { SetValue(NoSelectionTextProperty, value); }
}
public static readonly DependencyProperty NoSelectionTextProperty =
DependencyProperty.Register("NoSelectionText", typeof(string), typeof(MultiSelectComboBox), new PropertyMetadata("No selection"));
#endregion
#region MultipleSelectionTextFormat dependency property
public string MultipleSelectionTextFormat
{
get { return (string)GetValue(MultipleSelectionTextFormatProperty); }
set { SetValue(MultipleSelectionTextFormatProperty, value); }
}
public static readonly DependencyProperty MultipleSelectionTextFormatProperty =
DependencyProperty.Register("MultipleSelectionTextFormat", typeof(string), typeof(MultiSelectComboBox), new PropertyMetadata("{0} selected"));
#endregion
public MultiSelectComboBox()
{
this.InitializeComponent();
this.Loaded += MultiSelectComboBox_Loaded;
}
private void MultiSelectComboBox_Loaded(object sender, RoutedEventArgs e)
{
this.UpdateSelectionText();
}
private void ComboBoxButton_Click(object sender, RoutedEventArgs e)
{
listView.SelectedItems.Clear();
foreach (var item in SelectedItems)
{
listView.SelectedItems.Add(item);
}
this.comboBoxPopup.IsOpen = true;
}
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (!comboBoxPopup.IsOpen)
{
return;
}
this.SelectedItems = listView.SelectedItems.ToList();
UpdateSelectionText();
}
private void UpdateSelectionText()
{
if (this.SelectedItems == null || this.SelectedItems.Count == 0)
{
this.SelectedValueTextBlock.Text = NoSelectionText;
}
else if (this.SelectedItems.Count == 1)
{
this.SelectedValueTextBlock.Text = this.SelectedItems.First().ToString();
}
else
{
this.SelectedValueTextBlock.Text = String.Format(MultipleSelectionTextFormat, this.SelectedItems.Count);
}
}
}
}
Usage:
<controls:MultiSelectComboBox x:Name="MultiSelectComboBox"
ItemsSource="{Binding Values}"
SelectedItems="{Binding SelectedValues, Mode=TwoWay}"
NoSelectionText="{Binding EmptySelectionString}"
MultipleSelectionTextFormat="{Binding MultipleSelectedFormatString}"
PopupHeight="500" PopupWidth="200"
HorizontalAlignment="Stretch" FontSize="14" MinHeight="26" Height="26">
<controls:MultiSelectComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</controls:MultiSelectComboBox.ItemTemplate>
</controls:MultiSelectComboBox>
Notes:
In current state can only be bound to a primitive type collection
like List< String >.
SelectedValues has to be List< object >, you can use
Cast< T > to convert from List< String >.

Answer 2

There is no built-in multi-select combobox in UWP, but you can build your own like this - Issue with multiselect combobox control in Windows 8 .
Basically you can add checkboxes to each item in a combobox and create a logic that will gather the selected items and provide a bindable way to access them.
To make it even simpler, you can create a special class that will have a IsChecked property and just add the checkbox with two-way binding to this property. This will ensure checking of the box in the UI will be reflected in the class and you can then just enumerate all the items to find those that have IsChecked set to true.

Answer 3

I would build it something like this...
First build your class
public class MultiSelectComboBox : ComboBox
{
public List<ComboBoxItem> SelectedItems
{
get { return (List<ComboBoxItem>)GetValue(SelectedItemsProperty); }
set { SetValue(SelectedItemsProperty, value); }
}
public static readonly DependencyProperty SelectedItemsProperty =
DependencyProperty.Register("SelectedItems", typeof(List<ComboBoxItem>), typeof(MultiSelectComboBox), new PropertyMetadata(new List<ComboBoxItem>()));
public static void SetIsSelected(UIElement element, bool value)
{
element.SetValue(IsSelectedProperty, value);
}
public static bool GetIsSelected(UIElement element)
{
return (bool)element.GetValue(IsSelectedProperty);
}
public static readonly DependencyProperty IsSelectedProperty =
DependencyProperty.RegisterAttached("IsSelected", typeof(bool), typeof(ComboBoxItem), new PropertyMetadata(false, OnIsSelectedChanged));
public static void SetParentComboBox(UIElement element, MultiSelectComboBox value)
{
element.SetValue(ParentComboBoxProperty, value);
}
public static MultiSelectComboBox GetParentComboBox(UIElement element)
{
return (MultiSelectComboBox)element.GetValue(ParentComboBoxProperty);
}
public static readonly DependencyProperty ParentComboBoxProperty =
DependencyProperty.RegisterAttached("ParentComboBox", typeof(MultiSelectComboBox), typeof(MultiSelectComboBox), new PropertyMetadata(null));
protected override DependencyObject GetContainerForItemOverride()
{
ComboBoxItem comboBoxitem = new ComboBoxItem();
MultiSelectComboBox.SetParentComboBox(comboBoxitem, this);
return comboBoxitem;
}
private static void OnIsSelectedChanged(object comboBoxItem, DependencyPropertyChangedEventArgs args)
{
ComboBoxItem item = comboBoxItem as ComboBoxItem;
if (item != null)
{
MultiSelectComboBox parent = MultiSelectComboBox.GetParentComboBox(item);
if (MultiSelectComboBox.GetIsSelected(item))
{
parent.SelectedItems.Add(item);
}
else
{
parent.SelectedItems.Remove(item);
}
}
}
}
Then create your items template
<local:MultiSelectComboBox ItemsSource="{Binding Items}" SelectedItems="{Binding SelectedItems, Mode=TwoWay}">
<local:MultiSelectComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding ItemContent}" IsChecked="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}, Path=IsSelected, Mode=TwoWay}"/>
</DataTemplate>
</local:MultiSelectComboBox.ItemTemplate>
</local:MultiSelectComboBox>
However, this might take some massaging to get working. In the end you want to subclass Combobox and make it do some new stuff.