我想为我的 mvvm 跨 UWP 应用程序选择多选下拉列表。那么有没有预定义的控件呢？或者我需要实现自定义控件来实现这一点。

如有任何帮助或建议，我们将不胜感激。

谢谢

最佳答案

很惊讶内置的 UWP ComboBox 仍然不支持这种常见场景，而且我在任何地方都找不到任何可行的解决方案。

这是我的最小解决方案，以防其他人正在寻找。

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="&#xE0E5;" 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);
            }
        }
    }
}

用法:

<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>

注意事项:

• 在当前状态下只能绑定(bind)到原始类型集合 像 List< string="">。
• SelectedValues 必须是 List

关于windows - UWP 中的多选下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38327798/