WPF下拉框ComboBox样式_wpf 下拉框样式

相关文章推荐

力能扛鼎的咖啡 · I need help with ...· 8 月前 ·

温柔的楼梯 · 使用websocket-sharp来创建c# ...· 11 月前 ·

才高八斗的李子 · table根据一列判断另一列 - ...· 1 年前 ·

健身的莴苣 · ParaView数据文件(pvd)的格式与读 ...· 1 年前 ·

爱健身的杯子 · sed可以用正则表达式只编辑文件的一部分· 1 年前 ·

显示效果下图：

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

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

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

样式代码如下：

<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.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}">
                            <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">
        <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窗体的引用如下（动态数据绑定等）：

<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 应用程序中常见的用户界面元素，它能够以分层的方式展示数据，提供更好的用户体验。本文将深入探讨如何基于 WPF 创建一个可定制的树形下拉菜单控件，涵盖从原理到实际实现的关键步骤。在《 C# WPF 入门学习主线篇（九）—— ComboBox 常见属性和事件》这篇文章中，我们深入探讨了 WPF 中 ` ComboBox ` 控件的使用。本文详细介绍了 ` ComboBox ` 的常见属性，如 `ItemsSource`、`SelectedItem`、`SelectedIndex`、`IsEditable` 和 `DisplayMemberPath`，并展示了如何处理 `SelectionChanged`、`DropDownOpened` 和 `DropDownClosed` 等事件。二、样式 Style - 不可编辑请设置属性为ReadOnly=true属性 <ResourceDictionary xmlns="http://schemas. microsoft .com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.m... 开发工具与关键技术： Microsoft Visual Studio 2017、 WPF 这里这个下拉式菜单栏用的是一个RadioButton（单选按钮）和Popup（包含内容的弹出项）组合形成的下拉式菜单栏。菜单栏显示：点击RadioButton即可显示。菜单栏隐藏：点击菜单栏外屏幕任意一处即可隐藏或选中该菜单栏内的某一项时隐藏菜单栏，但是选中该菜单栏内的某一项时隐藏菜单栏这个代码我这里因为菜单栏的每一项的点击事件里面含有其他代码所以不方便就没有给出来，需要的话自行加上，如果你是按照我下面写的方法来 ① 默认的ItemsPresenter 相当于占位符作用，竖向显示 ② ItemsPanel 竖向/横向显示：使用StackPanel/WrapPanel ③ ItemContainerStyle items 样式可自定义（包括鼠标滑过等的效果） xmlns:d="http://schemas. microsoft .com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns="http://schemas. microsoft .com/winfx/2006/xaml/presen <Style x:Key=" Combobox _Base" TargetType="{x:Type ComboBox }"> <Setter Property="IsEditable" Value="True" /> <Setter Property="IsReadOnly" Value="True" /> <Setter Property="SnapsToDevice... 网上没有啥好看的样式，算了自己直接简单改改，符合项目要求。直接右击 ComboBox 控件，编辑副本。1.新建字典文件 ComboBox Style.xaml，调试模式直接改样式就能看到效果。2.前段引用样式，其中的变量可自己替换为常量。 <Window.Resources> <ControlTemplate x:Key=" ComboBox TextBox" TargetType="{x:Type TextBox}"> <Border x:Name="PART_ContentHost" Focusable="Fals...