WPF ComboBox Styles

WPF ComboBox Styles

第一種樣式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!--ComboBox-->
    <!--ComBoBox項選中背景色-->
    <SolidColorBrush x:Key="ComboBoxSelectdBackground" Color="#FF69B6FF"/>
    <!--ComBoBox項鼠標經過背景色-->
    <SolidColorBrush x:Key="ComboBoxMouseOverBackground" Color="#FF00A2F5"/>
    <!--ComBoBox項選中前景色-->
    <SolidColorBrush x:Key="ComboBoxSelectedForeground" Color="White"/>
    <!--ComBoBox項鼠標經過前景色-->
    <SolidColorBrush x:Key="ComboBoxMouseOverForegrond" Color="White"/>
    <!--ComBoBox toggleButton樣式-->
    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
        <Grid Height="25" >
            <Border Grid.Column="1" Background="White" Opacity="0"   Cursor="Hand"/>
            <Border Padding="0 0 5 0">
                <Path x:Name="Arrow" Grid.Column="1"   Data="M 0 0  6 6 12 0 Z"  VerticalAlignment="Center" HorizontalAlignment="Right" Stretch="None" Fill="#B1B1B1" />
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="true">
                <Setter TargetName="Arrow" Property="RenderTransform">
                    <Setter.Value>
                        <RotateTransform   CenterX="6" CenterY="3" Angle="180"></RotateTransform>
                    </Setter.Value>
                </Setter>
                <Setter TargetName="Arrow" Property="Margin" Value="0 0 0 2"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>


    <Style TargetType="{x:Type ComboBox}">
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ComboBoxItem">
                    <Setter Property="Height" Value="20"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate  TargetType="{x:Type ComboBoxItem}">
                                <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                                    <Border x:Name="_borderbg" Background="Transparent"/>
                                    <TextBlock Margin="3 0 3 0" VerticalAlignment="Center" x:Name="_txt" Foreground="#333" Text="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}"/>
                                    <Border x:Name="_border" Background="White" Opacity="0"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="true">
                                        <Setter TargetName="_borderbg" Property="Background" Value="{StaticResource ComboBoxSelectdBackground}" />
                                        <Setter TargetName="_txt" Property="Foreground" Value="{StaticResource ComboBoxSelectedForeground}"/>
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected" Value="false"/>
                                            <Condition Property="IsMouseOver" Value="true"/>
                                        </MultiTrigger.Conditions>
                                        <Setter TargetName="_borderbg" Property="Background" Value="{StaticResource ComboBoxMouseOverBackground}" />
                                        <Setter TargetName="_txt" Property="Foreground" Value="{StaticResource ComboBoxMouseOverForegrond}"/>
                                    </MultiTrigger>

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

                            <!--ToggleButton 已數據綁定到 ComboBox 本身以切換 IsDropDownOpen-->
                            <ToggleButton Grid.Column="0"  Grid.ColumnSpan="2" Template="{StaticResource ComboBoxToggleButton}"  x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
                            <!--必須將 TextBox 命名爲 PART_EditableTextBox，否則 ComboBox 將無法識別它-->
                            <TextBox   Visibility="Hidden" BorderThickness="0"   Margin="2 0 0 0" x:Name="PART_EditableTextBox"  VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/>

                            <!--Popup 可顯示 ComboBox 中的項列表。IsOpen 已數據綁定到通過 ComboBoxToggleButton 來切換的 IsDropDownOpen-->
                            <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
                                <Grid MaxHeight="150" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                                    <Border x:Name="DropDownBorder"  BorderBrush="#e8e8e8" BorderThickness="1 0 1 1"/>
                                    <ScrollViewer Margin="1"  SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
                                        <!--StackPanel 用於顯示子級，方法是將 IsItemsHost 設置爲 True-->
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/>
                                    </ScrollViewer>
                                </Grid>
                            </Popup>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

使用

            <ComboBox HorizontalAlignment="Center" VerticalAlignment="Center" ItemsSource="{Binding  IDs}" SelectedItem="{Binding CurrentID,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>

效果

---

積跬步以至千里:) (:一陣沒來由的風