上一篇高仿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 <Grid 57 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并不是太熟，如果有的話請指正

轉載于:https://www.cnblogs.com/wzxinchen/p/4266152.html

總結

以上是生活随笔為你收集整理的高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。