网站设计与制作培训班,短网址怎么生成,wordpress采集mp4,wordpress主题雪人yeti1.9.2上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果#xff0c;让下拉框在未选择未输入时显示一个提示字符串。由于Background对ComboBox无效#xff0…上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果让下拉框在未选择未输入时显示一个提示字符串。由于Background对ComboBox无效所以直接通过Background来实现是不行了。需要重新写ComboBox的模板也就是Template自定义一个模板来实现这个结果。又看了一下QQ的下拉框这玩意不自定义也难以实现所以就干脆自定义了。 先上代码先是ComboBox再是ComboBoxToggleButton最后是ComboBoxItem 1 Style TargetType{x:Type ComboBox}2 Setter PropertyTemplate3 Setter.Value4 ControlTemplate TargetTypeComboBox5 Grid Margin06 Border 7 BorderThickness18 BorderBrush{TemplateBinding BorderBrush}9 CornerRadius4,4,0,0
10 Grid
11 Grid.ColumnDefinitions
12 ColumnDefinition/ColumnDefinition
13 ColumnDefinition Width20 x:NamecolArrow/ColumnDefinition
14 /Grid.ColumnDefinitions
15 ToggleButton
16 NameToggleButton
17 Grid.Column1
18 Focusablefalse
19 Style{StaticResource ComboBoxToggleButton}
20 IsChecked{Binding PathIsDropDownOpen,ModeTwoWay,RelativeSource{RelativeSource TemplatedParent}}
21 ClickModePress
22 /ToggleButton
23 TextBox x:NamePART_EditableTextBox
24 BorderThickness0
25 VerticalAlignmentCenter
26 TextBox.Resources
27 VisualBrush x:KeytbPlaceHolder StretchNone AlignmentXLeft
28 VisualBrush.Visual
29 Label ContentCC号码/用户名/邮箱 ForegroundGray Padding5,0,0,0/Label
30 /VisualBrush.Visual
31 /VisualBrush
32 /TextBox.Resources
33 TextBox.Style
34 Style TargetTypeTextBox
35 Style.Triggers
36 Trigger PropertyText Value{x:Null}
37 Setter PropertyBackground Value{DynamicResource tbPlaceHolder}
38 /Setter
39 /Trigger
40 Trigger PropertyText Value
41 Setter PropertyBackground Value{DynamicResource tbPlaceHolder}
42 /Setter
43 /Trigger
44 /Style.Triggers
45 /Style
46 /TextBox.Style
47 /TextBox
48 /Grid
49 /Border
50 Popup
51 PlacementBottom
52 IsOpen{TemplateBinding IsDropDownOpen}
53 AllowsTransparencyTrue
54 FocusableFalse
55 PopupAnimationSlide
56 Grid
57 NameDropDown
58 Width{TemplateBinding ActualWidth}
59 MaxHeight{TemplateBinding MaxDropDownHeight}
60 Border
61 x:NameDropDownBorder
62 BorderThickness1
63 BorderBrush{TemplateBinding BorderBrush}
64 ScrollViewer
65 StackPanel IsItemsHostTrue KeyboardNavigation.DirectionalNavigationContained /
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的属性是双向绑定绑定的对象是使用这个控件的控件。这什么意思呢谁会使用这个控件呢那其实就是ComboBoxTemplatedParent这个属性其实我没太理解透可能一时间也难以理解透而如果下拉框是打开的那么也就意味着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:KeyComboBoxToggleButton TargetTypeToggleButton2 Setter PropertyTemplate3 Setter.Value4 ControlTemplate TargetTypeToggleButton5 Grid6 Grid.ColumnDefinitions7 ColumnDefinition /8 /Grid.ColumnDefinitions9 Path
10 Panel.ZIndex1
11 x:NameArrow
12 Grid.Column1
13 Fill#B1B1B1
14 Stroke#B1B1B1
15 HorizontalAlignmentCenter
16 VerticalAlignmentCenter
17 DataM0,0L3,3 6,0z
18 Path.RenderTransform
19 ScaleTransform x:NamestfArrow CenterY2/ScaleTransform
20 /Path.RenderTransform
21 /Path
22 TextBlock Panel.ZIndex0/TextBlock
23 /Grid
37 !--/Grid--
38 ControlTemplate.Triggers
45 Trigger PropertyIsMouseOver ValueTrue
46 Setter TargetNameArrow PropertyFill ValueBlack/Setter
47 Setter TargetNameArrow PropertyStroke ValueBlack/Setter
48 /Trigger
49 EventTrigger RoutedEventChecked
50 EventTrigger.Actions
51 BeginStoryboard
52 Storyboard
53 DoubleAnimation
54 Duration0:0:0.2
55 Storyboard.TargetNamestfArrow
56 Storyboard.TargetPropertyScaleY From1
57 To-1 /
58 /Storyboard
59 /BeginStoryboard
60 /EventTrigger.Actions
61 /EventTrigger
62 EventTrigger RoutedEventUnchecked
63 EventTrigger.Actions
64 BeginStoryboard
65 Storyboard
66 DoubleAnimation
67 Duration0:0:0.2
68 Storyboard.TargetNamestfArrow
69 Storyboard.TargetPropertyScaleY From-1
70 To1 /
71 DoubleAnimation
72 Duration0:0:0.2
73 Storyboard.TargetNamestfArrow
74 Storyboard.TargetPropertyScaleY From-1
75 To1 /
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 PropertyRenderTransform3 Setter.Value4 ScaleTransform x:NamestItem/ScaleTransform5 /Setter.Value6 /Setter7 Setter PropertyTemplate8 Setter.Value9 ControlTemplate TargetTypeComboBoxItem
10 Grid BackgroundWhite x:NamespItem Height23
11 Grid.ColumnDefinitions
12 ColumnDefinition x:NamecolImage Width20/ColumnDefinition
13 ColumnDefinition/ColumnDefinition
14 ColumnDefinition Width30/ColumnDefinition
15 /Grid.ColumnDefinitions
16 Image Grid.Column0 Margin0,1 Source{Binding Image}/Image
17 Label Grid.Column1 HorizontalAlignmentStretch Content{Binding CC} NamelblItem VerticalContentAlignmentCenter FontSize11 HorizontalContentAlignmentLeft Margin0,1
18 /Label
19 Image CursorHand ToolTip删除该账号 x:NamedelImage VisibilityCollapsed Margin10,0 Grid.Column2 Width9 HorizontalAlignmentRight SourceResources/images/deleteAccountNormal.png/Image
20 /Grid
21 ControlTemplate.Triggers
22 EventTrigger RoutedEventComboBoxItem.MouseEnter SourceNamespItem
23 EventTrigger.Actions
24 BeginStoryboard
25 Storyboard
26 DoubleAnimation Storyboard.TargetNamespItem Storyboard.TargetProperty(Height) From23 To40 Duration0:0:0.20/DoubleAnimation
27 DoubleAnimation Storyboard.TargetNamelblItem Storyboard.TargetPropertyFontSize From11 To14 Duration0:0:0.20/DoubleAnimation
28 /Storyboard
29 /BeginStoryboard
30 /EventTrigger.Actions
31 /EventTrigger
32 EventTrigger RoutedEventComboBoxItem.MouseLeave SourceNamespItem
33 EventTrigger.Actions
34 BeginStoryboard
35 Storyboard
36 DoubleAnimation Storyboard.TargetNamespItem Storyboard.TargetProperty(Height) From40 To23 Duration0:0:0.20/DoubleAnimation
37 DoubleAnimation Storyboard.TargetNamelblItem Storyboard.TargetPropertyFontSize From14 To11 Duration0:0:0.20/DoubleAnimation
38 /Storyboard
39 /BeginStoryboard
40 /EventTrigger.Actions
41 /EventTrigger
42 Trigger PropertyIsMouseOver Valuetrue
44 Setter TargetNamespItem PropertyBackground Value#378FCF/Setter
45 Setter TargetNamelblItem PropertyForeground ValueWhite/Setter
46 Setter TargetNamecolImage PropertyWidth Value40/Setter
47 Setter TargetNamedelImage PropertyVisibility ValueVisible/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
