【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