首页 > 代码库 > 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框
高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框
上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理
这一篇详细说下拉框的实现原理
先上最终效果图
一开始其实只是想给下拉框加一个placeholder效果，让下拉框在未选择未输入时显示一个提示字符串。由于Background对ComboBox无效，所以直接通过Background来实现是不行了。需要重新写ComboBox的模板，也就是Template，自定义一个模板来实现这个结果。又看了一下QQ的下拉框，这玩意不自定义也难以实现，所以就干脆自定义了。
先上代码，先是ComboBox，再是ComboBoxToggleButton，最后是ComboBoxItem
1 <Style TargetType="{x:Type ComboBox}"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="ComboBox"> 5 <Grid Margin="0"> 6 <Border 7 BorderThickness="1" 8 BorderBrush="{TemplateBinding BorderBrush}" 9 CornerRadius="4,4,0,0" >10 <Grid>11 <Grid.ColumnDefinitions>12 <ColumnDefinition></ColumnDefinition>13 <ColumnDefinition Width="20" x:Name="colArrow"></ColumnDefinition>14 </Grid.ColumnDefinitions>15 <ToggleButton 16 Name="ToggleButton" 17 Grid.Column="1" 18 Focusable="false"19 Style="{StaticResource ComboBoxToggleButton}" 20 IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"21 ClickMode="Press">22 </ToggleButton>23 <TextBox x:Name="PART_EditableTextBox"24 BorderThickness="0"25 VerticalAlignment="Center">26 <TextBox.Resources>27 <VisualBrush x:Key="tbPlaceHolder" Stretch="None" AlignmentX="Left">28 <VisualBrush.Visual>29 <Label Content="CC号码/用户名/邮箱" Foreground="Gray" Padding="5,0,0,0"></Label>30 </VisualBrush.Visual>31 </VisualBrush>32 </TextBox.Resources>33 <TextBox.Style>34 <Style TargetType="TextBox">35 <Style.Triggers>36 <Trigger Property="Text" Value="{x:Null}">37 <Setter Property="Background" Value="{DynamicResource tbPlaceHolder}">38 </Setter>39 </Trigger>40 <Trigger Property="Text" Value="">41 <Setter Property="Background" Value="{DynamicResource tbPlaceHolder}">42 </Setter>43 </Trigger>44 </Style.Triggers>45 </Style>46 </TextBox.Style>47 </TextBox>48 </Grid>49 </Border>50 <Popup 51 Placement="Bottom"52 IsOpen="{TemplateBinding IsDropDownOpen}"53 AllowsTransparency="True" 54 Focusable="False"55 PopupAnimation="Slide">56 <Grid57 Name="DropDown"58 Width="{TemplateBinding ActualWidth}"59 MaxHeight="{TemplateBinding MaxDropDownHeight}">60 <Border 61 x:Name="DropDownBorder"62 BorderThickness="1"63 BorderBrush="{TemplateBinding BorderBrush}">64 <ScrollViewer>65 <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />66 </ScrollViewer>67 </Border>68 </Grid>69 </Popup>70 </Grid>83 </ControlTemplate>84 </Setter.Value>85 </Setter>86 </Style>
有没有觉得头晕？反正我是感觉有点晕吧。我也不是凭空重写出来的，是找的别人写好的示例代码改的，别人的示例代码那可叫真看着晕。现在改成这样已经简单很多了
从上到下，一点点来
第4行，给ComboBox重新定义控件模板，只在当前页面生效，然后下面是模板的内容
第6行，Border用于实现圆角
第10行，好戏开始。这个Grid定义了两列，第一列用于存放下拉框选择的文本，第二列用于存放下拉的箭头
第15行，开始定义下拉的箭头。ToggleButton是用来作为点击后弹出下拉框的按钮，但具体是什么东东？其实自己建一个wpf项目拉一个ToggleButton出来看看就明白了。它跟复选框类似，一般情况有两个值，一个是Checked，一个是UnChecked，但跟复选框不同的是，它只是一个按钮，没有对勾，并且你点击它之后，如果它的状态是Checked，那么它就不会弹起来了，再点一下才能弹起来，想想这个是不是跟下拉框的功能有点相似？下面的Style暂时不说，因为那个是属于ComboBoxToggleButton那块的
第20行，IsChecked，关键的地方。这个值绑定到了一个叫IsDropDownOpen的属性，是双向绑定，绑定的对象是使用这个控件的控件。这什么意思呢？谁会使用这个控件呢？那其实就是ComboBox（TemplatedParent这个属性其实我没太理解透，可能一时间也难以理解透），而如果下拉框是打开的，那么也就意味着isChecked会为True，那么ToggleButton就会是选中的状态。反过来，如果下拉框未打开，那么IsChecked就是未选中状态，这个时候点击ToggleButton，那么IsChecked会为True，由于是双向绑定，所以IsDropDownOpen也会为True，下拉框就自然打开了。不得不说WPF真心强大。
第23行，这个TextBox是用于存放选择后的结果的，也是用于实现可编辑下拉框的。然后嘛，placeholder效果就在这儿实现了。
第50行，Popup，用于弹出一个控件，这里的{TemplateBinding IsDropDownOpen}其实跟上面说的TemplatedParent是一个意思，把IsOpen绑定到了应用了该控件的控件的IsDropDownOpen属性
第65行，StackPanel用于存放下拉框中的每一项，IsItemsHost表示这个控件是否用于Item的容器（好吧其实这个地方我短时间理解不了，只能这么去理解）
OK，这个完毕，下一个，ComboBoxToggleButton
1 <Style x:Key="ComboBoxToggleButton" TargetType="ToggleButton"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="ToggleButton"> 5 <Grid> 6 <Grid.ColumnDefinitions> 7 <ColumnDefinition /> 8 </Grid.ColumnDefinitions> 9 <Path 10 Panel.ZIndex="1"11 x:Name="Arrow"12 Grid.Column="1" 13 Fill="#B1B1B1"14 Stroke="#B1B1B1"15 HorizontalAlignment="Center"16 VerticalAlignment="Center"17 Data="M0,0L3,3 6,0z">18 <Path.RenderTransform>19 <ScaleTransform x:Name="stfArrow" CenterY="2"></ScaleTransform>20 </Path.RenderTransform>21 </Path>22 <TextBlock Panel.ZIndex="0"></TextBlock>23 </Grid>37 <!--</Grid>-->38 <ControlTemplate.Triggers>45 <Trigger Property="IsMouseOver" Value="True">46 <Setter TargetName="Arrow" Property="Fill" Value="Black"></Setter>47 <Setter TargetName="Arrow" Property="Stroke" Value="Black"></Setter>48 </Trigger>49 <EventTrigger RoutedEvent="Checked">50 <EventTrigger.Actions>51 <BeginStoryboard>52 <Storyboard>53 <DoubleAnimation 54 Duration="0:0:0.2" 55 Storyboard.TargetName="stfArrow"56 Storyboard.TargetProperty="ScaleY" From="1" 57 To="-1" />58 </Storyboard>59 </BeginStoryboard>60 </EventTrigger.Actions>61 </EventTrigger>62 <EventTrigger RoutedEvent="Unchecked">63 <EventTrigger.Actions>64 <BeginStoryboard>65 <Storyboard>66 <DoubleAnimation 67 Duration="0:0:0.2" 68 Storyboard.TargetName="stfArrow"69 Storyboard.TargetProperty="ScaleY" From="-1" 70 To="1" />71 <DoubleAnimation 72 Duration="0:0:0.2" 73 Storyboard.TargetName="stfArrow"74 Storyboard.TargetProperty="ScaleY" From="-1" 75 To="1" />76 </Storyboard>77 </BeginStoryboard>78 </EventTrigger.Actions>79 </EventTrigger>80 </ControlTemplate.Triggers>81 </ControlTemplate>82 </Setter.Value>83 </Setter>84 </Style>
很多重复的技术点就跳过
第9行，Path控件用于画出点击下拉框时的那个向下的箭头，其中的Data可能比较难以理解，推荐一篇文章：http://blog.csdn.net/johnsuna/article/details/1885597，我也是在这儿看懂的。
第18行，RenderTransform中的ScaleTransform用于旋转这个Path控件也就是箭头，ScaleTransform有一个属性ScaleY，改为-1时就会180度翻转，可以实现当下拉框被打开时箭头朝上的效果
第22行，呃··怎么不记得有这一行，可能没什么用吧，忽略掉
第45行，注册鼠标经过触发器，经过时把箭头变成黑色
第49行，注册Checked事件触发器，BeginStoryboard开始一段动画，Storyboard创建一个动画，DoubleAnimation创建两个值之间的过渡，TargetName指定给哪个控件应用这个过渡，TargetProperty指定给哪个属性应用，From和To就不用说了。下面的UnChecked跟上面类似。这个主要用于实现点击箭头时的翻转动画。
OK，下一部分
1 <Style TargetType="{x:Type ComboBoxItem}"> 2 <Setter Property="RenderTransform"> 3 <Setter.Value> 4 <ScaleTransform x:Name="stItem"></ScaleTransform> 5 </Setter.Value> 6 </Setter> 7 <Setter Property="Template"> 8 <Setter.Value> 9 <ControlTemplate TargetType="ComboBoxItem">10 <Grid Background="White" x:Name="spItem" Height="23">11 <Grid.ColumnDefinitions>12 <ColumnDefinition x:Name="colImage" Width="20"></ColumnDefinition>13 <ColumnDefinition></ColumnDefinition>14 <ColumnDefinition Width="30"></ColumnDefinition>15 </Grid.ColumnDefinitions>16 <Image Grid.Column="0" Margin="0,1" Source="{Binding Image}"></Image>17 <Label Grid.Column="1" HorizontalAlignment="Stretch" Content="{Binding CC}" Name="lblItem" VerticalContentAlignment="Center" FontSize="11" HorizontalContentAlignment="Left" Margin="0,1">18 </Label>19 <Image Cursor="Hand" ToolTip="删除该账号" x:Name="delImage" Visibility="Collapsed" Margin="10,0" Grid.Column="2" Width="9" HorizontalAlignment="Right" Source="Resources/images/deleteAccountNormal.png"></Image>20 </Grid>21 <ControlTemplate.Triggers>22 <EventTrigger RoutedEvent="ComboBoxItem.MouseEnter" SourceName="spItem">23 <EventTrigger.Actions>24 <BeginStoryboard>25 <Storyboard>26 <DoubleAnimation Storyboard.TargetName="spItem" Storyboard.TargetProperty="(Height)" From="23" To="40" Duration="0:0:0.20"></DoubleAnimation>27 <DoubleAnimation Storyboard.TargetName="lblItem" Storyboard.TargetProperty="FontSize" From="11" To="14" Duration="0:0:0.20"></DoubleAnimation>28 </Storyboard>29 </BeginStoryboard>30 </EventTrigger.Actions>31 </EventTrigger>32 <EventTrigger RoutedEvent="ComboBoxItem.MouseLeave" SourceName="spItem">33 <EventTrigger.Actions>34 <BeginStoryboard>35 <Storyboard>36 <DoubleAnimation Storyboard.TargetName="spItem" Storyboard.TargetProperty="(Height)" From="40" To="23" Duration="0:0:0.20"></DoubleAnimation>37 <DoubleAnimation Storyboard.TargetName="lblItem" Storyboard.TargetProperty="FontSize" From="14" To="11" Duration="0:0:0.20"></DoubleAnimation>38 </Storyboard>39 </BeginStoryboard>40 </EventTrigger.Actions>41 </EventTrigger>42 <Trigger Property="IsMouseOver" Value="true">44 <Setter TargetName="spItem" Property="Background" Value="#378FCF"></Setter>45 <Setter TargetName="lblItem" Property="Foreground" Value="White"></Setter>46 <Setter TargetName="colImage" Property="Width" Value="40"></Setter>47 <Setter TargetName="delImage" Property="Visibility" Value="Visible"></Setter>48 </Trigger>49 </ControlTemplate.Triggers>50 </ControlTemplate>51 </Setter.Value>52 </Setter>53 </Style>
终于到最后一个地方了，上面的代码定义了下拉框中的每一项的模板
第10行，定义了一个Grid，三列，第一列是图片，也就是用户头像，第二列是用户名，第三列是删除用户的图标
然后其实下面的就是一堆动画，这个跟上一部分的动画原理类似的。
这些模板定义好之后，直接拖个ComboBox出来就行了，不需要任何设置
这篇文章肯定会有技术错误，毕竟我对WPF并不是太熟，如果有的话请指正
高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框