WPF 控件 (九、Combox)

一、Style

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2">

    <Style TargetType="ToggleButton" x:Key="ComboBoxToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    
                        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Margin="5">
                            <Path Data="{StaticResource UpGeometry}" x:Name="p1" Visibility="Collapsed" Fill="Black" Stretch="Uniform" Cursor="Hand"/>
                            <Path Data="{StaticResource DownGeometry}" x:Name="p2" Fill="Black" Stroke="Black" StrokeThickness="1" Stretch="Uniform" Cursor="Hand"/>
                        </Grid>
                   
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Visibility" Value="Collapsed" TargetName="p2"/>
                            <Setter Property="Visibility" Value="Visible" TargetName="p1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="Padding" Value="6,3,5,3"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
                        </Grid.ColumnDefinitions>
                        <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
                            <theme:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MinWidth="{Binding ActualWidth, ElementName=templateRoot}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Border x:Name="dropDownBorder" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{TemplateBinding Background}" BorderThickness="1">
                                    <ScrollViewer x:Name="DropDownScrollViewer">
                                        <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
                                            <Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                                <Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}" Height="{Binding ActualHeight, ElementName=dropDownBorder}" Width="{Binding ActualWidth, ElementName=dropDownBorder}"/>
                                            </Canvas>
                                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                        </Grid>
                                    </ScrollViewer>
                                </Border>
                            </theme:SystemDropShadowChrome>
                        </Popup>
                        <ToggleButton x:Name="toggleButton" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource             ComboBoxToggleButton}"/>
                        <ContentPresenter x:Name="contentPresenter" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ComboBoxReadonlyToggleButton" TargetType="ToggleButton">
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="ClickMode" Value="Press" />
        <Setter Property="MinHeight" Value="22"></Setter>
        <Setter Property="MinWidth" Value="80"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <Border x:Name="Background" BorderBrush="#787878"
                                BorderThickness="1"  Background="#198B53">
                            <Path x:Name="Path" Height="Auto" Margin="0,0.082,0,8.859" Width="Auto"
                                    Stretch="Fill" Stroke="{x:Null}" StrokeLineJoin="Round"
                                    StrokeThickness="1"
                                    Data="M0,3 C0,1.3431457 1.3431457,0 3,0 L129,0 C130.65686,0 132,1.3431457 132,3 L132,13.853975 C86.718803,0.055481441 26.160202,27.400364 0,11.585506 z">
                                <Path.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <!--combox背景色#198B53-->
                                        <GradientStop Color="#198B53" Offset="0.113" />
                                        <GradientStop Color="#198B53" Offset="1" />
                                    </LinearGradientBrush>
                                </Path.Fill>
                            </Path>
                        </Border>
                        <!--倒三角的颜色#0099ff-->
                        <Path Height="10" x:Name="Path1" HorizontalAlignment="Right"
                                VerticalAlignment="Center" Margin="5,0,7,0" Width="10"
                                Fill="#0099ff" Stretch="Fill" Stroke="#0099ff"
                                Data="M0.5,0.5 L9.5,0.5 L5.0625,9.5 L5.0625,9.5 z" />
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <!--移入时按钮颜色 图案颜色 背景颜色 锯齿颜色-->
                            <Setter TargetName="Path1" Property="Fill" Value="#198B53"></Setter>
                            <Setter TargetName="Background" Property="Background" Value="#198B53"></Setter>
                            <Setter TargetName="Background" Property="BorderBrush" Value="#198B53"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ComboBoxStyle2" TargetType="ComboBox">
        <Setter Property="Foreground" Value="#FFFFFFFF" />
        <Setter Property="Width" Value="100"></Setter>
        <Setter Property="Height" Value="30"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
        <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
        <Setter Property="BorderBrush" Value="#FFFFFFFF" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="Padding" Value="4,3" />
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <!--这个是下拉框的属性设置-->
                <Style TargetType="ComboBoxItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ComboBoxItem">
                                <Border Name="Back"  Background="#525252"  BorderThickness="0,0,0,0" BorderBrush="#525252" >
                                    <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="#484848"></Setter>
                                    </Trigger>
                                    <!--下拉框背景色-->
                                    <Trigger Property="IsHighlighted" Value="True">
                                        <Setter TargetName="Back" Property="Background" Value="#3A99FF"></Setter>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid x:Name="MainGrid">
                        <Popup x:Name="PART_Popup" Margin="1" Grid.Row="1" 
                                IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}">
                            <Grid x:Name="Shdw" MaxHeight="{TemplateBinding MaxDropDownHeight}"
                                    MinWidth="{Binding Path=ActualWidth, ElementName=MainGrid}" >
                                <!--下拉框的属性设置-->
                                <!--Background -->
                                <Border x:Name="Bordertop"   Width="100" CornerRadius="0" BorderThickness="0"  Background="#525252">
                                    <Border.Effect>
                                        <DropShadowEffect Color="Black"  BlurRadius="2" ShadowDepth="0" Opacity="1"/>
                                    </Border.Effect>
                                    <ScrollViewer Width="150">
                                        <ItemsPresenter />
                                    </ScrollViewer>
                                </Border>
                            </Grid>
                        </Popup>
                        <ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}"
                                BorderThickness="3" BorderBrush="#03ffea"   Background="{TemplateBinding Background}"
                                IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
                        <!--combox字体的间距-->
                        <TextBlock Margin="10 0 0 0" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                IsHitTestVisible="false"
                                Text="{TemplateBinding Text}"
                               />
                    </Grid>

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

</ResourceDictionary>

二、Demo

 <WrapPanel>
     <StackPanel Orientation="Horizontal">
          <TextBlock Text="默认:"/>
          <ComboBox ItemsSource="{Binding UserNames}" SelectedIndex="0" Width="80" />
      </StackPanel>
      <StackPanel Orientation="Horizontal">
          <TextBlock Text="修改图标:"/>
          <ComboBox Style="{DynamicResource ComboBoxStyle1}" ItemsSource="{Binding UserNames}" SelectedIndex="0" Width="80" Height="20"/>
      </StackPanel>
      <StackPanel Orientation="Horizontal">
          <TextBlock Text="修改背景:"/>
          <ComboBox Style="{DynamicResource ComboBoxStyle2}" ItemsSource="{Binding UserNames}" SelectedIndex="0" Width="80" Height="20"/>
      </StackPanel>
  </WrapPanel>

三、效果