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

2020-12-17 11:23发布

站内文章 / 后端开发

742 0

我欲成王，谁敢阻挡

女 | 书童

私信

问题:

如下图样式：

回答1:

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