WPF 自定义下拉框控件，实现分列显示和模糊查询功能

本文介绍如何创建一个自定义的下拉框控件 MyComboBox，该控件支持分列显示和模糊查询功能，并提供了完整的代码示例。

1. 创建自定义控件类

首先，我们需要创建一个自定义控件类 MyComboBox，继承自 ComboBox。在这个类中，我们需要添加一些属性和方法来实现我们的需求。

添加一个分列属性

我们需要添加一个属性来设置下拉框中的列数。这个属性可以是一个整数类型，表示下拉框中要显示的列数。

public int ColumnCount { get; set; }

添加一个模糊查询属性

我们需要添加一个属性来设置是否启用模糊查询功能。这个属性可以是一个布尔类型，表示是否启用模糊查询功能。

public bool AllowFuzzyQuery { get; set; }

添加一个模糊查询方法

我们需要添加一个方法来实现模糊查询功能。这个方法可以接收一个字符串参数，表示要查询的关键字。在这个方法中，我们可以使用 LINQ 查询来实现模糊查询功能。

public void FuzzyQuery(string keyword)
{
    if (string.IsNullOrEmpty(keyword))
    {
        ItemsSource = _dataSource;
        IsDropDownOpen = true;
        return;
    }

    var query = from item in _dataSource
                where item.Contains(keyword)
                select item;

    ItemsSource = query.ToList();
    IsDropDownOpen = true;
}

添加一个数据源属性

我们需要添加一个属性来设置下拉框的数据源。这个属性可以是一个字符串列表，表示下拉框中要显示的数据。

private List<string> _dataSource;
public List<string> DataSource
{
    get { return _dataSource; }
    set
    {
        _dataSource = value;
        ItemsSource = _dataSource;
    }
}

重写下拉框的模板

我们需要重写下拉框的模板，以实现分列显示。在模板中，我们可以使用 StackPanel 和 WrapPanel 来实现分列显示。

<ControlTemplate TargetType="{x:Type local:MyComboBox}">
    <Grid>
        <ToggleButton x:Name="ToggleButton"
                      Template="{StaticResource ComboBoxToggleButton}"
                      Grid.Column="2"
                      Focusable="false"
                      IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                      ClickMode="Press"/>

        <ContentPresenter x:Name="ContentSite"
                          IsHitTestVisible="False"
                          Content="{TemplateBinding SelectionBoxItem}"
                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                          Margin="3,3,23,3"
                          VerticalAlignment="Center"
                          HorizontalAlignment="Left"/>

        <Popup x:Name="Popup"
               Placement="Bottom"
               IsOpen="{TemplateBinding IsDropDownOpen}"
               AllowsTransparency="True"
               Focusable="False"
               PopupAnimation="Slide">

            <Grid x:Name="DropDown"
                  SnapsToDevicePixels="True"
                  MinWidth="{TemplateBinding ActualWidth}"
                  MaxHeight="{TemplateBinding MaxDropDownHeight}">

                <Border x:Name="DropDownBorder"
                        Background="{StaticResource WindowBackgroundBrush}"
                        BorderThickness="1"
                        BorderBrush="{StaticResource SolidBorderBrush}"/>

                <ScrollViewer Margin="4,6,4,6"
                              SnapsToDevicePixels="True">

                    <StackPanel Orientation="Horizontal">
                        <WrapPanel Orientation="Vertical">
                            <ItemsPresenter/>
                        </WrapPanel>
                    </StackPanel>

                </ScrollViewer>

            </Grid>

        </Popup>

    </Grid>
</ControlTemplate>

2. 完整代码

下面是完整的 MyComboBox 类代码：

public class MyComboBox : ComboBox
{
    static MyComboBox()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(MyComboBox), new FrameworkPropertyMetadata(typeof(MyComboBox)));
    }

    public int ColumnCount { get; set; }
    public bool AllowFuzzyQuery { get; set; }

    private List<string> _dataSource;
    public List<string> DataSource
    {
        get { return _dataSource; }
        set
        {
            _dataSource = value;
            ItemsSource = _dataSource;
        }
    }

    public void FuzzyQuery(string keyword)
    {
        if (string.IsNullOrEmpty(keyword))
        {
            ItemsSource = _dataSource;
            IsDropDownOpen = true;
            return;
        }

        var query = from item in _dataSource
                    where item.Contains(keyword)
                    select item;

        ItemsSource = query.ToList();
        IsDropDownOpen = true;
    }
}

3. 使用示例

下面是一个使用 MyComboBox 的示例：

<local:MyComboBox ColumnCount="3" AllowFuzzyQuery="True" DataSource="{Binding Data}">
    <local:MyComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"/>
        </DataTemplate>
    </local:MyComboBox.ItemTemplate>
</local:MyComboBox>

在这个示例中，我们设置了 ColumnCount 属性为 3，表示下拉框中要显示 3 列数据。同时，我们还设置了 AllowFuzzyQuery 属性为 True，表示启用模糊查询功能。最后，我们使用了数据绑定，将数据源绑定到了一个名为 Data 的属性上。

4. 使用步骤

在项目中创建一个 MyComboBox 类，并将其继承自 ComboBox。
在 MyComboBox 类中添加 ColumnCount、AllowFuzzyQuery、DataSource 和 FuzzyQuery 等属性和方法。
在 MyComboBox 类中重写下拉框的模板，以实现分列显示。
在 XAML 中使用 MyComboBox 控件，并设置其属性和数据源。
在需要使用模糊查询功能时，调用 MyComboBox 的 FuzzyQuery 方法即可。

希望本文能帮助您了解如何创建一个自定义的下拉框控件，并实现分列显示和模糊查询功能。