【WPF】修改ComboBox样式

修改WPF默认的ComboBox控件样式

如下图所示：

1     <UserControl.Resources>
2         <Style TargetType="ToggleButton" x:Key="stlToggleButton">
3             <Setter Property="Foreground" Value="White"></Setter>
4             <Setter Property="Template">
5                 <Setter.Value>
6                     <ControlTemplate>
7                         <Border x:Name="Back" Background="#F7FDF7" BorderThickness="1" BorderBrush="Transparent">
8                             <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">
9                                 <Path.RenderTransform>
10                                     <TransformGroup>
11                                         <ScaleTransform/>
12                                         <SkewTransform/>
13                                         <RotateTransform Angle="180"/>
14                                         <TranslateTransform/>
15                                     </TransformGroup>
16                                 </Path.RenderTransform>
17                             </Path>
18                         </Border>
19                         <ControlTemplate.Triggers>
20                             <Trigger Property="IsMouseOver" Value="True">
21                                 <Setter TargetName="PathFill" Property="Fill" Value="White"></Setter>
22                                 <Setter TargetName="Back" Property="Background" Value="#59CA4F"></Setter>
23                                 <Setter TargetName="Back" Property="BorderBrush" Value="#59CA4F"></Setter>
24                             </Trigger>
25                         </ControlTemplate.Triggers>
26                     </ControlTemplate>
27                 </Setter.Value>
28             </Setter>
29         </Style>
30         <Style TargetType="ComboBox" x:Key="stlComboBox">
31             <Setter Property="SnapsToDevicePixels" Value="True"/>
32             <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
33             <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
34             <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
35             <Setter Property="HorizontalAlignment" Value="Left"></Setter>
36             <Setter Property="Foreground" Value="Black"></Setter>
37             <Setter Property="Height" Value="30"></Setter>
38             <Setter Property="Margin" Value="0,0,0,0"></Setter>
39             <Setter Property="Template">
40                 <Setter.Value>
41                     <ControlTemplate TargetType="ComboBox">
42                         <Grid Background="#F7FDF7">
43                             <Grid.ColumnDefinitions>
44                                 <ColumnDefinition Width="0.7*"/>
45                                 <ColumnDefinition Width="0.3*" MaxWidth="30"/>
46                             </Grid.ColumnDefinitions>
47                             <TextBox  Grid.Column="0" IsReadOnly="True" Text="{TemplateBinding Text}"></TextBox>
48                             <Border  Grid.Column="0" BorderThickness="1,1,0,1" BorderBrush="#81D779" CornerRadius="1,0,0,1">
49                             </Border>
50                             <Border Grid.Column="1" BorderThickness="0,1,1,1" BorderBrush="#81D779" CornerRadius="0,1,1,0">
51                                 <ToggleButton Style="{StaticResource stlToggleButton}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"></ToggleButton>
52                             </Border>
53                             <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
54                                 <Border CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
55                                     <Border.Effect>
56                                         <DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="0.5"/>
57                                     </Border.Effect>
58                                     <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource ScrollViewerStyle}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
59                                         <!-- StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True -->
60                                         <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/>
61                                     </ScrollViewer>
62                                 </Border>
63                             </Popup>
64                         </Grid>
65                     </ControlTemplate>
66                 </Setter.Value>
67             </Setter>
68         </Style>
69     </UserControl.Resources>

调用方式有如何两种

①固定的调用方式：

<ComboBox x:Name="wpComBoxNew" Grid.Row="0" Style="{StaticResource stlComboBox}" Width="150" VerticalAlignment="Center" Margin="10,5,0,0" />

②动态的调用方式：

ComboBox combox = new ComboBox();
combox.Width = 180;
combox.Height = 30;
combox.Tag = rowIndex;
combox.ItemsSource = this.GetComboxItems;
combox.SelectedValuePath = "Key";
combox.DisplayMemberPath = "Value";
combox.Style = this.Resources["stlComboBox"] as Style;
combox.SelectedValue = _ocrTable.ColumnsDefinitions[rowIndex].Datatype.ToString();
combox.SelectionChanged += new SelectionChangedEventHandler(combox_SelectionChanged);

this.wpComBox.Children.Add(combox);

上面这种在cs代码中实现的。实现样式的重点是下面这一句：

combox.Style = this.Resources["stlComboBox"] as Style;

参考博客为：http://blog.csdn.net/lvguoshan/article/details/49178619