WPF 如何实现多项选择下拉框

[已解决问题] 解决于 2020-12-17 11:46

如下图样式：

wpf

小七& | 菜鸟二级 | 园豆：218
提问于：2020-12-14 16:46

< >

最佳答案

            <!--<ContentPresenter x:Name="contentPresenter"
                              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                              Content="{TemplateBinding SelectionBoxItem}"
                              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                              ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              IsHitTestVisible="false"
                              Margin="{TemplateBinding Padding}"
                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />-->
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="HasDropShadow"
                     SourceName="PART_Popup"
                     Value="true">
                <Setter Property="Margin"
                        TargetName="shadow"
                        Value="0,0,5,5" />
                <Setter Property="Color"
                        TargetName="shadow"
                        Value="#71000000" />
            </Trigger>
            <Trigger Property="HasItems"
                     Value="false">
                <Setter Property="Height"
                        TargetName="dropDownBorder"
                        Value="95" />
            </Trigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsGrouping"
                               Value="true" />
                    <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping"
                               Value="false" />
                </MultiTrigger.Conditions>
                <Setter Property="ScrollViewer.CanContentScroll"
                        Value="false" />
            </MultiTrigger>
            <Trigger Property="ScrollViewer.CanContentScroll"
                     SourceName="DropDownScrollViewer"
                     Value="false">
                <Setter Property="Canvas.Top"
                        TargetName="opaqueRect"
                        Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}" />
                <Setter Property="Canvas.Left"
                        TargetName="opaqueRect"
                        Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style x:Key="ComboBoxStyle1"
           TargetType="{x:Type ComboBox}">
        <Setter Property="FocusVisualStyle"
                Value="{StaticResource FocusVisual1}" />
        <Setter Property="Background"
                Value="{StaticResource ComboBox.Static.Background}" />
        <Setter Property="BorderBrush"
                Value="{StaticResource ComboBox.Static.Border}" />
        <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
                Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
                Value="Auto" />
        <Setter Property="Padding"
                Value="6,3,5,3" />
        <Setter Property="ScrollViewer.CanContentScroll"
                Value="true" />
        <Setter Property="ScrollViewer.PanningMode"
                Value="Both" />
        <Setter Property="Stylus.IsFlicksEnabled"
                Value="False" />
        <Setter Property="Template"
                Value="{StaticResource ComboBoxTemplate}" />
        <Style.Triggers>
            <Trigger Property="IsEditable"
                     Value="true">
                <Setter Property="IsTabStop"
                        Value="false" />
                <Setter Property="Padding"
                        Value="2" />
                <Setter Property="Template"
                        Value="{StaticResource ComboBoxEditableTemplate}" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <DataTemplate x:Key="ListBoxItemTemplate1">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Content}" />
            <CheckBox Style="{DynamicResource CheckBoxStyle1}"
                      IsChecked="{Binding Selected}" />
        </StackPanel>
    </DataTemplate>
    <ItemsPanelTemplate x:Key="ListBoxItemsPanel1">
        <WrapPanel Orientation="Horizontal"
                   IsItemsHost="True" />
    </ItemsPanelTemplate>
</Window.Resources>
<Grid x:Name="grid">
    <Grid.DataContext>
        <local:ViewModel>
            <local:ViewModel.Data>
                <local:ComboxItemModel Content="111" />
                <local:ComboxItemModel Content="222" />
                <local:ComboxItemModel Content="333" />
            </local:ViewModel.Data>
        </local:ViewModel>
    </Grid.DataContext>
    <ComboBox Style="{DynamicResource ComboBoxStyle1}"
              ItemTemplate="{DynamicResource ComboBoxItemTemplate1}"
              x:Name="cb"
              HorizontalAlignment="Left"
              Margin="492,53,0,0"
              VerticalAlignment="Top"
              Width="250"
              ItemsSource="{Binding Data}">
    </ComboBox>

</Grid>

</Window>

public class ComboxItemModel : INotifyPropertyChanged
{
private string content;
public string Content
{
get => content;
set
{
content = value;
Notify(nameof(Content));
}
}

    private bool selected;
    public bool Selected
    {
        get => selected;
        set
        {
            selected = value;
            Notify(nameof(Selected));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void Notify(string propertyName)
    {
        PropertyChangedEventHandler handler = this.PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class ViewModel
{
public ObservableCollection<ComboxItemModel> Data { get; } = new ObservableCollection<ComboxItemModel>();

    public ObservableCollection<ComboxItemModel> Selected { get; } = new ObservableCollection<ComboxItemModel>();
}

public MainWindow()
{
InitializeComponent();
if(grid.DataContext is ViewModel viewModel)
{
foreach (var item in viewModel.Data)
{
item.PropertyChanged += (s, e) =>
{
if(s is ComboxItemModel model)
{
if (model.Selected)
{
viewModel.Selected.Add(model);
}
else
{
viewModel.Selected.Remove(model);
}
}
};
}
}
}

把CheckBox换成两张图，Source和Selected绑定，配合值转换器

奖励园豆：5

一个小萌德 | 菜鸟二级 |园豆：207 | 2020-12-14 22:29

大佬，关注了

猝不及防 | 园豆：2878 (老鸟四级) | 2020-12-15 09:30

页面报了好多错误

小七& | 园豆：218 (菜鸟二级) | 2020-12-15 10:41

@猝不及防: 你用上面的代码实现了吗

小七& | 园豆：218 (菜鸟二级) | 2020-12-15 10:47

@小七&: 没弄，mark了一下

猝不及防 | 园豆：2878 (老鸟四级) | 2020-12-15 10:48

@小七&: 我觉得你这个不是如何实现的问题，是设计的问题，正常来说不会combox多选的，
combox也不是做这个的，换成几个checkbox简单直观

猝不及防 | 园豆：2878 (老鸟四级) | 2020-12-15 10:49

@小七&: 链接: https://pan.baidu.com/s/17WfqcghicQ6bLORZrfHdqA 提取码: iqyq
项目在这
netcoreapp3.1项目

一个小萌德 | 园豆：207 (菜鸟二级) | 2020-12-15 18:09

@一个小萌德: 好的谢谢

小七& | 园豆：218 (菜鸟二级) | 2020-12-16 09:24

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

WPF 如何实现多项选择下拉框

欢迎，请先登录或者注册。