<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>

WPF Combobox样式的更多相关文章

  1. WPF 自定义ComboBox样式,自定义多选控件

    原文:WPF 自定义ComboBox样式,自定义多选控件 一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样 ...

  2. WPF ComboBox(转)

    WPF ComboBox 创建一个ComboBox控件,并设置ComboBox控件的名称,高度,宽度.及设置ComboBox的垂直和水平对齐. <ComboBox Name="Comb ...

  3. 求助 WPF ListViewItem样式问题

    求助 WPF ListViewItem样式问题 .NET 开发 > Windows Presentation Foundation Вопрос 0 Нужно войти <Style ...

  4. WPF GroupBox 样式分享

    原文:WPF GroupBox 样式分享 默认样式 GroupBox 样式分享" title="WPF GroupBox 样式分享"> 添加样式后 GroupBox ...

  5. WPF DataGrid 样式设置

    隔行换色,鼠标单击,悬浮样式都有,其具体效果如图 1 所示. 图 1 WPF DataGrid 样式设置效果图 其中: 界面设计代码下所示 ? + 查看代码 1 2 3 4 5 6 7 8 9 10 ...

  6. WPF DataGrid 样式分享

    原文:WPF DataGrid 样式分享 隔行换色,鼠标单击,悬浮样式都有 先看效果: 代码: <DataGrid AutoGenerateColumns="False" N ...

  7. wpf 导出Excel Wpf Button 样式 wpf简单进度条 List泛型集合对象排序 C#集合

    wpf 导出Excel   1 private void Button_Click_1(object sender, RoutedEventArgs e) 2 { 3 4 ExportDataGrid ...

  8. 自定义WPF 窗口样式

    原文:自定义WPF 窗口样式 Normal 0 false 7.8 pt 0 2 false false false EN-US ZH-CN X-NONE 自定义 Window 在客户端程序中,经常需 ...

  9. WPF中样式和行为和触发器

    原文:WPF中样式和行为和触发器 样式简介:样式(style)是组织和重用格式化选项的重要工具,不是使用重复的标记填充XAML,以便设置外边距.内边距.颜色以及字体等细节.而是创建一系列封装所有这些细 ...

随机推荐

  1. group_concat函数使用

    t1表 语句: select type,group_concat(name) from t1 group by type 结果

  2. paramiko与MySQL数据库

    一.paramiko 1.利用paramiko连接远端服务器 import paramiko ssh = paramiko.SSHClient() ssh.set_missing_host_key_p ...

  3. windows下运行的linux服务器批量管理工具(带UI界面)

    产生背景: 由于做服务器运维方面的工作,需要一人对近千台LINUX服务器进行统一集中的管理,如同时批量对LINUX服务器执行相关的指令.同时批量对LINUX服务器upload程序包.同时批量对LINU ...

  4. Android开发--仿微信语音对讲录音

    原文地址:http://www.2cto.com/kf/201502/378704.html 自微信出现以来取得了很好的成绩,语音对讲的实现更加方便了人与人之间的交流.今天来实践一下微信的语音对讲的录 ...

  5. 实现android手机来电拦截系统页面弹出自定义页面特效

    如何实现android手机来电拦截系统页面弹出自定义页面特效, 首先:    我们需要注册一个监听来电的广播PhoneStateReceiver 类:其次:    在onReceive里面我们获取an ...

  6. PHP include 和 require 语句

    在 PHP 中,您可以在服务器执行 PHP 文件之前在该文件中插入一个文件的内容. include 和 require 语句用于在执行流中插入写在其他文件中的有用的代码. include 和 requ ...

  7. 启动项目时,报错;Address already in use: JVM_Bind<null>:8080

    Address already in use: JVM_Bind<null>:8080在MyEclipse启动或者是tomcat启动的时候出现:Address already in use ...

  8. CentOS 6.5 下离线安装nginx

    一.由于linux下安装nginx 需要  zlib zlib-devel openssl openssl-devel pcre pcre-devel gcc这些依赖,而这些依赖打安装包在我们系统的光 ...

  9. liunx 开机流程与模块管理

    系统开机的经过可以汇整成底下的流程的: 加载 BIOS 的硬件信息与进行自我测试,并依据设定取得第一个可开机的装置: 读取并执行第一个开机装置内 MBR 的 boot Loader (亦即是 grub ...

  10. php 随记

    1. 删除数组里面为空的元素 $arr = [ '1', '0', '', '[]', 'false', 'true', ' ' ]; //以以上的数组为例 $codes = array_filter ...