WPF实现一个combobox的style

一个Combobox其实是由如下部分组成的，每个单独的部分都可以设置边框，背景，文字颜色，鼠标滑过的效果等：

效果如下：

xaml代码如下：
其中<Window.Resources>与</Window.Resources>之间的就combobox的Style，编写了style之后，可以把界面上的任何一个combobox设置成这个样式，使用样式的方式见下面代码中 与之间的代码。

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication3"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <!--Combox右侧下拉按钮-->
        <Style TargetType="ToggleButton" x:Key="ComboxStyleBtn">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <!--下拉按钮内部背景色-->
                        <Border x:Name="Back" Background="#5A5A5A" BorderThickness="1,0,0,0">
                            <!--下拉按钮内边框-->
                            <Path Name="PathFill" Fill="Black"  Width="10" 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="#00CA4F"></Setter>
                                <Setter TargetName="Back" Property="BorderBrush" Value="#59CA4F"></Setter>-->
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--Combox-->
        <Style TargetType="ComboBox" x:Key="ComboBoxStyle">
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <!--ComBoxItem-->
                    <Style TargetType="ComboBoxItem">
                        <Setter Property="MinHeight" Value="22"></Setter>
                        <Setter Property="MinWidth" Value="60"></Setter>
                        <Setter Property="Foreground" Value="White"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ComboBoxItem">
                                    <Border Name="Back" Background="Transparent"  BorderThickness="0,0,0,0" BorderBrush="#81D779" >
                                        <ContentPresenter ContentSource="{Binding Source}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" ></ContentPresenter>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter>
                                        </Trigger>
                                        <!--下拉框背景色-->
                                        <Trigger Property="IsHighlighted" Value="True">
                                            <Setter TargetName="Back" Property="Background" Value="Gray"></Setter>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.7*"/>
                                <ColumnDefinition Width="0.3*" MaxWidth="30"/>
                            </Grid.ColumnDefinitions>
                            <!--文字区域背景和边线样式-->
                            <TextBox Background="#5A5A5A"  Grid.Column="0" BorderThickness="0" IsReadOnly="True" Text="{TemplateBinding Text}"></TextBox>
                            <Border  Grid.Column="0" BorderThickness="1" BorderBrush="#5A5A5A" CornerRadius="1,0,0,1">
                            </Border>
                            <!--右侧下拉button设置-->
                            <Border Grid.Column="1" BorderBrush="#5A5A5A" CornerRadius="0,1,1,0">
                                <ToggleButton BorderThickness="3" BorderBrush="#5A5A5A" Style="{StaticResource ComboxStyleBtn}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"></ToggleButton>
                            </Border>
                            <!--弹出popup整体设置-->
                            <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="False" PopupAnimation="Slide" >
                                <!--弹出popup边框-->
                                <Border CornerRadius="1" BorderBrush="#5A5A5A" BorderThickness="1,0,1,1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                                    <Border.Effect>
                                        <DropShadowEffect Color="Gray" BlurRadius="2" ShadowDepth="0" Opacity="1"/>
                                    </Border.Effect>
                                    <!--下拉幕布边界背景设置 MaxHeight="{TemplateBinding MaxDropDownHeight}"-->
                                    <ScrollViewer Margin="0,0,0,0" Background="Gray"  SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" BorderBrush="Gray" BorderThickness="2" >
                                        <!--StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True-->
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="#5A5A5A" />
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <ComboBox Style="{StaticResource ComboBoxStyle}" Name="comboBox" HorizontalAlignment="Left" Margin="352,149,0,0" VerticalAlignment="Top" Width="120" IsSynchronizedWithCurrentItem="True">
        </ComboBox>

    </Grid>
</Window>

注意：如果要使用ComboBox的SelectedItem绑定代码中的数据的话，需要在的属性中添加下面这样代码：

SelectedItem="{Binding valueUnit,Mode=TwoWay,UpdateSourceTrigger=LostFocus}"

Mode=TwoWay表示代码中的数据源更新的话，界面显示数据也会更新；界面更新的话，数据源也会更新，是双向的。
UpdateSourceTrigger=LostFocus表示控件一失去焦点就更新代码中的数据源。如果不加这行有可能导致界面上用户已经改变了Combobox的Item，但代码中的数据却没随之更改！