WPF 自定义一个下拉框类下拉框里有分列输入框能模糊查询并且把模糊查询的显示在下拉框可以有几万行数据注释和使用
首先,我们需要创建一个自定义控件类,继承自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>
- 完整代码
下面是完整的 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;
}
}
- 使用示例
下面是一个使用 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 的属性上
原文地址: http://www.cveoy.top/t/topic/c3s9 著作权归作者所有。请勿转载和采集!