今天主要说一说公司组织架构这一块,需求是在搜索框输入员工姓名或者首字母,搜索框实时自动匹配到存在的员工,选中某一员工后在组织结构层级树中定位到该员工,就类似于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>