WPF Combobox样式

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">             <Grid x:Name="grid">                 <Grid.ColumnDefinitions>                     <ColumnDefinition />                     <ColumnDefinition Width="20" />                 </Grid.ColumnDefinitions>                 <Rectangle Grid.ColumnSpan="2" HorizontalAlignment="Stretch" x:Name="Rectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="3" Fill="LightBlue" /> <!--Combobox控件外壳-->                 <Rectangle Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="3" Fill="Gray" /> <!--除开下拉按钮的其他部分-->                 <Border Margin="2,2,2,2" Grid.Column="1" Background="Red" Width="Auto" CornerRadius="3,3,3,3" x:Name="drop_border" />                 <Path Grid.Column="1" HorizontalAlignment="Center" Width="Auto" x:Name="Arrow" VerticalAlignment="Center" Fill="{x:Null}" Data="M0.5,0.5 L3,6.5 5.5,0.5" Stroke="Black" Margin="5,0,5,0" Height="7" StrokeThickness="2" Stretch="Fill" /> <!--Border 和 Path为下拉按钮-->             </Grid>             <ControlTemplate.Triggers>                 <Trigger Property="IsMouseOver" Value="true">                     <Setter TargetName="drop_border" Property="Background" Value="White" />                 </Trigger>             </ControlTemplate.Triggers>         </ControlTemplate>           <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">             <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />         </ControlTemplate>         <Style TargetType="{x:Type ComboBox}">             <Setter Property="SnapsToDevicePixels" Value="true" />             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="{x:Type ComboBox}">                         <Border BorderBrush="Orange" x:Name="border">                             <Grid x:Name="grid">                                 <ToggleButton Template="{StaticResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" />                                 <ContentPresenter HorizontalAlignment="Left" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False" />                                 <TextBox Visibility="Hidden" Margin="2,2,22,2" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" IsReadOnly="{TemplateBinding IsReadOnly}" Foreground="Black" HorizontalAlignment="Stretch" Background="Azure" /> <!--文本输入框，当IsEditable为true 才显示-->                                 <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">                                     <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">                                         <Border x:Name="DropDownBorder" Background="WhiteSmoke" CornerRadius="3,3,3,3" />                                         <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True" Foreground="{StaticResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}">                                             <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />                                         </ScrollViewer>                                     </Grid>                                 </Popup>                             </Grid>                         </Border>                         <ControlTemplate.Triggers>                             <Trigger Property="HasItems" Value="false">                                 <Setter Property="MinHeight" Value="95" TargetName="DropDownBorder" />                             </Trigger>                                                           <Trigger Property="IsGrouping" Value="true">                                 <Setter Property="ScrollViewer.CanContentScroll" Value="false" />                             </Trigger>                             <Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">                                 <Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder" />                             </Trigger>                             <Trigger Property="IsEditable" Value="true">                                 <Setter Property="IsTabStop" Value="false" />                                 <Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox" />                                 <Setter Property="Visibility" Value="Hidden" TargetName="ContentSite" />                             </Trigger>                         </ControlTemplate.Triggers>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>

　　

一直没搞懂Combobox具体是怎么设计的，今天抽空研究了一下，终于看懂了，主要有3个控件组成，ToggleButton，TextBox 和Popup， 

ToggleButton：整个控件是由ToggleButton铺满的HorizontalAlignment="Stretch"，ToggleButton里面由一个Rectangle铺满，设置Combobox的圆角，边框及背景颜色，然后宽度20px的Border，path 为下拉按钮样式， 点击combobox下拉按钮实际是点击ToggleButton

 

TextBox ：当IsEditable为True，会把Textbox 显示出来，Textbox是覆盖在ToggleButton之上的， 注意应设置HorizontalAlignment="Stretch"，这样才会把Textbox铺满，网上很多设置的是Left，很不好选中TextBox，其次还应设置Margin="2,2,22,2"，距右边22px，这样才不能遮挡出下拉按钮

Popup：用于显示ComboboxItem

 

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">            <Grid x:Name="grid">                <Grid.ColumnDefinitions>                    <ColumnDefinition />                    <ColumnDefinition Width="20" />                </Grid.ColumnDefinitions>                <Rectangle Grid.ColumnSpan="2" HorizontalAlignment="Stretch" x:Name="Rectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="3" Fill="LightBlue" /> <!--Combobox控件外壳-->                <Rectangle Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="3" Fill="Gray" /> <!--除开下拉按钮的其他部分-->                <Border Margin="2,2,2,2" Grid.Column="1" Background="Red" Width="Auto" CornerRadius="3,3,3,3" x:Name="drop_border" />                <Path Grid.Column="1" HorizontalAlignment="Center" Width="Auto" x:Name="Arrow" VerticalAlignment="Center" Fill="{x:Null}" Data="M0.5,0.5 L3,6.5 5.5,0.5" Stroke="Black" Margin="5,0,5,0" Height="7" StrokeThickness="2" Stretch="Fill" /> <!--Border 和 Path为下拉按钮-->            </Grid>            <ControlTemplate.Triggers>                <Trigger Property="IsMouseOver" Value="true">                    <Setter TargetName="drop_border" Property="Background" Value="White" />                </Trigger>            </ControlTemplate.Triggers>        </ControlTemplate>
        <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">            <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />        </ControlTemplate>        <Style TargetType="{x:Type ComboBox}">            <Setter Property="SnapsToDevicePixels" Value="true" />            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="{x:Type ComboBox}">                        <Border BorderBrush="Orange" x:Name="border">                            <Grid x:Name="grid">                                <ToggleButton Template="{StaticResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" />                                <ContentPresenter HorizontalAlignment="Left" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False" />                                <TextBox Visibility="Hidden" Margin="2,2,22,2" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" IsReadOnly="{TemplateBinding IsReadOnly}" Foreground="Black" HorizontalAlignment="Stretch" Background="Azure" /> <!--文本输入框，当IsEditable为true 才显示-->                                <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">                                    <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">                                        <Border x:Name="DropDownBorder" Background="WhiteSmoke" CornerRadius="3,3,3,3" />                                        <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True" Foreground="{StaticResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}">                                            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />                                        </ScrollViewer>                                    </Grid>                                </Popup>                            </Grid>                        </Border>                        <ControlTemplate.Triggers>                            <Trigger Property="HasItems" Value="false">                                <Setter Property="MinHeight" Value="95" TargetName="DropDownBorder" />                            </Trigger>                                                        <Trigger Property="IsGrouping" Value="true">                                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />                            </Trigger>                            <Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">                                <Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder" />                            </Trigger>                            <Trigger Property="IsEditable" Value="true">                                <Setter Property="IsTabStop" Value="false" />                                <Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox" />                                <Setter Property="Visibility" Value="Hidden" TargetName="ContentSite" />                            </Trigger>                        </ControlTemplate.Triggers>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>