潜移默化学会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}"
