【WPF】修改ComboBox样式

时间：2022-05-24 15:51:44

修改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

相关文章