Issue with multiselect combobox control in Windows

2020-06-29 15:23发布

站内文章 / 前沿技术
47 0 0

问题:

I am creating a multiselect combobox in Windows 8 as shown in below image:

For this I have created custom control code for which is mentioned below: The problem with below code is that

  1. on selecting all the all items are not selected
  2. Selected items are not displayed in textbox

How can I fix that?

XAML:

<UserControl
    x:Class="App5.MultiSelectComboBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App5"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    x:Name="thisUC"
    d:DesignWidth="400">

        <ComboBox
        x:Name="MultiSelectCombo"  
        ScrollViewer.HorizontalScrollBarVisibility="Auto"
        ScrollViewer.VerticalScrollBarVisibility="Auto"
Width="400" Height="20" 
                           >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <CheckBox Content="{Binding Title}" Foreground="Black"
                          IsChecked="{Binding ElementName=thisUC, Path=IsSelected, Mode=TwoWay}"
                           Click="CheckBox_Click" />
            </DataTemplate>
        </ComboBox.ItemTemplate>
        <ControlTemplate TargetType="ComboBox">
            <Grid >
                <ToggleButton 
                        x:Name="ToggleButton" 
                       Grid.Column="2" IsChecked="{TemplateBinding IsDropDownOpen}"

                        ClickMode="Press" HorizontalContentAlignment="Left" >
                    <ToggleButton.Template>
                        <ControlTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="18"/>
                                </Grid.ColumnDefinitions>
                                <Border
                  x:Name="Border" 
                  Grid.ColumnSpan="2"
                  CornerRadius="2"
                  Background="White"
                  BorderBrush="Black"
                  BorderThickness="1,1,1,1" />
                                <Border 
                    x:Name="BorderComp" 
                  Grid.Column="0"
                  CornerRadius="2" 
                  Margin="1" 
                 Background="White"
                  BorderBrush="Black"
                  BorderThickness="0,0,0,0" >
                                    <TextBlock Foreground="Black" Text="{TemplateBinding TextValue}" 
                            Padding="3" />
                                </Border>
                                <Path 
                  x:Name="Arrow"
                  Grid.Column="1"     
                  Fill="Black"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  Data="M 0 0 L 4 4 L 8 0 Z"/>
                            </Grid>
                        </ControlTemplate>
                    </ToggleButton.Template>
                </ToggleButton>
                <Popup 
                        Name="Popup"
                         IsOpen="{TemplateBinding IsDropDownOpen}"
                        >
                    <Grid 
                        Name="DropDown"
                        MinWidth="{TemplateBinding ActualWidth}"
                        MaxHeight="{TemplateBinding MaxDropDownHeight}">
                        <Border x:Name="DropDownBorder"
                                   BorderThickness="1" Background="White"
                                    BorderBrush="Black"/>
                        <ScrollViewer Margin="4,6,4,6" DataContext="{Binding}">
                            <StackPanel  />
                        </ScrollViewer>
                    </Grid>
                </Popup>
            </Grid>
            <!--<ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                        <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
                        <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                    </Trigger>
                </ControlTemplate.Triggers>-->
        </ControlTemplate>

    </ComboBox>
</UserControl>

C#

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Text;
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;

// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236

namespace App5
{
    public sealed partial class MultiSelectComboBox : UserControl
    {
        private ObservableCollection<Node> _nodeList;
        public MultiSelectComboBox()
        {
            InitializeComponent();
            _nodeList = new ObservableCollection<Node>();
        }

        #region Dependency Properties

        public static readonly DependencyProperty ItemsSourceProperty =
             DependencyProperty.Register("ItemsSource", typeof(Dictionary<string, object>), typeof(MultiSelectComboBox), new PropertyMetadata(null,
        new PropertyChangedCallback(MultiSelectComboBox.OnItemsSourceChanged)));

        public static readonly DependencyProperty SelectedItemsProperty =
         DependencyProperty.Register("SelectedItems", typeof(Dictionary<string, object>), typeof(MultiSelectComboBox), new PropertyMetadata(null,
     new PropertyChangedCallback(MultiSelectComboBox.OnSelectedItemsChanged)));

        public static readonly DependencyProperty TextProperty =
           DependencyProperty.Register("TextValue", typeof(string), typeof(MultiSelectComboBox), new PropertyMetadata(null));

        public static readonly DependencyProperty DefaultTextProperty =
            DependencyProperty.Register("DefaultText", typeof(string), typeof(MultiSelectComboBox), new PropertyMetadata(null));



        public Dictionary<string, object> ItemsSource
        {
            get { return (Dictionary<string, object>)GetValue(ItemsSourceProperty); }
            set
            {
                SetValue(ItemsSourceProperty, value);
            }
        }

        public Dictionary<string, object> SelectedItems
        {
            get { return (Dictionary<string, object>)GetValue(SelectedItemsProperty); }
            set
            {
                SetValue(SelectedItemsProperty, value);
            }
        }

        public string TextValue
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public string DefaultText
        {
            get { return (string)GetValue(DefaultTextProperty); }
            set { SetValue(DefaultTextProperty, value); }
        }
        #endregion

        #region Events
        private static void OnItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            MultiSelectComboBox control = (MultiSelectComboBox)d;
            control.DisplayInControl();
        }

        private static void OnSelectedItemsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            MultiSelectComboBox control = (MultiSelectComboBox)d;
            control.SelectNodes();
            control.SetText();
        }

        private void CheckBox_Click(object sender, RoutedEventArgs e)
        {
            CheckBox clickedBox = (CheckBox)sender;

            if (clickedBox.Content == "All")
            {
                if (clickedBox.IsChecked.Value)
                {
                    foreach (Node node in _nodeList)
                    {
                        node.IsSelected = true;
                    }
                }
                else
                {
                    foreach (Node node in _nodeList)
                    {
                        node.IsSelected = false;
                    }
                }

            }
            else
            {
                int _selectedCount = 0;
                foreach (Node s in _nodeList)
                {
                    if (s.IsSelected && s.Title != "All")
                        _selectedCount++;
                }
                if (_selectedCount == _nodeList.Count - 1)
                    _nodeList.FirstOrDefault(i => i.Title == "All").IsSelected = true;
                else
                    _nodeList.FirstOrDefault(i => i.Title == "All").IsSelected = false;
            }
            SetSelectedItems();
            SetText();

        }
        #endregion


        #region Methods
        private void SelectNodes()
        {
            foreach (KeyValuePair<string, object> keyValue in SelectedItems)
            {
                Node node = _nodeList.FirstOrDefault(i => i.Title == keyValue.Key);
                if (node != null)
                    node.IsSelected = true;
            }
        }

        private void SetSelectedItems()
        {
            if (SelectedItems == null)
                SelectedItems = new Dictionary<string, object>();
            SelectedItems.Clear();
            foreach (Node node in _nodeList)
            {
                if (node.IsSelected && node.Title != "All")
                {
                    if (this.ItemsSource.Count > 0)

                        SelectedItems.Add(node.Title, this.ItemsSource[node.Title]);
                }
            }
        }

        private void DisplayInControl()
        {
            _nodeList.Clear();
            if (this.ItemsSource.Count > 0)
                _nodeList.Add(new Node("All"));
            foreach (KeyValuePair<string, object> keyValue in this.ItemsSource)
            {
                Node node = new Node(keyValue.Key);
                _nodeList.Add(node);
            }

            MultiSelectCombo.ItemsSource = _nodeList;
        }

        private void SetText()
        {
            if (this.SelectedItems != null)
            {
                StringBuilder displayText = new StringBuilder();
                foreach (Node s in _nodeList)
                {
                    if (s.IsSelected == true && s.Title == "All")
                    {
                        displayText = new StringBuilder();
                        displayText.Append("All");
                        break;
                    }
                    else if (s.IsSelected == true && s.Title != "All")
                    {
                        displayText.Append(s.Title);
                        displayText.Append(',');
                    }
                }
                this.TextValue = displayText.ToString().TrimEnd(new char[] { ',' });
            }
            // set DefaultText if nothing else selected
            if (string.IsNullOrEmpty(this.TextValue))
            {
                this.TextValue = this.DefaultText;
            }
        }


        #endregion
    }

    public class Node : INotifyPropertyChanged
    {

        private string _title;
        private bool _isSelected;
        #region ctor
        public Node(string title)
        {
            Title = title;
        }
        #endregion

        #region Properties
        public string Title
        {
            get
            {
                return _title;
            }
            set
            {
                _title = value;
                NotifyPropertyChanged("Title");
            }
        }
        public bool IsSelected
        {
            get
            {
                return _isSelected;
            }
            set
            {
                _isSelected = value;
                NotifyPropertyChanged("IsSelected");
            }
        }
        #endregion

        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

    }
}

回答1:

I think I understand what you want. Overall, I would recommend a slightly different approach. I would recommend, for one, that you not use a ComboBox to accomplish this - an ItemsControl will accomplish what you want with less work and overhead. Using a Popup like you are is great, but let me show you a slightly simplified way that (this is the best part) works the way you are asking in your question.

Here's your XAML:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.DataContext>
        <local:ViewModel/>
    </Grid.DataContext>
    <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBox Width="200" FontSize="24" Text="{Binding Header, Mode=TwoWay}" 
                 IsReadOnly="True" TextWrapping="Wrap" MaxHeight="200" />
        <ScrollViewer VerticalScrollBarVisibility="Auto" MaxHeight="200" Width="200" Background="White">
            <ItemsControl ItemsSource="{Binding Items}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <CheckBox Content="{Binding Text}" 
                          FontSize="24" 
                          Foreground="Black"
                          IsChecked="{Binding IsChecked, Mode=TwoWay}" 
                          IsThreeState="False" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </StackPanel>
</Grid>

Here's your code-behind:

public class Item : BindableBase
{
    public string Text { get; set; }

    bool _IsChecked = default(bool);
    public bool IsChecked { get { return _IsChecked; } set { SetProperty(ref _IsChecked, value); } }
}

public class ViewModel : BindableBase
{
    public ViewModel()
    {
        _Items = new ObservableCollection<Item>(Enumerable.Range(1, 10)
            .Select(x => new Item()
            {
                Text = string.Format("Item {0}", x),
                IsChecked = (x < 4) ? true : false,
            }));
        foreach (var item in this.Items)
            item.PropertyChanged += (s, e) => base.RaisePropertyChanged("Header");
    }

    public string Header
    {
        get
        {
            var array = this.Items
                .Where(x => x.IsChecked)
                .Select(x => x.Text).ToArray();
            if (!array.Any())
                return "None";
            return string.Join("; ", array);
        }
    }

    ObservableCollection<Item> _Items;
    public ObservableCollection<Item> Items { get { return _Items; } }
}

public abstract class BindableBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void SetProperty<T>(ref T storage, T value, 
        [System.Runtime.CompilerServices.CallerMemberName] String propertyName = null)
    {
        if (!object.Equals(storage, value))
        {
            storage = value;
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    protected void RaisePropertyChanged([System.Runtime.CompilerServices.CallerMemberName] String propertyName = null)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Best of luck!



回答2:

Your all code is correct, except one thing, that's data binding of CheckBox in ComboBox's DataTemplate. You don't need to use ElementName=thisUC

Incorrect

<CheckBox Content="{Binding Title}" Foreground="Black" 
    IsChecked="{Binding ElementName=thisUC, Path=IsSelected, Mode=TwoWay}"
    Click="CheckBox_Click" />

Correct

<CheckBox Content="{Binding Title}" Foreground="Black" Click="CheckBox_Click"
    IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"/>


标签： windows-8 windows-store-apps winrt-xaml
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~