以下代码整理成完整代码并且使用步骤 首先我们需要创建一个自定义控件类继承自ComboBox。在这个类中我们需要添加一些属性和方法来实现我们的需求。1 添加一个分列属性我们需要添加一个属性来设置下拉框中的列数。这个属性可以是一个整数类型表示下拉框中要显示的列数。csharppublic int ColumnCount get; set; 2 添加一个模糊查询属性我们需要添加一个属性来设置是否启用模
使用步骤:
-
在项目中创建一个 MyComboBox 类,并将其继承自 ComboBox。
-
在 MyComboBox 类中添加 ColumnCount、AllowFuzzyQuery、DataSource 和 FuzzyQuery 等属性和方法。
-
在 MyComboBox 类中重写下拉框的模板,以实现分列显示。
-
在 XAML 中使用 MyComboBox 控件,并设置其属性和数据源。
-
在需要使用模糊查询功能时,调用 MyComboBox 的 FuzzyQuery 方法即可。
完整代码:
MyComboBox.cs
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;
}
}
Generic.xaml
<Style TargetType="{x:Type local:MyComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<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"
IsItemsHost="True"
ItemWidth="{Binding ActualWidth, ElementName=DropDown, Mode=OneWay}">
<WrapPanel.Resources>
<Style TargetType="ContentPresenter">
<Setter Property="Margin" Value="2"/>
</Style>
</WrapPanel.Resources>
</WrapPanel>
</StackPanel>
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
使用示例:
<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 的属性上。在需要使用模糊查询功能时,调用 MyComboBox 的 FuzzyQuery 方法即可
原文地址: https://www.cveoy.top/t/topic/c3t5 著作权归作者所有。请勿转载和采集!