silverlight 自定义资源样式重画AutoCompleteTextBox，使其包含一个黑三角按钮

silverlight 自定义资源样式重画AutoCompleteTextBox，使其包含一个黑三角按钮，并且可以点击之，可以显示所有绑定的数据，效果如下：

一、新建一个用户控件或窗体，写入以下代码：【不过这个有一个问题，我还没有解决，本来想把这个代码放在一个资源字典中，但是就不能实现那个黑三角的事件，我使用触发器，VisualState 都不行，虽然程序没问题，但得不到该要的效果，既Click或MouseOver那个黑三角都没反应，如果这个有谁做出来，跟我说一声，相互学习。所以就这个样式放在使用autocompletetextboxd的UserControl. Resources中】

 1 <UserControl.Resources>
 2         <Style  TargetType="sdk:AutoCompleteBox" x:Key="autoCompteBoxStyle">
 3             <!-- ComboBox should not perform text completion by default -->
 4             <Setter Property="IsTextCompletionEnabled" Value="False"/>
 5             <!-- The minimum prefix length should be 0 for combo box scenarios -->
 6             <Setter Property="MinimumPrefixLength" Value="0"/>
 7             <!-- Regular template values -->
 8             <Setter Property="Background" Value="#FF1F3B53"/>
 9             <Setter Property="IsTabStop" Value="False"/>
10             <Setter Property="FontSize" Value="14"/>
11             <Setter Property="HorizontalContentAlignment" Value="Left"/>
12             <Setter Property="BorderBrush">
13                 <Setter.Value>
14                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
15                         <GradientStop Color="#FFA3AEB9" Offset="0"/>
16                         <GradientStop Color="#FF8399A9" Offset="0.375"/>
17                         <GradientStop Color="#FF718597" Offset="0.375"/>
18                         <GradientStop Color="#FF617584" Offset="1"/>
19                     </LinearGradientBrush>
20                 </Setter.Value>
21             </Setter>
22             <Setter Property="Template">
23                 <Setter.Value>
24                     <ControlTemplate TargetType="sdk:AutoCompleteBox">
25                         <Grid Margin="{TemplateBinding Padding}">
26                             <TextBox IsTabStop="True" x:Name="Text" Style="{TemplateBinding TextBoxStyle}" Margin="0"/>
27 <!—以下是在autocompletetextbox中加入一个toggleBuuton,并且重画其形状，让其成为一个黑色三角形【当然大家可以依照这个画一个其他形状的，颜色不一样之类的】-->
28 <!—注意这个有一定义了一个事件【Click="DropDownToggle_Click">】，这个事件很重要，不然画的这个按钮就没有用，只是一个装饰。-->
29                             <ToggleButton HorizontalAlignment="Right" VerticalAlignment="Center" Style="{StaticResource ComboToggleButton}" Margin="0" HorizontalContentAlignment="Center" Background="{TemplateBinding Background}" BorderThickness="0" Height="16" Width="16"  Click="DropDownToggle_Click">
30                                 <ToggleButton.Content>
31                                     <Path x:Name="BtnArrow" Height="4" Width="8" Stretch="Uniform" Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z " Margin="0,0,6,0" HorizontalAlignment="Right">
32                                         <Path.Fill>
33                                             <SolidColorBrush x:Name="BtnArrowColor" Color="#FF333333"/>
34                                         </Path.Fill>
35                                     </Path>
36                                 </ToggleButton.Content>
37 
38                             </ToggleButton>
39                             <Popup x:Name="Popup" >
40                                 <Border x:Name="PopupBorder" HorizontalAlignment="Stretch" Opacity="1.0" BorderThickness="0" CornerRadius="3">
41                                     <Border.RenderTransform>
42                                         <TranslateTransform X="2" Y="2"/>
43                                     </Border.RenderTransform>
44                                     <Border.Background>
45                                         <SolidColorBrush Color="#11000000"/>
46                                     </Border.Background>
47                                     <Border HorizontalAlignment="Stretch" BorderThickness="0" CornerRadius="3">
48                                         <Border.Background>
49                                             <SolidColorBrush Color="#11000000"/>
50                                         </Border.Background>
51                                         <Border.RenderTransform>
52                                             <TransformGroup>
53                                                 <ScaleTransform/>
54                                                 <SkewTransform/>
55                                                 <RotateTransform/>
56                                                 <TranslateTransform X="-1" Y="-1"/>
57                                             </TransformGroup>
58                                         </Border.RenderTransform>
59                                         <Border HorizontalAlignment="Stretch" Opacity="1.0" Padding="2" BorderThickness="2" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
60                                             <Border.RenderTransform>
61                                                 <TransformGroup>
62                                                     <ScaleTransform/>
63                                                     <SkewTransform/>
64                                                     <RotateTransform/>
65                                                     <TranslateTransform X="-2" Y="-2"/>
66                                                 </TransformGroup>
67                                             </Border.RenderTransform>
68                                             <Border.Background>
69                                                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
70                                                     <GradientStop Color="#FFDDDDDD" Offset="0"/>
71                                                     <GradientStop Color="#AADDDDDD" Offset="1"/>
72                                                 </LinearGradientBrush>
73                                             </Border.Background>
74                                             <ListBox x:Name="Selector" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" MaxHeight="200" ItemTemplate="{TemplateBinding ItemTemplate}"   />
75                                         </Border>
76                                     </Border>
77                                 </Border>
78                             </Popup>
79                         </Grid>
80                     </ControlTemplate>
81                 </Setter.Value>
82             </Setter>
83         </Style>
84     </UserControl.Resources>

　　看完代码，大家可以看到其中包含定义图片边框的样式的代码，以及一个用来显示数据的ListBox.

二、就是在定义控件的地方添加引用【Style="{StaticResource autoCompteBoxStyle}"  】，具体如下：

 <sdk:AutoCompleteBox Height="28" Name="autoCompleteBoxEquipmentName" Width="180" IsTextCompletionEnabled="False"  MinimumPrefixLength="0" MinimumPopulateDelay="200"  HorizontalAlignment="Left"  Style="{StaticResource autoCompteBoxStyle}"  
                          Margin="5,0,50,0"  FilterMode="Custom" />

　　三、注册事件

1 autoCompleteBoxEquipmentName.Populating += autoCompleteBoxEquipmentName_Populating;
2 autoCompleteBoxEquipmentName.TextFilter += Search;

　　四、后台代码，我把一些我认为重要的都有一些注释。【也许学的还有很多不明白的，大家可以指正，相互学习】，好了，且看代码：

 1 //当然这个事件的代码不只有一句话，大家根据自己的数据源进行绑定就行，主要是通过已经输入到autocompletetextbox中的数据去数据库中模糊匹配查找数据【既sql中使用 Like ‘%InputString%’,当然使用LinQ语句也类似】
 2 void autoCompleteBoxEquipmentName_Populating(object sender, PopulatingEventArgs e)
 3 {
 4 autoCompleteBoxEquipmentName.ItemsSource = 数据源【比如：List<string>】
 5 }
 6 //autocompletetextbox的过滤条件。
 7 bool Search(string search, string value)
 8         {
 9             return value.Contains(search);
10         }
11 //点击那个黑三角的事件，其实就是让autocompletetextbox的下拉框显示出来，因为数据其实已经绑定，并对这里是用来toggleButton的特性。
12 private void DropDownToggle_Click(object sender, RoutedEventArgs e)
13         { 
14             autoCompleteBoxEquipmentName.IsDropDownOpen = !autoCompleteBoxEquipmentName.IsDropDownOpen;
15         }

　　五、做得肯定存在些不足以及bug,欢迎大家指正，共同进步。