WPF TreeView大数据量多层级搜索定位

今天主要说一说公司组织架构这一块,需求是在搜索框输入员工姓名或者首字母,搜索框实时自动匹配到存在的员工,选中某一员工后在组织结构层级树中定位到该员工,就类似于PC版QQ的搜索框。
综上,我们涉及到的控件主要有两个:1.搜索框 2.TreeView
了解WPF的同学肯定立马会想到这个搜索框应该用AutoCompleteBox来做了,没错,我们先通过NuGet引入WPFToolkit,然后在对应的xaml页面引入命名空间:
xmlns:tookit=“clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit”

下来就可以使用了,

 <tookit:AutoCompleteBox  x:Name="searchControl"
			                    MinimumPopulateDelay="100"
			                    ValueMemberPath="Search"
			                    FilterMode="Custom"
			                    DropDownClosing="SearchControl_DropDownClosing"
                                Style="{DynamicResource AutoCompleteBoxStyle1}">
                <tookit:AutoCompleteBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Search}"/>
                    </DataTemplate>
                </tookit:AutoCompleteBox.ItemTemplate>
 </tookit:AutoCompleteBox>

我这边赋值了3个属性1个事件:
MinimumPopulateDelay=“100”//用户停止输入后多久触发自动匹配,单位毫秒
ValueMemberPath=“Search”//后台对应的关键词属性,即根据实体中的“Search”字段来匹配
FilterMode=“Custom”//自定义过滤模式,需后台代码支持
DropDownClosing=“SearchControl_DropDownClosing”//在这个事件里处理关键词匹配

遗憾的是tookit:AutoCompleteBox没有水印功能,我们只好自己实现一下,眼尖的同学肯定已经看到AutoCompleteBoxStyle1这个样式了:

  <Style x:Key="AutoCompleteBoxStyle1" TargetType="{x:Type tookit:AutoCompleteBox}">
            <Setter Property="IsTabStop" Value="True"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="MinWidth" Value="45"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type tookit:AutoCompleteBox}">
                        <Border CornerRadius="12 12 0 0"  Background="#65D1DF">
                            <Grid Opacity="{TemplateBinding Opacity}" >
                                <Grid>
                             
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值