【WPF】一个好看的ComBox样式

先上图

话不多说，直接上代码

  1 <!--Combox-->
  2     <Style TargetType="{x:Type ComboBox}" x:Key="cmbstyle">
  3         <Setter Property="Background" Value="White"/>
  4         <Setter Property="ItemContainerStyle">
  5             <Setter.Value>
  6                 <!--ComBoxItem-->
  7                 <Style TargetType="ComboBoxItem">
  8                     <Setter Property="MinHeight" Value="22"></Setter>
  9                     <Setter Property="MinWidth" Value="60"></Setter>
 10                     <Setter Property="Template">
 11                         <Setter.Value>
 12                             <ControlTemplate TargetType="ComboBoxItem">
 13                                 <Border Name="Back" Background="Transparent"  BorderThickness="0,0,0,0" BorderBrush="#81D779" >
 14                                     <ContentPresenter  VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"></ContentPresenter>
 15                                 </Border>
 16                                 <ControlTemplate.Triggers>
 17                                     <Trigger Property="IsMouseOver" Value="True">
 18                                         <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter>
 19                                     </Trigger>
 20                                     <Trigger Property="IsHighlighted" Value="True">
 21                                         <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter>
 22                                     </Trigger>
 23                                 </ControlTemplate.Triggers>
 24                             </ControlTemplate>
 25                         </Setter.Value>
 26                     </Setter>
 27                 </Style>
 28             </Setter.Value>
 29         </Setter>
 30         <Setter Property="Template">
 31             <Setter.Value>
 32                 <ControlTemplate TargetType="{x:Type ComboBox}">
 33                     <Border BorderThickness="0" CornerRadius="3" Width="100" Height="30" Background="{TemplateBinding Background}" >
 34                         <Grid >
 35                             <Grid.ColumnDefinitions>
 36                                 <ColumnDefinition Width="3*"/>
 37                                 <ColumnDefinition Width="*"/>
 38                             </Grid.ColumnDefinitions>
 39                             <Grid Grid.Column="0" x:Name="grid">
 40                                 <ToggleButton 
 41                                         Width="{Binding ElementName=grid,Path=ActualWidth}" 
 42                                         Height="{Binding ElementName=grid, Path=ActualHeight}" 
 43                                         Content="{TemplateBinding Text}" VerticalAlignment="Center" 
 44                                         HorizontalAlignment="Left" Margin="5,0,0,0" 
 45                                         BorderThickness="0" 
 46                                         Foreground="{TemplateBinding Foreground}"
 47                                         Background="{TemplateBinding Background}"
 48                                         IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"
 49                                         >
 50                                     <ToggleButton.Style >
 51                                         <Style TargetType="ToggleButton">
 52                                             <Setter Property="Background" Value="White"/>
 53                                             <Setter Property="Template">
 54                                                 <Setter.Value>
 55                                                     <ControlTemplate TargetType="ToggleButton">
 56                                                         <Border   Background="{TemplateBinding Background}" BorderThickness="0"  >
 57                                                             <TextBlock Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" Margin="4 0 0 0"  HorizontalAlignment="Left" VerticalAlignment="Center"/>
 58                                                         </Border>
 59                                                     </ControlTemplate>
 60                                                 </Setter.Value>
 61                                             </Setter>
 62                                             <Style.Triggers>
 63                                                 <Trigger Property="IsMouseOver" Value="True">
 64                                                     <Setter Property="Background" Value="White"/>
 65                                                 </Trigger>
 66                                                 <Trigger Property="IsMouseOver" Value="False">
 67                                                     <Setter Property="Background" Value="White"/>
 68                                                 </Trigger>
 69                                             </Style.Triggers>
 70                                         </Style>
 71                                     </ToggleButton.Style>
 72                                 </ToggleButton>
 73                             </Grid>
 74 
 75                             <Grid Grid.Column="1" >
 76                                 <ToggleButton IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
 77                                                   Foreground="{TemplateBinding Foreground}"
 78                                                   ClickMode="Press">
 79                                     <ToggleButton.Style>
 80                                         <Style TargetType="ToggleButton">
 81                                             <Setter Property="Background" Value="White"/>
 82                                             <Setter Property="Template">
 83                                                 <Setter.Value>
 84                                                     <ControlTemplate TargetType="ToggleButton">
 85                                                         <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}">
 86                                                             <Grid>
 87                                                                 <TextBlock Foreground="{TemplateBinding Foreground}" x:Name="arrow_tb" Text="&#xe610;" Style="{StaticResource iconTb_style}" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
 88                                                                     <TextBlock.RenderTransform>
 89                                                                         <TransformGroup>
 90                                                                             <ScaleTransform/>
 91                                                                             <SkewTransform/>
 92                                                                             <RotateTransform/>
 93                                                                             <TranslateTransform/>
 94                                                                         </TransformGroup>
 95                                                                     </TextBlock.RenderTransform>
 96                                                                 </TextBlock>
 97                                                             </Grid>
 98                                                         </Border>
 99                                                         <ControlTemplate.Triggers>
100                                                             <Trigger Property="IsChecked" Value="True">
101 
102                                                             </Trigger>
103                                                             <EventTrigger RoutedEvent="Checked">
104                                                                 <BeginStoryboard>
105                                                                     <Storyboard >
106                                                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="arrow_tb" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
107                                                                             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
108                                                                             <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="180"/>
109                                                                         </DoubleAnimationUsingKeyFrames>
110                                                                     </Storyboard>
111                                                                 </BeginStoryboard>
112                                                             </EventTrigger>
113 
114                                                             <EventTrigger RoutedEvent="Unchecked">
115                                                                 <BeginStoryboard>
116                                                                     <Storyboard >
117                                                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="arrow_tb" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
118                                                                             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="180"/>
119                                                                             <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
120                                                                         </DoubleAnimationUsingKeyFrames>
121                                                                     </Storyboard>
122                                                                 </BeginStoryboard>
123                                                             </EventTrigger>
124                                                         </ControlTemplate.Triggers>
125                                                     </ControlTemplate>
126                                                 </Setter.Value>
127                                             </Setter>
128                                         </Style>
129                                     </ToggleButton.Style>
130                                 </ToggleButton>
131                             </Grid>
132                             <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
133                                 <Border CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
134                                     <Border.Effect>
135                                         <DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="0.5"/>
136                                     </Border.Effect>
137                                     <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource ScrollViewerStyle}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
138                                         <!-- StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True -->
139                                         <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/>
140                                     </ScrollViewer>
141                                 </Border>
142                             </Popup>
143                         </Grid>
144 
145 
146                         <Border.Effect>
147                             <DropShadowEffect ShadowDepth="-1" Opacity="0.3" Color="#FF969696" BlurRadius="5"/>
148                         </Border.Effect>
149                     </Border>
150                 </ControlTemplate>
151             </Setter.Value>
152         </Setter>
153 
154 
155     </Style>