WPF 控件 【C】 ComboBox (一) ComboBox+自定义图片：其核心是采用了VisualBrush+Canvas+Path组合的方式。

最新推荐文章于 2025-02-18 08:34:29 发布
最新推荐文章于 2025-02-18 08:34:29 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： ---------- 【控件+自定义控件】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xpj8888/article/details/83115237
版权
本文介绍如何使用WPF自定义一个带有图标的ComboBox组件，通过详细的设计样式和代码示例，展示了如何实现组合框中图标与文本的完美结合，解决了传统ComboBox无法添加自定义图标的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考：

https://www.cnblogs.com/anding/p/4993655.html

https://blog.youkuaiyun.com/wqy_zyc/article/details/79566506

 https://www.cnblogs.com/xpvincent/p/3848790.html       

        传统的ComboBox没办法添加自定义图标，存在模糊的缺点。采用了自定义的图标，可以解决该问题。比如我要制作下面的自定义ComboBox空间：

                                          

 

ComboBoxStyle

    <Style TargetType="ComboBox" x:Key="ComboBoxStyle34x30">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid Background="#F7FDF7">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="30" />
                        </Grid.ColumnDefinitions>
                        <TextBox  Grid.Column="0" IsReadOnly="{TemplateBinding IsReadOnly}" Text="{TemplateBinding Text}" VerticalContentAlignment="Center"></TextBox>
                        <Border  Grid.Column="0" BorderThickness="1,1,0,1" BorderBrush="#FFABADB3" CornerRadius="1,0,0,1"></Border>

                        <Border Grid.Column="1" BorderThickness="0,1,1,1" BorderBrush="#FFABADB3" CornerRadius="0,1,1,0">
                            <ToggleButton Style="{StaticResource ComboxStyleBtn34x30}" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Release"></ToggleButton>
                        </Border>
                        <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
                            <Border CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                                <Border.Effect>
                                    <DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="0.5"/>
                                </Border.Effect>
                                <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource ScrollViewerStyle}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
                                    
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/>
                                </ScrollViewer>
                            </Border>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

ComboxStyleBtn34x30

 <Style TargetType="ToggleButton" x:Key="ComboxStyleBtn34x30">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border x:Name="ComboBoxButton">
                        <Border.Background>
                            <VisualBrush>
                                <VisualBrush.Visual>
                                    <Canvas Width="34" Height="30">
                                        <Path Data="M0.5,5.5 C0.5,2.7385763 2.7385763,0.5 5.5,0.5 L116.5,0.5 C119.26142,0.5 121.5,2.7385763 121.5,5.5 L121.5,46.5 C121.5,49.261424 119.26142,51.5 116.5,51.5 L5.5,51.5 C2.7385763,51.5 0.5,49.261424 0.5,46.5 z" HorizontalAlignment="Left" Height="30"  Stretch="Fill" Stroke="#FFCDCDCD" VerticalAlignment="Bottom" Width="34" >
                                            <Path.Fill>
                                                <LinearGradientBrush EndPoint="0.5,1" Opacity="0.99" StartPoint="0.5,0">
                                                    <GradientStop Color="#FFDCE0E3" Offset="0.456"/>
                                                    <GradientStop Color="#FFD8DDE0" Offset="0.828"/>
                                                    <GradientStop Color="White" Offset="0.033"/>
                                                    <GradientStop Color="White" Offset="0.979"/>
                                                </LinearGradientBrush>
                                            </Path.Fill>
                                        </Path>
                                        <Path Stroke="#FF4E7BBF" Height="1.887" Canvas.Left="8.997" Canvas.Top="15.353" Width="10.77" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.52,1.25 z" Stretch="Fill" Fill="#FF4E7BBF">
                                            <Path.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform/>
                                                    <SkewTransform/>
                                                    <RotateTransform Angle="42.475"/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Path.RenderTransform>
                                        </Path>
                                        <Path Stroke="#FF4E7BBF" Height="1.887" Canvas.Left="16.119" Canvas.Top="15.277" Width="11.034" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.784,1.25 z" Stretch="Fill" Fill="#FF4E7BBF">
                                            <Path.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform/>
                                                    <SkewTransform/>
                                                    <RotateTransform Angle="-41.32"/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Canvas>
                                </VisualBrush.Visual>
                            </VisualBrush>
                        </Border.Background>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="AreAnyTouchesOver" Value="True">
                            <Setter Property="Background" TargetName="ComboBoxButton">
                                <Setter.Value>
                                    <VisualBrush>
                                        <VisualBrush.Visual>
                                            <Canvas Width="34" Height="30">
                                                <Path Data="M0.5,0.6165023 C2.997254,0.59726893 2.8098952,0.65987028 2.842921,0.60897645 L107.3705,0.37740332 C116.99575,0.91922384 121.5,4.2233519 121.5,6.9847756 L121.5,44.756377 C121.90224,49.208879 109.43357,51.497385 105.87162,51.5 L5.5,51.5 C2.7385763,51.5 5.4499507,51.480567 0.5,51.506233 z" HorizontalAlignment="Left" Height="40.094"  Stretch="Fill" Stroke="#FF4E7BBF" VerticalAlignment="Bottom" Width="38.003" />
                                                <Path Data="M0.5,0.6165023 C2.997254,0.59726893 2.8098952,0.65987028 2.842921,0.60897645 L107.3705,0.37740332 C116.99575,0.91922384 121.5,4.2233519 121.5,6.9847756 L121.5,44.756377 C121.90224,49.208879 109.43357,51.497385 105.87162,51.5 L5.5,51.5 C2.7385763,51.5 5.4499507,51.480567 0.5,51.506233 z" HorizontalAlignment="Left" Height="35.927"  Stretch="Fill" VerticalAlignment="Bottom" Width="33.49" Canvas.Left="2.375" Canvas.Top="2.042" StrokeThickness="0" >
                                                    <Path.Fill>
                                                        <LinearGradientBrush EndPoint="0.5,1" Opacity="0.99" StartPoint="0.5,0">
                                                            <GradientStop Color="#FF8EC3F2" Offset="0.456"/>
                                                            <GradientStop Color="#FF86AFDF" Offset="0.828"/>
                                                            <GradientStop Color="#FF91CBF9" Offset="0.033"/>
                                                            <GradientStop Color="#FFD9E0E6" Offset="0.979"/>
                                                        </LinearGradientBrush>
                                                    </Path.Fill>
                                                </Path>
                                                <Path Stroke="White" Height="1.887" Canvas.Left="12.08" Canvas.Top="21.603" Width="10.77" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.52,1.25 z" Stretch="Fill" Fill="White">
                                                    <Path.RenderTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform/>
                                                            <SkewTransform/>
                                                            <RotateTransform Angle="42.475"/>
                                                            <TranslateTransform/>
                                                        </TransformGroup>
                                                    </Path.RenderTransform>
                                                </Path>
                                                <Path Stroke="White" Height="1.887" Canvas.Left="19.202" Canvas.Top="21.527" Width="11.034" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.784,1.25 z" Stretch="Fill" Fill="White">
                                                    <Path.RenderTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform/>
                                                            <SkewTransform/>
                                                            <RotateTransform Angle="-41.32"/>
                                                            <TranslateTransform/>
                                                        </TransformGroup>
                                                    </Path.RenderTransform>
                                                </Path>
                                            </Canvas>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="ComboBoxButton">
                                <Setter.Value>
                                    <VisualBrush>
                                        <VisualBrush.Visual>
                                            <Canvas Width="34" Height="30">
                                                <Path Data="M0.5,5.5 C0.5,2.7385763 2.7385763,0.5 5.5,0.5 L116.5,0.5 C119.26142,0.5 121.5,2.7385763 121.5,5.5 L121.5,46.5 C121.5,49.261424 119.26142,51.5 116.5,51.5 L5.5,51.5 C2.7385763,51.5 0.5,49.261424 0.5,46.5 z" HorizontalAlignment="Left" Height="30"  Stretch="Fill" Stroke="#FF4E7BBF" VerticalAlignment="Bottom" Width="34" >
                                                    <Path.Fill>
                                                        <LinearGradientBrush EndPoint="0.5,1 " StartPoint="0.5,0">
                                                            <GradientStop Color="White" Offset="0.983"/>
                                                            <GradientStop Color="White"/>
                                                        </LinearGradientBrush>
                                                    </Path.Fill>
                                                </Path>
                                                <Path Data="M0.5,5.5 C0.5,2.7385763 2.7385763,0.5 5.5,0.5 L116.5,0.5 C119.26142,0.5 121.5,2.7385763 121.5,5.5 L121.5,46.5 C121.5,49.261424 119.26142,51.5 116.5,51.5 L5.5,51.5 C2.7385763,51.5 0.5,49.261424 0.5,46.5 z" HorizontalAlignment="Left" Height="25.67"  Stretch="Fill" VerticalAlignment="Bottom" Width="29.333" Canvas.Left="2.331" Canvas.Top="2.163" >
                                                    <Path.Fill>
                                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                            <GradientStop Color="#FF86AEDE" Offset="0.812"/>
                                                            <GradientStop Color="#FF91CCFA"/>
                                                            <GradientStop Color="#FF8DC1F0" Offset="0.565"/>
                                                            <GradientStop Color="#FFDFE3E6" Offset="1"/>
                                                        </LinearGradientBrush>
                                                    </Path.Fill>
                                                </Path>
                                                <Path Stroke="White" Height="1.887" Canvas.Left="9.565" Canvas.Top="15.08" Width="10.77" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.52,1.25 z" Stretch="Fill" Fill="White">
                                                    <Path.RenderTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform/>
                                                            <SkewTransform/>
                                                            <RotateTransform Angle="42.475"/>
                                                            <TranslateTransform/>
                                                        </TransformGroup>
                                                    </Path.RenderTransform>
                                                </Path>
                                                <Path Stroke="White" Height="1.887" Canvas.Left="16.687" Canvas.Top="15.004" Width="11.034" StrokeThickness="2.5" RenderTransformOrigin="0.5,0.5" Data="M1.25,1.25 L9.784,1.25 z" Stretch="Fill" Fill="White">
                                                    <Path.RenderTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform/>
                                                            <SkewTransform/>
                                                            <RotateTransform Angle="-41.32"/>
                                                            <TranslateTransform/>
                                                        </TransformGroup>
                                                    </Path.RenderTransform>
                                                </Path>
                                            </Canvas>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

WPF基础知识（二）
hccee的博客
11-12 1314
WPF基础知识内容二
WPF编程宝典 part1
07-20
4.1.4 WPF使用依赖项属性的方式 87 4.1.5 共享的依赖项属性 88 4.1.6 附加的依赖项属性 88 4.2 属性验证 90 4.2.1 验证回调 90 4.2.2 强制回调 91 4.3 小结 93 第5章 路由事件 95 5.1 理解路由事件 95 5.1.1 定义、...
简述WPF中的画刷(Brush)
热门推荐
祝紫山（大可山人）博客[GDI+,WPF, .Net图形图像]
09-04 2万+
--------------------------------------------------------------------------------引用或转载时请保留以下信息：大可山 [MSN:a3news(AT)hotmail.com] http://www.zpxp.com http://www.brawdraw.com萝卜鼠在线图形图像处理--------------------
WPF 控件【V】VisualBrush (一) VisualBrush 自定义按钮+自定义矢量图标的实现
xpj8888的博客
10-10 1294
三个例子中，有5个公用文件，主要体现在ImageButtonStyle的不同： MainWindow.XAML <Window x:Class="自定义按钮_自定义图标.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=...
为ComboBox控件添加图片
最新发布
biyusr的专栏
02-18 700
comboBox1.Items.Add(new ComboBoxExItem("【孟宪会之精彩世界】", 0));comboBox1.Items.Add(new ComboBoxExItem("【孟宪会之精彩世界】", 1));comboBox1.Items.Add(new ComboBoxExItem("【孟宪会之精彩世界】", 2));扩展类 ComboBoxEx.cs。
C# combobox下拉列表中可添加图片
05-14
一款非常实用的C# 的combobox的第三方控件，可以实现下拉后在下拉框中添加图片的功能，忘对有此功能需求的朋友所有帮助。
WPF 简单的ComboBox自定义样式。
chulijun3107的博客
09-28 6497
ComboBox样式显示效果
WPF combobox button 漂亮样式
12-30
WPF combobox button 漂亮样式 自己开发用还是比较合适的，有助于界面美化
WPF 下拉列表框ComboBox扩展控件
04-26
对WPF的ComboBox进行了扩展，现在可以在下拉列表中嵌入DataGrid/ListView/ListBox等数据控件，实现了展开后列表的自动选择，自动滚屏，并完全支持数据的绑定操作
如何在ComBox选项中添加图片
鹜然回首的空间
02-11 1600
在学习Flex控件时找到一个添加选项效果的方法！觉得挺有用的，于是就拿来与大家分享了！网址是：http://blog.flexexamples.com/2007/08/17/displaying-icons-in-a-flex-list-control/
一款非常好的WPF编程宝典2010 源代码
04-14
第1章 WPF概述 1 1.1 理解Windows图形 1 1.1.1 DirectX：新的图形引擎 1 1.1.2 硬件加速与WPF 2 1.2 WPF：高级API 4 1.2.1 分辨率无关性 5 1.2.2 WPF的演化 9 1.2.3 Windows窗体将继续保留 11 1.2.4 DirectX...
带图标的ComboBox
11-17
带图标的下拉列表框控件，不但可以使你的程序界面美观，而且还能使你的下拉列表框变高。
带图片显示的combox控件
12-18
带有图片显示的combox控件，开发环境vs2012
一个功能扩展的Combox下拉选项框COMBBOX，扩展后可在下拉框的起始位置显示颜色、图片、字体样式等，很有意思的功能，也比较实用，压缩包内含有控件源代码以及四个使用示例，都可正确编译。
02-22
一个功能扩展的Combox下拉选项框COMBBOX，扩展后可在下拉框的起始位置显示颜色、图片、字体样式等，很有意思的功能，也比较实用，压缩包内含有控件源代码以及四个使用示例，都可正确编译。
超酷显示图片的Combox控件
10-07
超酷显示图片的Combox控件，改变传统组合框风格。
【示例】使用WPF制作旗（ViewBox、Canvas、Path的使用）
01-04
使用WPF制作旗的简单示例，用到了ViewBox、Canvas、Path，代码简单明了，一看就懂，一看就会。
WPF编程宝典 part2
07-20
4.1.4 WPF使用依赖项属性的方式 87 4.1.5 共享的依赖项属性 88 4.1.6 附加的依赖项属性 88 4.2 属性验证 90 4.2.1 验证回调 90 4.2.2 强制回调 91 4.3 小结 93 第5章 路由事件 95 5.1 理解路由事件 95 5.1.1 定义、...
WPF ComboBox控件
yb305
01-28 1334
一．Combox                                                  二．Combox显示图标 代码：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我爱AI

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值