一、样式的样子就是这样的
二、样式Style - 不可编辑请设置 属性为ReadOnly=true属性
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>
三、关于ScroolViwer样式
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>
转自:http://blog.csdn.net/lvguoshan/article/details/49178619