【WPF】修改ComboBox样式

修改WPF默认的ComboBox控件样式

如下图所示：

修改代码如下：

     <UserControl.Resources>
         <Style TargetType="ToggleButton" x:Key="stlToggleButton">
             <Setter Property="Foreground" Value="White"></Setter>
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate>
                         <Border x:Name="Back" Background="#F7FDF7" BorderThickness="1" BorderBrush="Transparent">
                             <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">
                                 <Path.RenderTransform>
                                     <TransformGroup>
                                         <ScaleTransform/>
                                         <SkewTransform/>
                                         <RotateTransform Angle="180"/>
                                         <TranslateTransform/>
                                     </TransformGroup>
                                 </Path.RenderTransform>
                             </Path>
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property="IsMouseOver" Value="True">
                                 <Setter TargetName="PathFill" Property="Fill" Value="White"></Setter>
                                 <Setter TargetName="Back" Property="Background" Value="#59CA4F"></Setter>
                                 <Setter TargetName="Back" Property="BorderBrush" Value="#59CA4F"></Setter>
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
         <Style TargetType="ComboBox" x:Key="stlComboBox">
             <Setter Property="SnapsToDevicePixels" Value="True"/>
             <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
             <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
             <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
             <Setter Property="HorizontalAlignment" Value="Left"></Setter>
             <Setter Property="Foreground" Value="Black"></Setter>
             <Setter Property="Height" Value="30"></Setter>
             <Setter Property="Margin" Value="0,0,0,0"></Setter>
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="ComboBox">
                         <Grid Background="#F7FDF7">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="0.7*"/>
                                 <ColumnDefinition Width="0.3*" MaxWidth="30"/>
                             </Grid.ColumnDefinitions>
                             <TextBox  Grid.Column="0" IsReadOnly="True" Text="{TemplateBinding Text}"></TextBox>
                             <Border  Grid.Column="0" BorderThickness="1,1,0,1" BorderBrush="#81D779" CornerRadius="1,0,0,1">
                             </Border>
                             <Border Grid.Column="1" BorderThickness="0,1,1,1" BorderBrush="#81D779" CornerRadius="0,1,1,0">
                                 <ToggleButton Style="{StaticResource stlToggleButton}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"></ToggleButton>
                             </Border>
                             <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
                                 <Border CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                                     <Border.Effect>
                                         <DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="0.5"/>
                                     </Border.Effect>
                                     <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource ScrollViewerStyle}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
                                         <!-- StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True -->
                                         <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/>
                                     </ScrollViewer>
                                 </Border>
                             </Popup>
                         </Grid>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
     </UserControl.Resources>

将上面代码插入到xaml文件中即可。然后在定义Combox控件的地方调用该样式即可。

调用方式有如何两种

①固定的调用方式：

<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