WPF ComboBox样式

写一个ComboItem

 <Style TargetType="ComboBoxItem">
     <Setter Property="Height" Value="30" />
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="ComboBoxItem">
                 <Border
                     x:Name="_borderbg"
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     Margin="2,0"
                     Background="Transparent"
                     CornerRadius="5">
                     <TextBlock
                         x:Name="_txt"
                         Margin="3,0,3,0"
                         VerticalAlignment="Center"
                         Foreground="#333"
                         Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
                 </Border>

                 <ControlTemplate.Triggers>
                     <Trigger Property="IsSelected" Value="true">
                         <Setter TargetName="_borderbg" Property="Background" Value="Red" />
                         <Setter TargetName="_txt" Property="Foreground" Value="White" />
                     </Trigger>
                     <MultiTrigger>
                         <MultiTrigger.Conditions>
                             <Condition Property="IsSelected" Value="false" />
                             <Condition Property="IsMouseOver" Value="true" />
                         </MultiTrigger.Conditions>
                         <Setter TargetName="_borderbg" Property="Background" Value="Green" />
                         <Setter TargetName="_txt" Property="Foreground" Value="White" />
                     </MultiTrigger>

                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

再写一个ToggleButton

 <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
     <Grid Height="25">
         <Border
             Grid.Column="1"
             Background="Orange"
             Cursor="Hand"
             Opacity="0" />
         <Path
             x:Name="Arrow"
             Grid.Column="1"
             Margin="0,0,5,0"
             HorizontalAlignment="Right"
             VerticalAlignment="Center"
             Data="M 0 0  6 6 12 0 Z"
             Fill="#B1B1B1"
             Stretch="None" />
     </Grid>
     <ControlTemplate.Triggers>
         <Trigger Property="IsChecked" Value="true">
             <Setter TargetName="Arrow" Property="RenderTransform">
                 <Setter.Value>
                     <RotateTransform Angle="180" CenterX="6" CenterY="3" />
                 </Setter.Value>
             </Setter>
             <Setter TargetName="Arrow" Property="Margin" Value="0,0,5,2" />
         </Trigger>
     </ControlTemplate.Triggers>
 </ControlTemplate>

Combobox样式

<Style TargetType="ComboBox">
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" MaxWidth="30" />
                    </Grid.ColumnDefinitions>
                    <Border
                        Grid.Column="0"
                        Grid.ColumnSpan="2"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="1"
                        CornerRadius="2" />
                    <ContentPresenter
                        x:Name="ContentSite"
                        Margin="5,0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Content="{TemplateBinding SelectionBoxItem}"
                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                        IsHitTestVisible="False" />

                    <ToggleButton
                        x:Name="ToggleButton"
                        Grid.Column="0"
                        Grid.ColumnSpan="2"
                        Background="Orange"
                        ClickMode="Press"
                        Focusable="false"
                        IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                        Template="{StaticResource ComboBoxToggleButton}" />
                    <TextBox
                        x:Name="PART_EditableTextBox"
                        Margin="2,0,0,0"
                        VerticalAlignment="Center"
                        Background="Transparent"
                        BorderThickness="0"
                        Focusable="True"
                        IsReadOnly="{TemplateBinding IsReadOnly}"
                        Visibility="Hidden" />

                    <Popup
                        x:Name="Popup"
                        AllowsTransparency="True"
                        Focusable="False"
                        IsOpen="{TemplateBinding IsDropDownOpen}"
                        Placement="Bottom"
                        PopupAnimation="Fade">
                        <Grid
                            x:Name="DropDown"
                            MinWidth="{TemplateBinding ActualWidth}"
                            MaxHeight="150"
                            SnapsToDevicePixels="True">

                            <Border
                                x:Name="DropDownBorder"
                                BorderBrush="#e8e8e8"
                                BorderThickness="1,0,1,1" />

                            <ScrollViewer
                                Margin="1"
                                CanContentScroll="True"
                                HorizontalScrollBarVisibility="Auto"
                                SnapsToDevicePixels="True"
                                VerticalScrollBarVisibility="Auto">
                                <!--  StackPanel 用于显示子级，方法是将 IsItemsHost 设置为 True  -->
                                <StackPanel
                                    Background="White"
                                    IsItemsHost="True"
                                    KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEditable" Value="true">
                        <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用combobox

 <ComboBox Width="200" SelectedIndex="1">
     <ComboBoxItem Content="条目1" />
     <ComboBoxItem Content="条目2" />
     <ComboBoxItem Content="条目3" />
     <ComboBoxItem Content="条目4" />
     <ComboBoxItem Content="条目4" />
     <ComboBoxItem Content="条目4" />
 </ComboBox>