WPF ComboBox 美化

WPF ComboBox 是一个很常用的控件，但是默认的样式有些简单，不够美观。下面提供一种简单的方式实现 WPF ComboBox 的美化：

1. 在 XAML 中定义一个 Style，用于修改 ComboBox 的样式：

<Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">
    <Setter Property="Background" Value="#FFFFFF" />
    <Setter Property="Foreground" Value="#000000" />
    <Setter Property="BorderBrush" Value="#D3D3D3" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Padding" Value="6,2,25,2" />
    <Setter Property="Margin" Value="0,5,0,0" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="Segoe UI" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Grid>
                    <ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
                    </ToggleButton>
                    <ContentPresenter x:Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" />
                    <Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
                        <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border x:Name="DropDownBorder" Background="#FFFFFF" BorderThickness="1" BorderBrush="#D3D3D3" />
                            <ScrollViewer SnapsToDevicePixels="True">
                                <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2. 定义一个样式模板，用于修改 ComboBox 中的 ToggleButton 样式：

<Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Focusable" Value="false" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="20" />
                    </Grid.ColumnDefinitions>
                    <Border x:Name="Border" Grid.ColumnSpan="2" Background="#FFFFFF" BorderBrush="#D3D3D3" BorderThickness="1" CornerRadius="3" />
                    <Border Grid.Column="0" Background="#FFFFFF" Margin="1" BorderBrush="#D3D3D3" BorderThickness="0,0,1,0">
                        <ContentPresenter HorizontalAlignment="Left" Margin="6,0,0,0" VerticalAlignment="Center" />
                    </Border>
                    <Path x:Name="Arrow" Grid.Column="1" Fill="#000000" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Fill" TargetName="Arrow" Value="#FFFFFF" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="Border" Value="#F2F2F2" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="#D3D3D3" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

3. 在 ComboBox 控件中引用上述定义的 Style：

<ComboBox Style="{StaticResource ComboBoxStyle}" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}" />

通过上述方式，可以实现 WPF ComboBox 的美化。当然，还可以根据实际需求进一步修改样式。