WPF框架,修改ComboBox控件背景色 ,为何如此困难?

news/2024/9/25 15:25:36/

直接修改Background属性不可行

修改控件背景颜色,很多人第一反应便是修改Background属性,但是修改过后便会发现,控件的颜色没有发生任何变化。
于是在网上搜索答案,便会发现一个异常尴尬的情况,要么就行代码简单但是并不管用,要么就是虽然管用,但是要添加一大堆的样式代码,而且修改的样式不仅是背景色,边框,字体,几乎所有的样式都被修改了。

我只想修改背景色这一个样式而已,就这么一个简简单单的要求,为什么要加这么多代码?
最气人的是,网上还没有单独修改背景颜色的方法。要改样式,就逼你全部一起修改。

这是wpf的模板的特性导致的,相比于修改全套的样式,保留原有样式仅仅修改背景色的话,反而要添加最多的代码,这也是为何网上目前没有仅修改背景色的方法。

控件的模板

在刚接触wpf的时候,你可能会认为这个和winform框架差不多,每个控件都是相互独立的。但是如果你了解了控件的模板,也就是ControlTemplate属性,你就会发现,wpf框架的页面布局方式,其实和html更像,绝大数控件,都是可以嵌套的。

这也是为何修改Background属性后,ComboBox的背景色没有变化。因为ComboBox.ControlTemplate属性默认值不为null,它里面自带的嵌套控件覆盖了你修改的背景颜色,所以最后展示出来,背景颜色没有任何变化。

但是,微软仅提供了设置新模板的方法,并没有提供修改原有默认模板的方法。
也就是说,要修改背景颜色,你就必须设计一套全新的模板,来替换掉原有的模板。这也是为什么网上提供的,修改背景颜色的方法,都连带着修改了所有的样式,因为从头设计模板,就意味着从头放置所有需要的嵌套控件,从头设计所有的样式。

唯一仅修改背景颜色的方式,便是将原有模板拷贝一份,在此基础上进行修改。

背景颜色修改

由于模板太大,这里建议放到单独的文件中。

<ComboBox Grid.Row="0" Template="{DynamicResource ComboBoxDiyTemplate}"><ComboBox.Resources><ResourceDictionary Source="/Style/ComboboxDiy.xaml"/></ComboBox.Resources>
</ComboBox>

然后在ComboboxDiy.xaml文件中修改背景颜色

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2"><!-- 重写ComboBox的样式和模板 --><LinearGradientBrush x:Key="ComboBox.Static.Background" EndPoint="0,1" StartPoint="0,0"><GradientStop Color="#FFF0F0F0" Offset="0.0"/><GradientStop Color="#FFE5E5E5" Offset="1.0"/></LinearGradientBrush><SolidColorBrush x:Key="ComboBox.Static.Border" Color="#FFACACAC"/><SolidColorBrush x:Key="ComboBox.Static.Glyph" Color="#FF606060"/><SolidColorBrush x:Key="ComboBox.Static.Editable.Background" Color="#FFFFFFFF"/><SolidColorBrush x:Key="ComboBox.Static.Editable.Border" Color="#FFABADB3"/><SolidColorBrush x:Key="ComboBox.Static.Editable.Button.Background" Color="Transparent"/><SolidColorBrush x:Key="ComboBox.Static.Editable.Button.Border" Color="Transparent"/><LinearGradientBrush x:Key="ComboBox.MouseOver.Background" EndPoint="0,1" StartPoint="0,0"><GradientStop Color="#FFECF4FC" Offset="0.0"/><GradientStop Color="#FFDCECFC" Offset="1.0"/></LinearGradientBrush><SolidColorBrush x:Key="ComboBox.MouseOver.Border" Color="#FF7EB4EA"/><SolidColorBrush x:Key="ComboBox.MouseOver.Glyph" Color="#FF000000"/><SolidColorBrush x:Key="ComboBox.MouseOver.Editable.Background" Color="#FFFFFFFF"/><SolidColorBrush x:Key="ComboBox.MouseOver.Editable.Border" Color="#FF7EB4EA"/><LinearGradientBrush x:Key="ComboBox.MouseOver.Editable.Button.Background" EndPoint="0,1" StartPoint="0,0"><GradientStop Color="#FFEBF4FC" Offset="0.0"/><GradientStop Color="#FFDCECFC" Offset="1.0"/></LinearGradientBrush><SolidColorBrush x:Key="ComboBox.MouseOver.Editable.Button.Border" Color="#FF7EB4EA"/><LinearGradientBrush x:Key="ComboBox.Pressed.Background" EndPoint="0,1" StartPoint="0,0"><GradientStop Color="#FFDAECFC" Offset="0.0"/><GradientStop Color="#FFC4E0FC" Offset="1.0"/></LinearGradientBrush><SolidColorBrush x:Key="ComboBox.Pressed.Border" Color="#FF569DE5"/><SolidColorBrush x:Key="ComboBox.Pressed.Glyph" Color="#FF000000"/><SolidColorBrush x:Key="ComboBox.Pressed.Editable.Background" Color="#FFFFFFFF"/><SolidColorBrush x:Key="ComboBox.Pressed.Editable.Border" Color="#FF569DE5"/><LinearGradientBrush x:Key="ComboBox.Pressed.Editable.Button.Background" EndPoint="0,1" StartPoint="0,0"><GradientStop Color="#FFDAEBFC" Offset="0.0"/><GradientStop Color="#FFC4E0FC" Offset="1.0"/></LinearGradientBrush><SolidColorBrush x:Key="ComboBox.Pressed.Editable.Button.Border" Color="#FF569DE5"/><SolidColorBrush x:Key="ComboBox.Disabled.Background" Color="#FFF0F0F0"/><SolidColorBrush x:Key="ComboBox.Disabled.Border" Color="#FFD9D9D9"/><SolidColorBrush x:Key="ComboBox.Disabled.Glyph" Color="#FFBFBFBF"/><SolidColorBrush x:Key="ComboBox.Disabled.Editable.Background" Color="#FFFFFFFF"/><SolidColorBrush x:Key="ComboBox.Disabled.Editable.Border" Color="#FFBFBFBF"/><SolidColorBrush x:Key="ComboBox.Disabled.Editable.Button.Background" Color="Transparent"/><SolidColorBrush x:Key="ComboBox.Disabled.Editable.Button.Border" Color="Transparent"/><Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"><Setter Property="OverridesDefaultStyle" Value="true"/><Setter Property="IsTabStop" Value="false"/><Setter Property="Focusable" Value="false"/><Setter Property="ClickMode" Value="Press"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ToggleButton}"><!-- 在下面的Border中修改背景颜色 当前案例中为白色White --><Border x:Name="templateRoot" Background="White" BorderBrush="{StaticResource ComboBox.Static.Border}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true"><Border x:Name="splitBorder" BorderBrush="Transparent" BorderThickness="1" HorizontalAlignment="Right" Margin="0" SnapsToDevicePixels="true" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"><Path x:Name="arrow" Data="F1 M 0,0 L 2.667,2.66665 L 5.3334,0 L 5.3334,-1.78168 L 2.6667,0.88501 L0,-1.78168 L0,0 Z" Fill="{StaticResource ComboBox.Static.Glyph}" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"/></Border></Border><ControlTemplate.Triggers><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="true"/><Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=Self}}" Value="false"/><Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=Self}}" Value="false"/><Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Mode=Self}}" Value="true"/></MultiDataTrigger.Conditions><Setter Property="Background" TargetName="templateRoot" Value="{StaticResource ComboBox.Static.Editable.Background}"/><Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource ComboBox.Static.Editable.Border}"/><Setter Property="Background" TargetName="splitBorder" Value="{StaticResource ComboBox.Static.Editable.Button.Background}"/><Setter Property="BorderBrush" TargetName="splitBorder" Value="{StaticResource ComboBox.Static.Editable.Button.Border}"/></MultiDataTrigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="Fill" TargetName="arrow" Value="{StaticResource ComboBox.MouseOver.Glyph}"/></Trigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=Self}}" Value="true"/><Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="false"/></MultiDataTrigger.Conditions><Setter Property="Background" TargetName="templateRoot" Value="{StaticResource ComboBox.MouseOver.Background}"/><Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource ComboBox.MouseOver.Border}"/></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=Self}}" Value="true"/><Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="true"/></MultiDataTrigger.Conditions><Setter Property="Background" TargetName="templateRoot" Value="{StaticResource ComboBox.MouseOver.Editable.Background}"/><Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource ComboBox.MouseOver.Editable.Border}"/><Setter Property="Background" TargetName="splitBorder" Value="{StaticResource ComboBox.MouseOver.Editable.Button.Background}"/><Setter Property="BorderBrush" TargetName="splitBorder" Value="{StaticResource ComboBox.MouseOver.Editable.Button.Border}"/></MultiDataTrigger><Trigger Property="IsPressed" Value="true"><Setter Property="Fill" TargetName="arrow" Value="{StaticResource ComboBox.Pressed.Glyph}"/></Trigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=Self}}" Value="true"/><Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="false"/></MultiDataTrigger.Conditions><Setter Property="Background" TargetName="templateRoot" Value="{StaticResource ComboBox.Pressed.Background}"/><Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource ComboBox.Pressed.Border}"/></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=Self}}" Value="true"/><Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="true"/></MultiDataTrigger.Conditions><Setter Property="Background" TargetName="templateRoot" Value="{StaticResource ComboBox.Pressed.Editable.Background}"/><Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource ComboBox.Pressed.Editable.Border}"/><Setter Property="Background" TargetName="splitBorder" Value="{StaticResource ComboBox.Pressed.Editable.Button.Background}"/><Setter Property="BorderBrush" TargetName="splitBorder" Value="{StaticResource ComboBox.Pressed.Editable.Button.Border}"/></MultiDataTrigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Fill" TargetName="arrow" Value="{StaticResource ComboBox.Disabled.Glyph}"/></Trigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Mode=Self}}" Value="false"/><Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="false"/></MultiDataTrigger.Conditions><Setter Property="Background" TargetName="templateRoot" Value="{StaticResource ComboBox.Disabled.Background}"/><Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource ComboBox.Disabled.Border}"/></MultiDataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Mode=Self}}" Value="false"/><Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="true"/></MultiDataTrigger.Conditions><Setter Property="Background" TargetName="templateRoot" Value="{StaticResource ComboBox.Disabled.Editable.Background}"/><Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource ComboBox.Disabled.Editable.Border}"/><Setter Property="Background" TargetName="splitBorder" Value="{StaticResource ComboBox.Disabled.Editable.Button.Background}"/><Setter Property="BorderBrush" TargetName="splitBorder" Value="{StaticResource ComboBox.Disabled.Editable.Button.Border}"/></MultiDataTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><ControlTemplate x:Key="ComboBoxDiyTemplate" TargetType="{x:Type ComboBox}"><Grid x:Name="templateRoot" SnapsToDevicePixels="true"><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/></Grid.ColumnDefinitions><Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" Margin="1" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"><theme:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MinWidth="{Binding ActualWidth, ElementName=templateRoot}" MaxHeight="{TemplateBinding MaxDropDownHeight}"><Border x:Name="dropDownBorder" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1"><ScrollViewer x:Name="DropDownScrollViewer"><Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled"><Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"><Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}" Height="{Binding ActualHeight, ElementName=dropDownBorder}" Width="{Binding ActualWidth, ElementName=dropDownBorder}"/></Canvas><ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/></Grid></ScrollViewer></Border></theme:SystemDropShadowChrome></Popup><ToggleButton x:Name="toggleButton" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/><ContentPresenter x:Name="contentPresenter" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Grid><ControlTemplate.Triggers><Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true"><Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/><Setter Property="Color" TargetName="shadow" Value="#71000000"/></Trigger><Trigger Property="HasItems" Value="false"><Setter Property="Height" TargetName="dropDownBorder" Value="95"/></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsGrouping" Value="true"/><Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/></MultiTrigger.Conditions><Setter Property="ScrollViewer.CanContentScroll" Value="false"/></MultiTrigger><Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false"><Setter Property="Canvas.Top" TargetName="opaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/><Setter Property="Canvas.Left" TargetName="opaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/></Trigger></ControlTemplate.Triggers></ControlTemplate>
</ResourceDictionary>

http://www.ppmy.cn/news/1470350.html

相关文章

Qt 实战(4)信号与槽 | 4.2、自定义信号与槽

文章目录 一、自定义信号与槽1、自定义信号2、自定义槽3、连接信号与槽4、总结 前言&#xff1a; 在Qt框架中&#xff0c;信号&#xff08;signals&#xff09;和槽&#xff08;slots&#xff09;机制是对象间通信的核心。这种机制允许对象在特定事件发生时发出信号&#xff0c…

Set 数据结构

一、概念 Set 是一种叫【集合(由一堆无序、相关联且不重复的内部结构组成的组合&#xff0c;以[值&#xff0c;值的形式储存])】的数据结构。 二、 1、可用于数组去重 const set new Set([1, 2, 3, 4, 4]); console.log([...set]); // [1,2,3,4] console.log(Array.from(s…

VSCode 安装Remote-SSH

1、打开扩展商店安装Remote-SSH 快捷键&#xff1a;CtrlShiftX 2、配置ssh连接 打开命令面板&#xff08;CtrlShiftP&#xff09; 输入"Remote-SSH: Connect to Host"并选择。 输入你的Ubuntu服务器的IP地址或主机名。 3、连接到ubuntu服务器 如果是第一次连接&…

重庆思庄技术分享——启动Oracle下最小追踪日志

启动Oracle下最小追踪日志 11g默认是关闭的&#xff1a; SQL> select supplemental_log_data_min from v$database; SUPPLEME -------- NO 打开方式&#xff1a; SQL> alter database add supplemental log data; Database altered. SQL> select supplemental_log_d…

局域网共享文件夹怎么加密?方法很简单

局域网共享文件夹是企业内部信息、数据传递沟通的重要工具&#xff0c;而为了保护共享文件夹数据安全&#xff0c;我们需要使用专业的加密软件加密保护局域网共享文件夹。下面我们就来了解一下局域网共享文件夹加密方法。 局域网共享文件夹加密 在加密共享文件夹时&#xff0c…

whisper 模型源码解读

whisper官方源码 whisper 模型官方代码&#xff1a;https://github.com/openai/whisper/blob/main/whisper/model.py &#xff1b;注释如下 import base64 import gzip from dataclasses import dataclass from typing import Dict, Iterable, Optionalimport numpy as np impo…

微信聊天记录导出为电脑文件实操教程(附代码)

写在前面 最近&#xff0c;微信中加的群有点多&#xff0c;信息根本看不过来。如果不看&#xff0c;怕遗漏了有价值的信息&#xff1b;如果一条条向上翻阅&#xff0c;实在是太麻烦。 有没有办法一键导出所有聊天记录&#xff1f; 一来翻阅更方便一点&#xff0c;二来还可以…

国际期货行情相关术语

1&#xff09;合约&#xff1a;期货行情表提供了期货交易的相关信息 &#xff0c;行情表中每一个期货合约都有合约代码&#xff08;由期货合约交易代码和合约到期月份组成&#xff09;来标识。 &#xff08;2&#xff09;开盘价&#xff1a;当日某一期货合约交易开始前五分钟集…