材料的主题
的材料的主题
内置元素提供交互反馈,易于自定义的颜色和材质设计阴影与状态之间的美丽和平滑过渡。
与R2 2021发布WPF的用户界面套房,我们已经设计和交付了一个全新的颜色变化的材料主题-黑暗
一个。元素扩展了主题调色板的画笔集合DialogBackgroundBrush
和SelectedUnfocusedBrush
,有两种颜色可供选择,如下所述。
跳转到以下主题以了解主题的调色板和功能的具体信息。
默认主题颜色
自R2 2021发布WPF的用户界面套件中,材质主题有两种颜色变化。主题设计为可以通过主题调色板中的暴露颜色轻松修改。此外,介绍了MaterialAssist
Helper类使得直接在控件实例中修改与外观相关的属性比以往任何时候都更容易,而不需要提取和修改基本控件的默认控件模板。
主题中画笔的默认值如下所示:
颜色名称 | 光 | 黑暗 | ||
---|---|---|---|---|
MainColor | # FFFFFFFF | # FF303030 | ||
PrimaryColor | # FFFAFAFA | # FF424242 | ||
ComplementaryColor | # FFE0E0E0 | # FF171717 | ||
AlternativeColor | # FFF5F5F5 | # FF212121 | ||
DividerColor | # 1 e000000 | # 1 fffffff | ||
MarkerColor | # FF000000 | # FFF1F1F1 | ||
MarkerInvertedColor | # FFFFFFFF | # FFFFFFFF | ||
IconColor | # FF000000 | # FFFFFFFF | ||
ValidationColor | # FFD50000 | # FFCF6679 | ||
AccentNormalColor | # FFFFAB40 | # FF00ACC1 | ||
AccentHoverColor | # FFFFD180 | # FF26C6DA | ||
AccentPressedColor | # FFFF9100 | # FF0097A7 | ||
PrimaryNormalColor | # FF3F51B5 | # FF7986CB | ||
PrimaryHoverColor | # FF303F9F | # FF5C6BC0 | ||
PrimaryPressedColor | # FF1A237E | # FF3F51B5 | ||
PrimaryFocusColor | # FF9FA8DA | # FF536DFE | ||
RippleColor | # FFFFFFFF | # FFFFFFFF | ||
DividerSolidColor | # FFE1E1E1 | # FF474747 | ||
ReadOnlyBackgroundColor | 00 # ffffff | 00 # ffffff | ||
ReadOnlyBorderColor | # FFABABAB | # FFABABAB | ||
DialogBackgroundColor | # FFFFFFFF | # FF262626 | ||
SelectedUnfocusedColor | # FFEEEEEE | # FF262626 |
RadOutlookBar中表示的主题颜色
默认主题画笔
下面你可以找到关于每个画笔的更多细节,以及它通常应用的地方。画笔根据颜色可分为4组:
中性的刷子
白色,灰色,黑色
它们用于背景、非侵入性交互状态、符号和图标、边界和分隔符、文本。
MainBrush
-默认为白色,主要用作控件的背景。PrimaryBrush
-这个笔刷默认是浅灰色,它被用作次要背景色(raddocks, CarouselItem的背景色)。AlternativeBrush
-一个稍深的灰色笔刷,用于鼠标在按钮的状态,按钮类控件和ListBoxItems。它也被用作RadRibbonBackstage和PrintPreview控件和对话框的背景。ComplementaryBrush
-更深的灰色笔刷,用于按钮的按下状态,按钮类控件和ListBoxItems。DividerBrush
-一个不透明度12%的黑色笔刷,用于边框和分隔符。它是透明的,所以它可以允许背景色通过,因为它是非常浅的灰色。DividerSolidBrush
-这是一个特殊的笔刷,是分隔笔刷的纯色变化。它是通过在MainBrush上叠加分隔刷来计算的。它是为边界或分隔符不应该是透明的场景而创建的,因为它与其他边界、线条或分隔符重叠,但应该与分隔刷相同的颜色。它被使用在控件中,有堆叠的行,如RadGridView, RadScheduleView, RadPivotGrid, RadPropertyGrid。MarkerBrush
-文本元素的标准黑色笔刷。MarkerInvertedBrush
-白色笔刷用于深色背景上的文本元素。IconBrush
-当图标路径和符号在浅色背景上时使用的黑色笔刷。它通常与不透明度相结合,以达到所需的黑色阴影。DialogBackgroundBrush
-白色默认刷,用于窗口和对话框元素的背景。
的
DialogBackgroundBrush
是不之前的版本可用R2 2021发布WPF的用户界面套件。
主刷
靛蓝
PrimaryNormalBrush
-默认情况下,它是蓝色(靛蓝色),用于着色主要强调元素-标题,重要,选中或选中的元素(RadListBoxItem, RadToggleButton,选中的CheckBox背景),滑块拇指等。PrimaryHoverBrush
- PrimaryNormalBrush的变化,用于主重音元素的悬停状态-凸起/扁平按钮。PrimaryPressedBrush
按下RadToggleButton/RadRadioButton,按下凸起/扁平按钮的状态,比前两个笔刷的蓝色更深。PrimaryFocusBrush
-靛蓝色方案的轻微变化,用作背景和强调的主要笔刷,表明集中状态,以及选择和拖动停留-强调在集中状态的输入控件(TextBox, RadNumericUpDown, RadWatermarkTextBox等),背景在正常状态的按钮,RadListBoxItems和类似,对角晕复选框和RadioButton。
口音刷
琥珀色的
AccentNormalBrush
-明亮的琥珀橙色刷作为次要强调元素的背景(RadScheduleView的Appointments, RadGanttView Summary容器),选中/选中元素的悬停状态(选中RadListBoxItem悬停,选中RadToggleButton悬停),选项卡项焦点下划线(聚焦RadTabItem,聚焦LayoutControlTabGroupItem,选定docked RadDocumentPane), RadDiagramShape填充,raddocks的选定docked/undocked钉住RadPane/ToolWindow。AccentHoverBrush
-淡琥珀色的变化元素有AccentNormalBrush作为背景在他们的默认状态(RadScheduleView的预约,标题按钮在选定的RadPane/工具窗口在RadDocking), RadGridView冻结列分割器,选中的复选框和RadioButton, RadDiagramShade笔画。AccentPressedBrush
RadScheduleView的约会,按下或选中的复选框和RadioButton,按下状态的标题按钮在raddocks的raddocks的选定停靠/undocked固定RadPane/工具窗口。
特殊的刷子
ValidationBrush
-一个明亮的红色笔刷用于指示验证错误-为无效控件的下划线,并作为错误提示的背景,无效行和单元格的背景,以及清除按钮鼠标经过状态。RippleBrush
-一个默认的白色笔刷,用于材质控件的涟漪效果。它本身是一个纯色,波纹的不透明度来自MaterialControl的RippleOpacity属性。ReadOnlyBackgroundBrush
-用于处于只读状态的控件的背景。ReadOnlyBorderBrush
用于处于只读状态的控件的边框颜色。SelectedUnfocusedBrush
-用于控件在其选定的非聚焦状态下的背景色(例如,GridViewRow, TreeListViewRow和TreeViewItem)。
的
SelectedUnfocusedBrush
是不之前的版本可用R2 2021发布WPF的用户界面套件。
其他属性
DisabledOpacity
-用于禁用文本。背景通常使用AlternativeBrush
当禁用。ReadOnlyOpacity
-用于输入中的文本,当它们在只读状态。
改变调色板颜色
材质主题提供了控件中画笔的调色板颜色的动态变化。它们的默认值如上所述。此机制用于修改主题的颜色变化。
一般的命名约定是:MaterialPalette.Palette[名字]。颜色
负责[名字]刷
——如。MaterialPalette.Palette.AccentNormalColor
设置的颜色telerik: MaterialResource ResourceKey = AccentNormalBrush
改变颜色可以在代码后面实现。
设置调色板颜色
MaterialPalette.Palette.AccentNormalColor =颜色。FromRgb(255,0,0);
主题变化
自R2 2021发布WPF的用户界面套件材质主题提供了两种颜色变化。这两种变化都对应于材料设计调色板.的光
变量是默认值,并且基于靛蓝色和琥珀色,而黑暗
-基于靛蓝和青色。方法,演示在受支持的浅色和深色调色板之间切换的能力LoadPreset
方法如下所示:
改变主题的颜色变化
//默认的颜色变化MaterialPalette.LoadPreset(MaterialPalette.ColorVariation.Light);//深色变化MaterialPalette.LoadPreset(MaterialPalette.ColorVariation.Dark);
的
黑暗
主题的变化是在黑暗的背景下设计的。建议在应用程序中使用这样的背景。
更改字体属性
当使用材料
主题,您可以动态更改字形大小
而且FontFamily
应用程序中所有组件的属性与在所有其他组件中相同可用的主题支持主题面板。
FontSize和FontFamily属性是公共的,因此您可以轻松地在单个点修改主题资源。主题中最常用的字体大小是with value14并且可以通过MaterialPalette.Palette.FontSize
财产。
主题中使用的默认字体为Roboto.
对于复杂的场景,我们强烈建议只设置FontSize属性在应用程序初始化之前此外,我们推荐之间的值11 px而且19像素为它。
示例2显示默认字体大小和系列。
默认的FontSize和FontFamily属性:
MaterialPalette.Palette.FontSizeS = 12;MaterialPalette.Palette.FontSize = 14;MaterialPalette.Palette.FontSizeL = 18;MaterialPalette.Palette.FontFamily =新的FontFamily(“Roboto”);
视图定义示例
改变主题的FontSize和FontFamily
private void OnButtonChangeFontSizeClick(对象发送者,RoutedEventArgs e) {MaterialPalette.Palette.FontSize = 12;MaterialPalette.Palette.FontFamily =新的FontFamily(“Calibri”);}
使用符号
类中引入的图标和类似图标的图像,材质主题使用并支持相同的方法来添加Office2016主题
.默认情况下,我们使用字形字体代替图像或路径。的TelerikWebUI
Font提供了超过400个可伸缩的矢量字形,可供我们的客户使用。
有关新符号的用法和范围的更多信息,请参阅字体字形概述文章.
添加带有符号的ResourceDictionary
< ResourceDictionary源= " / Telerik.Windows.Controls;组件/主题/ FontResources.xaml " / >
改变角半径
Material Theme提供了一种简单的方法来修改应用程序中许多元素的圆角半径。您可以直接使用调色板的角半径属性。默认情况下CornerRadius
值是2.
默认角半径值
MaterialPalette.Palette.CornerRadius = new CornerRadius(2);materialpalette . palette . cornradiustop =新的cornradius (2,2,0,0);MaterialPalette.Palette.CornerRadiusBottom =新的CornerRadius(0,0,2,2);materialpalette . palette . cornradiusleft =新的cornradius (2,0,0,2);materialpalette . palette . cornradiusright =新的cornradius (0,2,2,0);
改变默认的角半径
MaterialPalette.Palette.CornerRadius = new CornerRadius(10);
物质帮助
的MaterialAssist
静态类来自Material主题,在Fluent主题中被重用。它公开了一组附加属性,可用于直接修改特定基本控件的外观,而不需要更改其控件模板。你可以在XAML中直接使用以下依赖属性:
ShadowDepth
-Enum属性,指示控件上阴影效果的深度。有5个值可以选择。IsShadowDisabled
-属性用来控制阴影效果的可见性。
主题的助手
的ThemeHelper类在Windows11主题中使用。它公开了一组附加属性,可用于直接修改特定基本控件的外观,而不需要更改其控件模板。
下面的例子展示了aRadToggleButton
控件,通过上面的helper类为其不同的状态修改笔刷:
为助手声明名称空间
xmlns:垫= " = Telerik.Windows clr-namespace: Telerik.Windows.Controls.MaterialControls;装配。控制“xmlns:助手= " clr-namespace: Telerik.Windows.Controls.Theming.Helpers;装配= Telerik.Windows.Controls”
通过帮助设置RadToggleButton的视觉外观
影子
的影子
是新引入的元素之一,专为材料主题的需要而设计。它用于在另一个控件或元素周围添加阴影效果。
Shadow元素__不打算直接承载其他元素_,因为WPF的投影效果会影响任何嵌套文本并导致字符模糊。
如果您想在应用程序中单独使用它,您应该使用它的Width/Height属性,以便它出现在所需元素的周围,如下例所示。
单独使用Shadow组件
Shadow元素应该有一个显示效果的背景设置。
元素公开了ShadowDepth
枚举属性,该属性接受以下值之一:Depth5
,Depth4
,Depth3
,Depth2
,Depth1
,Depth0
.深度数值越大,阴影效果就越强。
阴影效果应用在一个文本块
材料控制
的元素是专门为Material主题设计并用于显示用户与某些控件的交互的另一个元素材料控制
.它主要用于建议用户操作的控件模板中,如RadButton, RadToggleButton等。它添加了一个“涟漪”效果,并暴露了几个属性,您可以使用这些属性来修改涟漪功能及其外观:
IsRippleEnabled
-是否启用波纹效应。IsRippleCentered
-控制涟漪效应开始的初始位置。将该属性设置为true将导致效果始终从控件的中心开始。否则,将尊重游标位置。IsSmartClipped
-设置波纹是否应该在角半径的边界内。RippleBrush
-设置用于波纹效果的画笔。RippleOpacity
-设置涟漪效应的不透明度。
RadDropDownButton的涟漪效应
以字形作为文本声明Button元素
按钮的样式声明
注意,对于这个按钮
MouseOverBrush
和PressedBrush
上面列出的helper的属性被修改。它们负责鼠标悬停和按下的动画,并自动绑定到模板化的父类。
可以通过样式禁用MaterialControl的涟漪效应。下面的示例演示了如何实现这一点。样式可以包含在需要禁用连锁反应的Telerik控件的范围中。
禁用涟漪效应
<!——如果你正在使用NoXaml二进制文件,你应该基于主题的默认样式,如< style TargetType="mat:MaterialControl" BasedOn="{StaticResource MaterialControlStyle}" >——> < style TargetType="mat:MaterialControl" > style >
改变不透明度
方法可以轻松地更改禁用元素和只读元素的不透明度DisabledOpacity
而且ReadOnlyOpacity
的属性MaterialPalette
.默认值为0.26而且1分别。
改变不透明度
MaterialPalette.Palette.DisabledOpacity = 0.5;MaterialPalette.Palette.ReadOnlyOpacity = 0.5;
MaterialPalette.Palette.DisabledOpacity = 0.5
用StyleManager主题化方法合并修改过的调色板资源
中修改字体、颜色或其他资源时MaterialPalette
而且StyleManager
是用作主题机制,主题的ResourceDictionary
需要被合并App.xaml文件应用更改。
在App.xaml中合并主题的ResourceDictionary
<应用程序。资源>