WPF下拉框ComboBox样式

这篇具有很好参考价值的文章主要介绍了WPF下拉框ComboBox样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

显示效果下图:

1、静态显示如图1,悬浮如图2

2、下拉的Popup带阴影(无Border);下拉三角图标用的是自己的png图片,可任意替换(其他或Path数据等自己处理);宽高等可直接在样式代码里修改。

3、实际项目里,对下拉的滚动条做了美化处理,此处没附带上相关代码。有需求的可自己添加或用第三方控件库帮助类实现(如Panuon,其ScrollViewerHelper类可方便的修改宽度和圆角)

wpf combobox样式,.NET,wpf,c#,microsoftwpf combobox样式,.NET,wpf,c#,microsoft

样式代码如下:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Border x:Name="Border" Grid.ColumnSpan="2" BorderThickness="0" />
            <Border Grid.Column="0" Background="Transparent" />

            <Image Grid.Column="1" x:Name="downArrow" Source="/Image/cmbDown.png" Stretch="Uniform" Width="24" Height="24" Margin="6,0,6,0"/>
            <Image Grid.Column="1" x:Name="upArrow" Source="/Image/cmbUp.png" Stretch="Uniform" Width="24" Height="24" Margin="6,0,6,0" Visibility="Collapsed" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="true">
                <Setter TargetName="downArrow" Property="Visibility" Value="Collapsed" />
                <Setter TargetName="upArrow" Property="Visibility" Value="Visible" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
        <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
    </ControlTemplate>

    <Style x:Key="WpfComboBoxStyle" TargetType="{x:Type ComboBox}">
        <Setter Property="Height" Value="36" />
        <Setter Property="Padding" Value="12,0,33,0" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="MaxDropDownHeight" Value="150" />
        <Setter Property="BorderBrush" Value="#E4E9F2" />
        <Setter Property="Background" Value="#FFFFFF" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
        <Setter Property="Foreground" Value="#3E434D" />
        <Setter Property="MinWidth" Value="120" />
        <Setter Property="MinHeight" Value="30" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <!--<ControlTemplate.Resources>
                        <ResourceDictionary Source="pack://application:,,,/Panuon.UI.Silver;component/Control.xaml" />
                    </ControlTemplate.Resources>-->
                    <Border x:Name="myBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                        <Grid >
                            <ToggleButton x:Name="ToggleButton"
                                            Template="{StaticResource ComboBoxToggleButton}"
                                            Grid.Column="2"
                                            Focusable="false"
                                            ClickMode="Press"
                                            IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <ContentPresenter x:Name="ContentSite"
                                            IsHitTestVisible="False"
                                            Content="{TemplateBinding SelectionBoxItem}"
                                            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                            Margin="{TemplateBinding Padding}"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Left">
                            </ContentPresenter>
                            <TextBox x:Name="PART_EditableTextBox"
                                           Style="{x:Null}"
                                           Template="{StaticResource ComboBoxTextBox}" 
                                           HorizontalAlignment="Left"
                                           VerticalAlignment="Bottom"
                                           Margin="3,3,23,3"
                                           Focusable="True"
                                           Background="Transparent"
                                           Visibility="Hidden"
                                           IsReadOnly="{TemplateBinding IsReadOnly}" />
                            <Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" HorizontalOffset="-1" VerticalOffset="2" AllowsTransparency="True" MaxHeight="{TemplateBinding MaxDropDownHeight}" Focusable="False" PopupAnimation="Slide">
                                <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}" Margin="18,0,18,18">
                                    <!--E4E9F2-->
                                    <Border x:Name="DropDownBorder" BorderBrush="#E4E9F2" BorderThickness="1,1,1,1">
                                        <Border.Background>
                                            <SolidColorBrush Color="White" />
                                        </Border.Background>
                                    </Border>
                                    <ScrollViewer Margin="1,5" Padding="0" SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                    </ScrollViewer>

                                    <Grid.Effect>
                                        <DropShadowEffect ShadowDepth="5" BlurRadius="18" Opacity="0.1" Color="#000000"></DropShadowEffect>
                                    </Grid.Effect>
                                </Grid>
                            </Popup>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="myBorder" Property="BorderBrush" Value="#3377FF" />
                        </Trigger>

                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                        </Trigger>
                        <Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
                            <Setter TargetName="DropDownBorder" Property="Margin" Value="0,4,0,0" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ComboBoxItem" BasedOn="{StaticResource {x:Type ComboBoxItem}}">
                    <Setter Property="Foreground" Value="#3E434D" />
                    <Setter Property="Height" Value="36" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ComboBoxItem">
                                <Border x:Name="Border" SnapsToDevicePixels="true" Background="Transparent" VerticalAlignment="Center" Padding="6,10,6,0">
                                    <ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Margin="{TemplateBinding Margin}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="Border" Property="Background" Value="#EAF1FF" />
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Border" Property="Background" Value="#D6E4FF" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

Xaml窗体的引用如下:

<Window x:Class="WpfApp图片比对.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp图片比对"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="500">
    <Grid>
        <WrapPanel HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,20,0,0">
            <ComboBox Style="{StaticResource WpfComboBoxStyle}">
                <ComboBoxItem>下拉选项111111111</ComboBoxItem>
                <ComboBoxItem>下拉选项2</ComboBoxItem>
                <ComboBoxItem>下拉选项333</ComboBoxItem>
                <ComboBoxItem>下拉选项4</ComboBoxItem>
            </ComboBox>
        </WrapPanel>
      
    </Grid>
</Window>

Xaml窗体的引用如下(动态数据绑定等):文章来源地址https://www.toymoban.com/news/detail-596453.html

<ComboBox Style="{StaticResource WpfComboBoxStyle}" Height="28" MinHeight="28" Width="100" MinWidth="100" ItemsSource="{Binding XxxModelList}" ItemContainerStyle="{StaticResource XxxComboBoxItemStyle}" SelectedItem="{Binding XxxModel}" >
    <ComboBox.ItemTemplate>
       <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" ToolTip="{Binding ToolTip}" />                          
       </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

到了这里,关于WPF下拉框ComboBox样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C++ Qt开发:ComboBox下拉组合框组件

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍 ComboBox 下拉组合框组件的常用方法及灵活运用。 在Qt中,ComboBox(组合框)是一

    2024年02月04日
    浏览(31)
  • easyui combobox下拉框组件输入检索全模糊查询

            easyui下拉组件(combobox),输入检索下拉内容,是默认的右模糊匹配,而且不支持选择。因业务要求需要做成全模糊查询,目前网上搜索有两种方案:         1.修改easyui源码,这个得看运气,每个项目easyui版本不相同,文章里提供的源码位置我这个版本没有对

    2024年04月15日
    浏览(33)
  • 【QT】如何调整 comboBox下拉列表的间距或高度以及使下拉列表的字体居中

    默认的QComboBox的下拉列表看起来非常的拥挤,且不美观。 那怎样调整comboBox下拉列表的间距或高度呢?请看下面的方法: 最简单的方法,两行代码就可解决: 这种方法同时可以实现其comboBox中的 当前项 或 下拉列表项 的显示位置(靠左,靠右,居中)

    2024年02月13日
    浏览(53)
  • 解决Winform的ComboBox下拉框鼠标双击事件无效的问题

    今天碰到一个需求:就是鼠标双击ComboBox后,然后模拟键盘空格键按下,测试发现,在ComboBox可以展开下拉框的情况下,鼠标双击事件是没有用的。想要实现鼠标双击事件,需要利用到鼠标单击事件,在鼠标单击事件中判断(当前时间减去上一次单击的时间)是否小于某个值(如

    2024年02月12日
    浏览(35)
  • 改造winform的listview实现双击修改数据editbox和下拉框选择数据combobox功能

    一直以来 winform的listview 都只是作为 数据输出 显示 来用, 想要实现 数据的双向操作 比较难 之前都需要用其他表格类控件实现这个 双击编辑文本 ,双击实现 下拉列表框选择文本 功能, 而且其中有很大一部分是ocx组件,  那么就需要在客户电脑上regsvr32 注册它, 这样就需要管理

    2024年02月06日
    浏览(35)
  • Wpf在.Net 6 下该用哪个Mvvm框架-Microsoft.Toolkit.Mvvm

    前言 在Wpf下最常使用的就是Mvvm模式了,有自己造轮子构建Mvvm框架的,也有使用现成的开源项目,我之前一直使用的是轻量级的MvvmLight了,这个框架还是非常不错的,使用也简单,不占用太大空间,其中最喜欢的莫过于全局Messenger了,可谓是神器。最近有个项目使用.Net6开发

    2024年02月06日
    浏览(40)
  • 在 QML 中,ComboBox 是一种常用的用户界面控件,通常用于提供一个下拉式的选择框,允许用户从预定义的选项列表中选择一个值

    ComboBox 详解: 以下是 ComboBox 的一些重要属性和特性: model : 用于指定 ComboBox 中的选项列表,可以是一个数组、列表、模型或者其他可迭代的数据结构。 editable : 用于指定是否允许用户编辑 ComboBox 中的文本输入框,以便输入非预定义的选项。 currentIndex : 用于获取或设置当前

    2024年04月15日
    浏览(33)
  • WPFdatagrid结合comboBox

    在WPF的DataGrid中希望结合使用ComboBox下拉框,达到下拉选择绑定的效果,在实现的过程中,遇到了一些奇怪的问题,因此记录下来。 总共有三种ItemSource常见绑定实现方式: 1.ItemSource是静态资源 2.ItemSource是ComboBoxItem类型的内联集合 3.ItemSource是普通数据集合,需要采用ElementSt

    2024年02月07日
    浏览(25)
  • C#中的ComboBox控件

    当使用C#中的 ComboBox 控件时,你可以通过以下详细方法使用它: 在窗体上放置 ComboBox 控件: 在 Visual Studio 的窗体设计器中,从工具箱中拖动并放置一个 ComboBox 控件到你的窗体上。 设置 ComboBox 的属性: Items :用于设置或获取 ComboBox 中的选项集合。你可以通过添加项到集合

    2024年02月15日
    浏览(33)
  • 【QT】ComboBox的使用(14)

    ComboBox这个控件我常用于多文本的储存、调用,正如他的中文意思为:下拉列表框。 下拉列表框:字面意思就是一个多文本的列表框,今天来看下如何使用ComboBox这个控件。 1.python 3.7.8   可直接进入官网下载安装:Download Python | Python.org 2.QT Designer  官方下载路径:Qt Designe

    2024年02月11日
    浏览(24)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包