潜移默化学会WPF(样式篇)改造ComboBox，全新metro风格

  1         <!--下拉框样式-->
  2         <Style x:Key="ComboBoxFocusVisual">
  3             <Setter Property="Control.Template">
  4                 <Setter.Value>
  5                     <ControlTemplate>
  6                         <Rectangle Margin="4,4,21,4" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
  7                     </ControlTemplate>
  8                 </Setter.Value>
  9             </Setter>
 10         </Style>
 11         <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
 12             <GradientStop Color="#F3F3F3" Offset="0"/>
 13             <GradientStop Color="#EBEBEB" Offset="0.5"/>
 14             <GradientStop Color="#DDDDDD" Offset="0.5"/>
 15             <GradientStop Color="#CDCDCD" Offset="1"/>
 16         </LinearGradientBrush>
 17         <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
 18         <Geometry x:Key="DownArrowGeometry">M 0 0 L 3.5 4 L 7 0 Z</Geometry>
 19         <Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
 20             <Setter Property="OverridesDefaultStyle" Value="true"/>
 21             <Setter Property="IsTabStop" Value="false"/>
 22             <Setter Property="Focusable" Value="false"/>
 23             <Setter Property="ClickMode" Value="Press"/>
 24             <Setter Property="Template">
 25                 <Setter.Value>
 26                     <ControlTemplate TargetType="{x:Type ToggleButton}">
 27                         <Border BorderThickness="{TemplateBinding BorderThickness}" x:Name="Chrome"  BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"  SnapsToDevicePixels="true">
 28                             <Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
 29                                 <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="#808080" HorizontalAlignment="Center" Margin="1,1,0,0" VerticalAlignment="Center"/>
 30                             </Grid>
 31                         </Border>
 32                         <ControlTemplate.Triggers>
 33                             <Trigger Property="IsEnabled" Value="false">
 34                                 <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/>
 35                             </Trigger>
 36                         </ControlTemplate.Triggers>
 37                     </ControlTemplate>
 38                 </Setter.Value>
 39             </Setter>
 40         </Style>
 41         <LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
 42             <GradientStop Color="#ABADB3" Offset="0.05"/>
 43             <GradientStop Color="#E2E3EA" Offset="0.07"/>
 44             <GradientStop Color="#E3E9EF" Offset="1"/>
 45         </LinearGradientBrush>
 46         <Style x:Key="ComboBoxEditableTextBox" TargetType="{x:Type TextBox}">
 47             <Setter Property="OverridesDefaultStyle" Value="true"/>
 48             <Setter Property="AllowDrop" Value="true"/>
 49             <Setter Property="MinWidth" Value="0"/>
 50             <Setter Property="MinHeight" Value="0"/>
 51             <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
 52             <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
 53             <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
 54             <Setter Property="Template">
 55                 <Setter.Value>
 56                     <ControlTemplate TargetType="{x:Type TextBox}">
 57                         <ScrollViewer x:Name="PART_ContentHost" Background="Transparent" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
 58                     </ControlTemplate>
 59                 </Setter.Value>
 60             </Setter>
 61         </Style>
 62         <Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
 63             <Setter Property="OverridesDefaultStyle" Value="true"/>
 64             <Setter Property="IsTabStop" Value="false"/>
 65             <Setter Property="Focusable" Value="false"/>
 66             <Setter Property="ClickMode" Value="Press"/>
 67             <Setter Property="Template">
 68                 <Setter.Value>
 69                     <ControlTemplate TargetType="{x:Type ToggleButton}">
 70                         <my:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RoundCorners="false" SnapsToDevicePixels="true" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
 71                             <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="0,1,0,0" VerticalAlignment="Center"/>
 72                         </my:ButtonChrome>
 73                         <ControlTemplate.Triggers>
 74                             <Trigger Property="IsChecked" Value="true">
 75                                 <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
 76                             </Trigger>
 77                             <Trigger Property="IsEnabled" Value="false">
 78                                 <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/>
 79                             </Trigger>
 80                         </ControlTemplate.Triggers>
 81                     </ControlTemplate>
 82                 </Setter.Value>
 83             </Setter>
 84         </Style>
 85         <ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
 86             <Grid x:Name="Placement" SnapsToDevicePixels="true">
 87                 <Grid.ColumnDefinitions>
 88                     <ColumnDefinition Width="*"/>
 89                     <ColumnDefinition Width="Auto"/>
 90                 </Grid.ColumnDefinitions>
 91                 <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
 92                     <my:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=Placement}">
 93                         <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
 94                             <ScrollViewer x:Name="DropDownScrollViewer">
 95                                 <Grid RenderOptions.ClearTypeHint="Enabled">
 96                                     <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
 97                                         <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
 98                                     </Canvas>
 99                                     <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
100                                 </Grid>
101                             </ScrollViewer>
102                         </Border>
103                     </my:SystemDropShadowChrome>
104                 </Popup>
105                 <my:ListBoxChrome x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}"/>
106                 <TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="{TemplateBinding Padding}" Style="{StaticResource ComboBoxEditableTextBox}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
107                 <ToggleButton Grid.Column="1" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/>
108             </Grid>
109             <ControlTemplate.Triggers>
110                 <Trigger Property="IsKeyboardFocusWithin" Value="true">
111                     <Setter Property="Foreground" Value="Black"/>
112                 </Trigger>
113                 <Trigger Property="IsDropDownOpen" Value="true">
114                     <Setter Property="RenderFocused" TargetName="Border" Value="true"/>
115                 </Trigger>
116                 <Trigger Property="HasItems" Value="false">
117                     <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
118                 </Trigger>
119                 <Trigger Property="IsEnabled" Value="false">
120                     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
121                     <Setter Property="Background" Value="#FFF4F4F4"/>
122                 </Trigger>
123                 <Trigger Property="IsGrouping" Value="true">
124                     <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
125                 </Trigger>
126                 <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
127                     <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
128                     <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
129                 </Trigger>
130                 <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
131                     <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
132                     <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
133                 </Trigger>
134             </ControlTemplate.Triggers>
135         </ControlTemplate>
136         <Style x:Key="CboCommomStyle" TargetType="{x:Type ComboBox}">
137             <Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>
138             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
139             <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
140             <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
141             <Setter Property="BorderThickness" Value="1"/>
142             <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
143             <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
144             <Setter Property="Padding" Value="4,3"/>
145             <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
146             <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
147             <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
148             <Setter Property="Template">
149                 <Setter.Value>
150                     <ControlTemplate TargetType="{x:Type ComboBox}">
151                         <Grid x:Name="MainGrid" SnapsToDevicePixels="true" Margin="1">
152                             <Grid.ColumnDefinitions>
153                                 <ColumnDefinition Width="*"/>
154                                 <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
155                             </Grid.ColumnDefinitions>
156                             <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
157                                 <Border x:Name="Shdw" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
158                                     <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
159                                         <ScrollViewer x:Name="DropDownScrollViewer">
160                                             <Grid RenderOptions.ClearTypeHint="Enabled">
161                                                 <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
162                                                     <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
163                                                 </Canvas>
164                                                 <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
165                                             </Grid>
166                                         </ScrollViewer>
167                                     </Border>
168                                 </Border>
169                             </Popup>
170                             <ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}" BorderThickness="{TemplateBinding BorderThickness}"/>
171                             <ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
172                         </Grid>
173                         <ControlTemplate.Triggers>
174                             <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
175                                 <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
176 
177                             </Trigger>
178                             <Trigger Property="HasItems" Value="false">
179                                 <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
180                             </Trigger>
181                             <Trigger Property="IsEnabled" Value="false">
182                                 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
183                                 <Setter Property="Background" Value="#FFF4F4F4"/>
184                             </Trigger>
185                             <Trigger Property="IsGrouping" Value="true">
186                                 <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
187                             </Trigger>
188                             <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
189                                 <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
190                                 <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
191                             </Trigger>
192                         </ControlTemplate.Triggers>
193                     </ControlTemplate>
194                 </Setter.Value>
195             </Setter>
196             <Style.Triggers>
197                 <Trigger Property="IsEditable" Value="true">
198                     <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
199                     <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
200                     <Setter Property="IsTabStop" Value="false"/>
201                     <Setter Property="Padding" Value="3"/>
202                     <Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>
203                 </Trigger>
204             </Style.Triggers>
205         </Style>
先引入命名空间 xmlns:my="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"，还要引入类库 PresentationFramework.Aero.dll ,PresentationFramework.dll PresentationCore.dll
效果图，后面背景是灰色的，所以你看combobox是灰色的，我样式设透明的了
先上传一张我的杰作吧，改造后的textbox，这里不想介绍了
一个带搜索功能和带条件搜索的文本框，同样你也可以改成带搜索功能和带条件搜索的combobox
请调用这个
Style="{StaticResource CboCommomStyle}"
相关阅读:
LVGL初步移植
 为什么javac后加.java，java后不加.class？
为什么内部类可以访问外部类的私有属性？
Optional类与使用==判断null有什么区别？使用Optional类有什么优势？
注释中的Unicode编码也会被转义
 用反射编写泛型数组
 JDBC与JPA--初学JPA
抽象类与接口
 面向对象——多态
 面向对象——封装（隐藏）
原文地址：https://www.cnblogs.com/AaronYang/p/2456575.html