WPF/C#中的MuliSelectCombobox顯示所有選定專案的顯示名稱-有解無憂

組合框系結到自定義組合框專案串列，其中每個專案都包含一個復選框和一個影像。用戶可以單擊影像或復選框來選擇專案。

每個專案都包含一個相對影像路徑，即選擇狀態。視圖模型生成CustomCheckboxItems視圖然后系結到的串列。

現在我想將組合框中所有選定專案的顯示名稱顯示為 ...選定專案... 一起。我怎樣才能做到這一點？我試圖將 contentpresenter 附加到組合框但沒有成功，因為我不知道將它附加到哪里。撰寫控制模板也對我沒有幫助。

最后，組合框應該看起來像 WPF/C# 中的 MuliSelectCombobox 顯示所有選定專案的顯示名稱

CheckBoxItem.cs

public class CheckboxItem : ViewModelBase
{
    public CheckboxItem(string name, string imagePath)
    {
        DisplayName = name;
        ImagePath = imagePath;
        SelectItem = new DummyCommand();
    }

    public string ImagePath { get; }
    public string DisplayName { get; }
    public ICommand SelectItem { get; }

    private bool selected;
    public bool Selected
    {
        get => selected;
        set
        {
            selected = value;
            OnPropertyChanged();
            ItemSelectionChanged?.Invoke(this, new EventArgs());
        }
    }

    public event EventHandler ItemSelectionChanged;
}

主視圖模型.cs

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        Items = new ObservableCollection<CheckboxItem>
        {
            new CheckboxItem("smile", "/Images/Smiley.png"),
            new CheckboxItem("wink", "/Images/Wink.png"),
            new CheckboxItem("shocked", "/Images/Shocked.png"),
            new CheckboxItem("teeth", "/Images/Teeth.png"),
        };

        SelectedItems = (CollectionView)new CollectionViewSource { Source = Items }.View;
        SelectedItems.Filter = o => o is CheckboxItem item && item.Selected;

        foreach(var item in Items)
        {
            item.ItemSelectionChanged  = (_, _) => SelectedItems.Refresh();
        }

        // Set a (dummy) SelectedItem for the TemplateSelector to kick in onl oad.
        SelectedItem = Items.First();
    }

    public ObservableCollection<CheckboxItem> Items { get; }
    public CollectionView SelectedItems { get; }
    public CheckboxItem SelectedItem { get; }
}

組合框模板選擇器.cs

public class ComboBoxTemplateSelector : DataTemplateSelector
{
    public DataTemplate SelectedItemTemplate { get; set; }
    public DataTemplate DropdownItemsTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var itemToCheck = container;

        // Search up the visual tree, stopping at either a ComboBox or a ComboBoxItem (or null).
        // This will determine which template to use.
        while (itemToCheck is not null and not ComboBox and not ComboBoxItem)
            itemToCheck = VisualTreeHelper.GetParent(itemToCheck);

        // If you stopped at a ComboBoxItem, you're in the dropdown.
        return itemToCheck is ComboBoxItem ? DropdownItemsTemplate : SelectedItemTemplate;
    }
}

主視窗.xaml

<Window x:Class="WpfApp.MainWindow"
        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"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="MultiSelectComboBox" Height="350" Width="400">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <local:ComboBoxTemplateSelector x:Key="ComboBoxTemplateSelector">
            <local:ComboBoxTemplateSelector.SelectedItemTemplate>
                <DataTemplate>
                    <ListBox ItemsSource="{Binding DataContext.SelectedItems, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
                             BorderThickness="0" IsHitTestVisible="False" BorderBrush="Transparent" Background="Transparent" 
                             ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel Orientation="Horizontal"></WrapPanel>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ListBox.ItemTemplate>
                            <DataTemplate DataType="{x:Type local:CheckboxItem}">
                                <TextBlock Text="{Binding DisplayName}" />
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </DataTemplate>
            </local:ComboBoxTemplateSelector.SelectedItemTemplate>
            <local:ComboBoxTemplateSelector.DropdownItemsTemplate>
                <DataTemplate DataType="{x:Type local:CheckboxItem}">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Path=ImagePath}" Height="50">
                            <Image.InputBindings>
                                <MouseBinding Gesture="LeftClick" Command="{Binding SelectItem, Mode=OneWay}" />
                            </Image.InputBindings>
                        </Image>
                        <CheckBox VerticalAlignment="Center" VerticalContentAlignment="Center" Margin="20 0"
                                  IsChecked="{Binding Selected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" >
                            <TextBlock Text="{Binding DisplayName}" VerticalAlignment="Center" />
                        </CheckBox>
                    </StackPanel>
                </DataTemplate>
            </local:ComboBoxTemplateSelector.DropdownItemsTemplate>
        </local:ComboBoxTemplateSelector>
    </Window.Resources>
    <Grid>
        <ComboBox ItemsSource="{Binding Path=Items}"
                  SelectedItem="{Binding SelectedItem, Mode=OneTime}"
                  ItemTemplateSelector="{StaticResource ComboBoxTemplateSelector}"
                  Height="30" Width="200" Margin="0 30 0 0"
                  VerticalAlignment="Top" HorizontalAlignment="Center">
        </ComboBox>
    </Grid>
</Window>

ViewModel 已經包含一個逗號分隔的字串，其中包含所選專案。我如何更改組合框以使其表現得像這樣？

你可以換

<local:ComboBoxTemplateSelector.SelectedItemTemplate>
    <DataTemplate>
        <ListBox ItemsSource="{Binding DataContext.SelectedItems, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"
                         BorderThickness="0" IsHitTestVisible="False" BorderBrush="Transparent" Background="Transparent" 
                         ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"></WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate DataType="{x:Type local:CheckboxItem}">
                    <TextBlock Text="{Binding DisplayName}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </DataTemplate>
</local:ComboBoxTemplateSelector.SelectedItemTemplate>

和

<local:ComboBoxTemplateSelector.SelectedItemTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding DataContext.CommaSeperatedString, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" />
    </DataTemplate>
</local:ComboBoxTemplateSelector.SelectedItemTemplate>

您也可以不使用該CommaSeperatedString屬性，并在轉換器中結合CollectionView使用 Greg M 的string.Join方法：

<local:ComboBoxTemplateSelector.SelectedItemTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding DataContext.SelectedItems, 
                   RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}, 
                   Converter={StaticResource ItemsToCommaSeparatedStringConverter}}" />
    </DataTemplate>
</local:ComboBoxTemplateSelector.SelectedItemTemplate>

資源：

WrapPanel想法： CheckComboBox ：單擊選擇后如何防止組合框關閉？
使用不同的模板：我可以為 WPF ComboBox 中的選定專案使用與下拉部分中的專案不同的模板嗎？
過濾ItemsSource：自定義搜索組合框
笑臉： https ://pngimg.com/images/miscellaneous/smiley

uj5u.com熱心網友回復：

如果我理解正確：

您只想將所有選中的專案移動到組合框的頂部
您希望以逗號分隔的選定專案串列顯示在封閉的組合框中。

如果這是正確的，那么解決方案比您想象的要簡單得多。

所需要的只是：

  /// <summary>
  /// Sort the items in the list by selected
  /// </summary>
  private void cmb_DropDownOpened ( object sender, EventArgs e )
    => cmb.ItemsSource = CustomCheckBoxItems
      .OrderByDescending ( c => c.Selected )
      .ThenBy ( c => c.DisplayName );

  /// <summary>
  /// Display comma separated list of selected items
  /// </summary>
  private void cmb_DropDownClosed ( object sender, EventArgs e )
  {
    cmb.IsEditable = true;
    cmb.IsReadOnly = true;
    cmb.Text = string.Join ( ",", CustomCheckBoxItems.Where ( c => c.Selected )
         .OrderBy ( c => c.DisplayName )
         .Select ( c => c.DisplayName )
         .ToList () );
  }

解決方案的關鍵是每次打開組合時重新排序串列，您會呈現一個重新排序的串列。每次關閉時，您都會收集選擇并顯示。

完整的作業示例： 鑒于此 XAML：

<ComboBox Name="cmb" DropDownOpened="cmb_DropDownOpened">
  <ComboBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal">
        <CheckBox VerticalAlignment="Center" VerticalContentAlignment="Center" IsChecked="{Binding Selected, Mode=TwoWay}" >
          <TextBlock Text="{Binding DisplayName}" IsEnabled="False" VerticalAlignment="Center" />
        </CheckBox>
      </StackPanel>
    </DataTemplate>
  </ComboBox.ItemTemplate>
</ComboBox>

和這個類（洗掉了這個樣本的通知，因為不需要）

public class CustomCheckBoxItem
{
  public string Item { get; set; }

  private const string currentAssemblyName = "samplename";


  public CustomCheckBoxItem ( string item, string imagePath )
  {
    Item = item;
    try
    { ImagePath = "/"   currentAssemblyName   ";component/Images/"   imagePath; }
    catch ( Exception ) { }
  }

  public bool Selected { get; set; }

  public string ImagePath { get; }
  public string DisplayName => Item;

}

然后測驗我只是用這個：

  public ObservableCollection<CustomCheckBoxItem> CustomCheckBoxItems { get; set; }
    = new ObservableCollection<CustomCheckBoxItem> ()
    {
      new ( "Item 1", "image1.png" ),
      new ( "Item 2", "image2.png" ),
      new ( "Item 3", "image3.png" ),
      new ( "Item 4", "image4.png" ),
      new ( "Item 5", "image5.png" ),
      new ( "Item 6", "image6.png" ),
      new ( "Item 7", "image7.png" ),

    };

  public MainWindow ()
  {
    InitializeComponent ();

    cmb.ItemsSource = CustomCheckBoxItems;
  }
 
  /// <summary>
  /// Sort the items in the list by selected
  /// </summary>
  private void cmb_DropDownOpened ( object sender, EventArgs e )
    => cmb.ItemsSource = CustomCheckBoxItems
      .OrderByDescending ( c => c.Selected )
      .ThenBy ( c => c.DisplayName );

  /// <summary>
  /// Display comma separated list of selected items
  /// </summary>
  private void cmb_DropDownClosed ( object sender, EventArgs e )
  {
    cmb.IsEditable = true;
    cmb.IsReadOnly = true;
    cmb.Text = string.Join ( ",", CustomCheckBoxItems.Where ( c => c.Selected )
         .OrderBy ( c => c.DisplayName )
         .Select ( c => c.DisplayName )
         .ToList () );
  }

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/461949.html

標籤：C＃ wpf xml 组合框

上一篇：不能在網格中使用ObservableCollection？

下一篇：Htaccess添加允許的php檔案