WPF ComboBox样式

 1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 2                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 3     <!--下拉按钮-->
 4     <Style TargetType="ToggleButton" x:Key="ComboxStyleBtn">
 5         <Setter Property="Template">
 6             <Setter.Value>
 7                 <ControlTemplate>
 8                     <Border x:Name="Back" Background="#F7FDF7" BorderThickness="1" BorderBrush="Transparent">
 9                         <Path Name="PathFill" Fill="#59CA4F" Width="8" Height="6" StrokeThickness="0" Data="M5,0 L10,10 L0,10 z" RenderTransformOrigin="0.5,0.5" Stretch="Fill">
10                             <Path.RenderTransform>
11                                 <TransformGroup>
12                                     <ScaleTransform/>
13                                     <SkewTransform/>
14                                     <RotateTransform Angle="180"/>
15                                     <TranslateTransform/>
16                                 </TransformGroup>
17                             </Path.RenderTransform>
18                         </Path>
19                     </Border>
20                     <ControlTemplate.Triggers>
21                         <Trigger Property="IsMouseOver" Value="True">
22                             <Setter TargetName="PathFill" Property="Fill" Value="White"></Setter>
23                             <Setter TargetName="Back" Property="Background" Value="#59CA4F"></Setter>
24                             <Setter TargetName="Back" Property="BorderBrush" Value="#59CA4F"></Setter>
25                         </Trigger>
26                     </ControlTemplate.Triggers>
27                 </ControlTemplate>
28             </Setter.Value>
29         </Setter>
30     </Style>
31 
32     <!--Combox-->
33     <Style TargetType="ComboBox" x:Key="ComboBoxStyle">
34         <Setter Property="ItemContainerStyle">
35             <Setter.Value>
36                 <!--ComBoxItem-->
37                 <Style TargetType="ComboBoxItem">
38                     <Setter Property="MinHeight" Value="22"></Setter>
39                     <Setter Property="MinWidth" Value="60"></Setter>
40                     <Setter Property="Template">
41                         <Setter.Value>
42                             <ControlTemplate TargetType="ComboBoxItem">
43                                 <Border Name="Back" Background="Transparent"  BorderThickness="0,0,0,0" BorderBrush="#81D779" >
44                                     <ContentPresenter ContentSource="{Binding Source}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"></ContentPresenter>
45                                 </Border>
46                                 <ControlTemplate.Triggers>
47                                     <Trigger Property="IsMouseOver" Value="True">
48                                         <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter>
49                                     </Trigger>
50                                     <Trigger Property="IsHighlighted" Value="True">
51                                         <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter>
52                                     </Trigger>
53                                 </ControlTemplate.Triggers>
54                             </ControlTemplate>
55                         </Setter.Value>
56                     </Setter>
57                 </Style>
58             </Setter.Value>
59         </Setter>
60         <Setter Property="Template">
61             <Setter.Value>
62                 <ControlTemplate TargetType="ComboBox">
63                     <Grid Background="#F7FDF7">
64                         <Grid.ColumnDefinitions>
65                             <ColumnDefinition Width="0.7*"/>
66                             <ColumnDefinition Width="0.3*" MaxWidth="30"/>
67                         </Grid.ColumnDefinitions>
68                         <TextBox  Grid.Column="0" IsReadOnly="{TemplateBinding IsReadOnly}" Text="{TemplateBinding Text}"></TextBox>
69                         <Border  Grid.Column="0" BorderThickness="1,1,0,1" BorderBrush="#81D779" CornerRadius="1,0,0,1">
70 
71                         </Border>
72                         <Border Grid.Column="1" BorderThickness="0,1,1,1" BorderBrush="#81D779" CornerRadius="0,1,1,0">
73                             <ToggleButton Style="{StaticResource ComboxStyleBtn}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"></ToggleButton>
74                         </Border>
75                         <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
76                             <Border CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
77                                 <Border.Effect>
78                                     <DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="0.5"/>
79                                 </Border.Effect>
80                                 <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource ScrollViewerStyle}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
81                                     <!-- StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True -->
82                                     <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/>
83                                 </ScrollViewer>
84                             </Border>
85                         </Popup>
86                     </Grid>
87                 </ControlTemplate>
88             </Setter.Value>
89         </Setter>
90     </Style>
91 </ResourceDictionary>

  1 <!--ScrollViewer样式-->
  2     <Style TargetType="ScrollViewer" x:Key="ScrollViewerStyle">
  3         <Setter Property="Template">
  4             <Setter.Value>
  5                 <ControlTemplate TargetType="{x:Type ScrollViewer}">
  6                     <Grid x:Name="Grid" Background="{TemplateBinding Background}">
  7                         <Grid.ColumnDefinitions>
  8                             <ColumnDefinition Width="*"/>
  9                             <ColumnDefinition Width="Auto"/>
 10                         </Grid.ColumnDefinitions>
 11                         <Grid.RowDefinitions>
 12                             <RowDefinition Height="*"/>
 13                             <RowDefinition Height="Auto"/>
 14                         </Grid.RowDefinitions>
 15                         <!--右下角四方形-->
 16                         <Rectangle x:Name="Corner"  Grid.Row="1" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
 17                         <!--内容区域-->
 18                         <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Grid.Row="0" Grid.Column="0" Content="{TemplateBinding Content}" CanContentScroll="{TemplateBinding CanContentScroll}"  ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
 19                         <!--竖直滚动条-->
 20                         <ScrollBar x:Name="PART_VerticalScrollBar"   Grid.Row="0" Grid.Column="1" AutomationProperties.AutomationId="VerticalScrollBar"   Cursor="Arrow" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"   Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"   ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle}"/>
 21                         <!--水平滚动条-->
 22                         <ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Row="1" Grid.Column="0" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Maximum="{TemplateBinding ScrollableWidth}"  Minimum="0" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"  Style="{DynamicResource ScrollBarStyle}" Orientation="Horizontal"/>
 23                     </Grid>
 24                     <ControlTemplate.Triggers>
 25                         <Trigger Property="HorizontalScrollBarVisibility" Value="Disabled">
 26                             
 27                         </Trigger>
 28                     </ControlTemplate.Triggers>
 29                 </ControlTemplate>
 30             </Setter.Value>
 31         </Setter>
 32 
 33     </Style>
 34     
 35     <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
 36         <Setter Property="OverridesDefaultStyle" Value="true"/>
 37         <Setter Property="Background" Value="Transparent"/>
 38         <Setter Property="Focusable" Value="false"/>
 39         <Setter Property="IsTabStop" Value="false"/>
 40         <Setter Property="Template">
 41             <Setter.Value>
 42                 <ControlTemplate TargetType="{x:Type RepeatButton}">
 43                     <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
 44                 </ControlTemplate>
 45             </Setter.Value>
 46         </Setter>
 47     </Style>
 48     <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
 49         <Setter Property="OverridesDefaultStyle" Value="true"/>
 50         <Setter Property="Background" Value="Transparent"/>
 51         <Setter Property="Focusable" Value="false"/>
 52         <Setter Property="IsTabStop" Value="false"/>
 53         <Setter Property="Template">
 54             <Setter.Value>
 55                 <ControlTemplate TargetType="{x:Type RepeatButton}">
 56                     <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
 57                 </ControlTemplate>
 58             </Setter.Value>
 59         </Setter>
 60     </Style>
 61     <!--Theum-->
 62     <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
 63         <Setter Property="OverridesDefaultStyle" Value="true"/>
 64         <Setter Property="IsTabStop" Value="false"/>
 65         <Setter Property="Template">
 66             <Setter.Value>
 67                 <ControlTemplate TargetType="{x:Type Thumb}">
 68                     <Border x:Name="border" CornerRadius="3" Background="#ACACAC" BorderThickness="0" >
 69 
 70                     </Border>
 71                     <ControlTemplate.Triggers>
 72                         <Trigger Property="IsMouseOver" Value="True">
 73                             <Setter Property="Background" TargetName="border" Value="#888888"/>
 74                         </Trigger>
 75                         <Trigger Property="IsDragging" Value="True">
 76                             <Setter Property="Background" TargetName="border" Value="#888888"/>
 77                         </Trigger>
 78                     </ControlTemplate.Triggers>
 79                 </ControlTemplate>
 80             </Setter.Value>
 81         </Setter>
 82     </Style>
 83     <!--滚动条样式-->
 84     <Style x:Key="ScrollBarStyle" TargetType="{x:Type ScrollBar}">
 85         <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
 86         <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
 87         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
 88         <Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
 89         <Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
 90         <Setter Property="Template">
 91             <Setter.Value>
 92                 <ControlTemplate TargetType="{x:Type ScrollBar}">
 93                     <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
 94                         <Grid.RowDefinitions>
 95                             <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
 96                             <RowDefinition Height="0.00001*"/>
 97                             <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
 98                         </Grid.RowDefinitions>
 99                         <!--上箭头-->
100                         <RepeatButton Style="{DynamicResource ArrowDownPathButton}" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}"/>
101                         <!--滑动条 ？ 是不是Slider中的滑动条？？？ -是 -->
102                         <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
103                             <!--滑动条上部区域-->
104                             <Track.DecreaseRepeatButton>
105                                 <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
106                             </Track.DecreaseRepeatButton>
107                             <!--滑动条部分-->
108                             <Track.IncreaseRepeatButton>
109                                 <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
110                             </Track.IncreaseRepeatButton>
111                             <!--滑动条下部区域-->
112                             <Track.Thumb>
113                                 <Thumb Style="{StaticResource ScrollBarThumb}" Margin="3,0,3,0"/>
114                             </Track.Thumb>
115                         </Track>
116                         <!--下箭头-->
117                         <RepeatButton Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Style="{DynamicResource ArrowUpPathButton}"/>
118                     </Grid>
119                     <ControlTemplate.Triggers>
120                         <Trigger Property="IsEnabled" Value="false">
121                             <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
122                         </Trigger>
123                     </ControlTemplate.Triggers>
124                 </ControlTemplate>
125             </Setter.Value>
126         </Setter>
127         <Style.Triggers>
128             <!--水平摆放时-->
129             <Trigger Property="Orientation" Value="Horizontal">
130                 <Setter Property="Width" Value="Auto"/>
131                 <Setter Property="MinWidth" Value="0"/>
132                 <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
133                 <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
134                 <Setter Property="Template">
135                     <Setter.Value>
136                         <ControlTemplate TargetType="{x:Type ScrollBar}">
137                             <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
138                                 <Grid.ColumnDefinitions>
139                                     <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
140                                     <ColumnDefinition Width="0.00001*"/>
141                                     <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
142                                 </Grid.ColumnDefinitions>
143                                 <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{DynamicResource ArrowLeftPathButton}"/>
144                                 <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
145                                     <Track.DecreaseRepeatButton>
146                                         <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
147                                     </Track.DecreaseRepeatButton>
148                                     <Track.IncreaseRepeatButton>
149                                         <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
150                                     </Track.IncreaseRepeatButton>
151                                     <Track.Thumb>
152                                         <Thumb Style="{StaticResource ScrollBarThumb}" Margin="0,3,0,3"/>
153                                     </Track.Thumb>
154                                 </Track>
155                                 <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{DynamicResource ArrowRightPathButton}"/>
156                             </Grid>
157                             <ControlTemplate.Triggers>
158                                 <Trigger Property="IsEnabled" Value="false">
159                                     <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
160                                 </Trigger>
161                             </ControlTemplate.Triggers>
162                         </ControlTemplate>
163                     </Setter.Value>
164                 </Setter>
165             </Trigger>
166         </Style.Triggers>
167     </Style>
168     
169     <!--下箭头-->
170     <Style x:Key="ArrowDownPathButton" TargetType="RepeatButton">
171         <Setter Property="Template">
172             <Setter.Value>
173                 <ControlTemplate TargetType="RepeatButton">
174                     <Grid Background="Transparent">
175                         <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
176                             <Path.RenderTransform>
177                                 <TransformGroup>
178                                     <ScaleTransform/>
179                                     <SkewTransform/>
180                                     <RotateTransform Angle="180"/>
181                                     <TranslateTransform/>
182                                 </TransformGroup>
183                             </Path.RenderTransform>
184                         </Path>
185                     </Grid>
186                     <ControlTemplate.Triggers>
187                         <Trigger Property="IsMouseOver" Value="True">
188                             <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
189                         </Trigger>
190                         <Trigger Property="IsPressed" Value="True">
191                             <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
192                         </Trigger>
193                     </ControlTemplate.Triggers>
194                 </ControlTemplate>
195             </Setter.Value>
196         </Setter>
197     </Style>
198     <!--上箭头-->
199     <Style x:Key="ArrowUpPathButton" TargetType="RepeatButton">
200         <Setter Property="Template">
201             <Setter.Value>
202                 <ControlTemplate TargetType="RepeatButton">
203                     <Grid Background="Transparent">
204                         <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"  StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
205                             <Path.RenderTransform>
206                                 <TransformGroup>
207                                     <ScaleTransform/>
208                                     <SkewTransform/>
209                                     <RotateTransform Angle="0"/>
210                                     <TranslateTransform/>
211                                 </TransformGroup>
212                             </Path.RenderTransform>
213                         </Path>
214                     </Grid>
215                     <ControlTemplate.Triggers>
216                         <Trigger Property="IsMouseOver" Value="True">
217                             <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
218                         </Trigger>
219                         <Trigger Property="IsPressed" Value="True">
220                             <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
221                         </Trigger>
222                     </ControlTemplate.Triggers>
223                 </ControlTemplate>
224             </Setter.Value>
225         </Setter>
226     </Style>
227     <!--左箭头-->
228     <Style x:Key="ArrowLeftPathButton" TargetType="RepeatButton">
229         <Setter Property="Template">
230             <Setter.Value>
231                 <ControlTemplate TargetType="RepeatButton">
232                     <Grid Background="Transparent">
233                         <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
234                             <Path.RenderTransform>
235                                 <TransformGroup>
236                                     <ScaleTransform/>
237                                     <SkewTransform/>
238                                     <RotateTransform Angle="-90"/>
239                                     <TranslateTransform/>
240                                 </TransformGroup>
241                             </Path.RenderTransform>
242                         </Path>
243                     </Grid>
244                     <ControlTemplate.Triggers>
245                         <Trigger Property="IsMouseOver" Value="True">
246                             <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
247                         </Trigger>
248                         <Trigger Property="IsPressed" Value="True">
249                             <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
250                         </Trigger>
251                     </ControlTemplate.Triggers>
252                 </ControlTemplate>
253             </Setter.Value>
254         </Setter>
255     </Style>
256     <!--右箭头-->
257     <Style x:Key="ArrowRightPathButton" TargetType="RepeatButton">
258         <Setter Property="Template">
259             <Setter.Value>
260                 <ControlTemplate TargetType="RepeatButton">
261                     <Grid Background="Transparent">
262                         <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"  StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
263                             <Path.RenderTransform>
264                                 <TransformGroup>
265                                     <ScaleTransform/>
266                                     <SkewTransform/>
267                                     <RotateTransform Angle="90"/>
268                                     <TranslateTransform/>
269                                 </TransformGroup>
270                             </Path.RenderTransform>
271                         </Path>
272                     </Grid>
273                     <ControlTemplate.Triggers>
274                         <Trigger Property="IsMouseOver" Value="True">
275                             <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
276                         </Trigger>
277                         <Trigger Property="IsPressed" Value="True">
278                             <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
279                         </Trigger>
280                     </ControlTemplate.Triggers>
281                 </ControlTemplate>
282             </Setter.Value>
283         </Setter>
284     </Style>