Question

我想为我的mvvm跨UWP应用程序提供多选下拉列表。那么有任何预定义的控制吗？或者我需要实现自定义控件来实现这一目标。

任何帮助或建议都将不胜感激。

谢谢

Answer 1

令人惊讶的是，内置的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>

注意：

在当前状态下只能绑定到原始类型集合像List 。

SelectedValues必须是List

Answer 2

UWP中没有内置的多选组合框，但您可以像这样建立自己的组合 - Issue with multiselect combobox control in Windows 8。

基本上，您可以为组合框中的每个项目添加复选框，并创建一个逻辑，用于收集所选项目并提供可绑定的方式来访问它们。

为了使其更简单，您可以创建一个具有IsChecked属性的特殊类，只需添加具有双向绑定的复选框即可。这将确保检查UI中的框将反映在课程中，然后您可以枚举所有项目以查找IsChecked设置为true的项目。

Answer 3

我会像这样构建它......

首先建立你的班级

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);
          }
        }
    }

}

然后创建项目模板

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

然而，这可能需要一些按摩才能开始工作。最后你想要将Combobox子类化并使它做一些新的东西。

UWP中的多选下拉列表

3 个答案: