材料的主题

的材料的主题带有内置的元素,提供互动反馈,易于定制颜色和材料设计阴影与美丽和光滑的状态之间的转换。

与R2 2021发布的为WPF界面套件,我们设计和交付一个全新的主题——颜色变化的材料黑暗一个。此外,主题面板扩大了画笔的集合DialogBackgroundBrush和SelectedUnfocusedBrush,它既可用于颜色变化,如下所述。

跳转到下列主题学习主题的调色板和功能的细节。

• 默认主题颜色
• 默认主题刷
• 改变调色板颜色
• 改变主题的变化
• 改变字体属性
• 使用符号
• 改变圆角半径
• 视觉助手
• 材料控制
• 改变不透明度

默认主题颜色

自R2 2021发布的为WPF界面套房,材料的主题有两个颜色的变化。主题被设计成可轻易通过暴露出主题颜色调色板修改。此外,引入MaterialAssist助手类使它比以往更容易修改抱属性直接控制而不需要提取的实例和修改默认控件模板的基本控制。

默认值的画笔在主题下面列出:

主题颜色用RadOutlookBar表示

默认主题刷

下面你可以找到更多细节每一刷,它通常是应用。刷子可分为4组根据他们的颜色:

• 中性的刷子
• 主刷
• 口音刷
• 特殊的刷子
• 其他属性

中性的刷子

白色、灰色、黑色

他们用于背景、非侵入性的交互状态,边界和分隔符、文字符号和图标。

• MainBrush白色在默认情况下,它主要用作背景的控制。
• PrimaryBrush这刷非常浅灰色在默认情况下,它是用于次要背景颜色(背景RadDocking CarouselItem)。
• AlternativeBrush——略暗灰色刷用于鼠标的按钮,按钮控制和ListBoxItems。也用作背景RadRibbonBackstage和PrintPreview控制和对话框。
• ComplementaryBrush——暗灰色画笔,用于按下按钮,按钮控制和ListBoxItems。
• DividerBrush——黑色画笔不透明度为12%,用于边界和分隔符。它是透明的,因此它可以允许通过,因为它的背景颜色是浅灰色。
• DividerSolidBrush-这是一个特殊的刷子DividerBrush的纯色变异。它是通过覆盖DividerBrush计算MainBrush之上。创建场景边界或分隔符不应该是透明的,因为它与其他边界重叠,线或分隔符DividerBrush但应该是一样的颜色。它是用于控制相互堆叠的线条像RadGridView RadScheduleView, RadPivotGrid RadPropertyGrid。
• MarkerBrush文本元素——标准的黑色画笔。
• MarkerInvertedBrush——白刷在深色背景上的文本元素。
• IconBrush——黑色刷用于图标路径和符号时在光背景。通常结合不透明度来实现所需的黑色阴影。
• DialogBackgroundBrush默认的白色刷用于窗口和对话框的背景元素。

的DialogBackgroundBrush是不与之前版本可用R2 2021发布的为WPF界面套件。

主刷

靛蓝

• PrimaryNormalBrush——默认情况下,它是蓝色的(靛蓝)和用于着色的主要口音元素——头,重要的是,选择或检查元素(RadListBoxItem RadToggleButton,选中复选框背景),滑块拇指等等。
• PrimaryHoverBrush变异的PrimaryNormalBrush用于主重音的徘徊状态元素——提高/平按钮。
• PrimaryPressedBrush暗蓝比前两个刷压的主要口音元素——按RadToggleButton / RadRadioButton,压制了/平按钮的状态。
• PrimaryFocusBrush光变化的靛蓝色配色方案作为主要刷背景和突显出,表明集中状态,以及选择和拖中转——突显出集中输入控件的状态(文本框,RadNumericUpDown RadWatermarkTextBox等等),背景在正常状态的按钮,RadListBoxItems和类似,复选框和RadioButton专注光环。

口音刷

琥珀色的

• AccentNormalBrush明亮amber-orange刷用作二级口音背景元素(RadScheduleView的预约,RadGanttView总结容器),悬停状态检查/选中的元素(选择RadListBoxItem悬停,检查RadToggleButton徘徊),标签项目重点强调(集中RadTabItem,集中LayoutControlTabGroupItem,选择停靠RadDocumentPane), RadDiagramShape填补,RadDocking选择固定RadPane / ToolWindow停靠/出坞。
• AccentHoverBrush浅琥珀色的变化AccentNormalBrush作为背景的元素在他们的默认状态(RadScheduleView的任命,头按钮选择RadPane / ToolWindow RadDocking), RadGridView冻结列分束器,选中复选框和RadioButton RadDiagramShade中风。
• AccentPressedBrush深琥珀色压/选择的二级口音控制——RadScheduleView任命,或检查复选框和RadioButton,我按州头按钮RadDocking RadDocking的选择固定RadPane / ToolWindow停靠/出坞。

特殊的刷子

• ValidationBrush——亮红色刷用于显示验证错误——无效的强调控制和作为背景的错误提示,背景为无效行和单元格以及清晰的按钮的鼠标状态。
• RippleBrush——默认白色刷用于MaterialControl的涟漪效应。本身是一个纯色,不透明的涟漪来自MaterialControl RippleOpacity财产。
• ReadOnlyBackgroundBrush曾经的背景在只读状态控制。
• ReadOnlyBorderBrush曾经的边框颜色控制在只读状态。
• SelectedUnfocusedBrush曾经为选择控件的背景色,不是重点国家(例如,GridViewRow, TreeListViewRow和节点)。

的SelectedUnfocusedBrush是不与之前版本可用R2 2021发布的为WPF界面套件。

其他属性

• DisabledOpacity曾经对残疾的文本。背景通常使用AlternativeBrush当禁用。
• ReadOnlyOpacity曾经为文本输入时只读状态。

改变调色板颜色

材料的主题提供了动态变化的调色板颜色负责刷用于控制。他们的违约是上面说。这种机制是用来修改主题的颜色变化。

通用命名约定:MaterialPalette.Palette[名字]。颜色负责[名字]刷——如。MaterialPalette.Palette.AccentNormalColor设置颜色telerik: MaterialResource ResourceKey = AccentNormalBrush

改变背后的颜色可以在代码中实现。

设置面板的颜色

MaterialPalette.Palette.AccentNormalColor= Color.FromRgb(255, 0, 0);

改变主题的变化

自R2 2021发布的为WPF界面套件材料主题提供了两种颜色的变化。两个对应变化材料设计调色板。的光变化是默认一个基于靛蓝和琥珀的颜色,和黑暗——基于靛蓝色和青色的颜色。下面的例子演示了所支持的光明与黑暗之间切换的能力调色板通过调用LoadPreset方法如下所示:

改变主题的颜色变化

/ /默认颜色变异MaterialPalette.LoadPreset (MaterialPalette.ColorVariation.Light);/ /深色变异MaterialPalette.LoadPreset (MaterialPalette.ColorVariation.Dark);

的黑暗变化的主题是设计时考虑到一个黑暗的背景。建议使用这样的一个背景在您的应用程序在处理它。

改变字体属性

当使用材料你可以动态地改变主题字形大小和FontFamily应用程序中的所有组件的属性一样你在所有其他可用的主题支持ThemePalette。

字形大小和FontFamily属性是公开的,所以你可以很容易地修改单点主题资源。最常用的字体大小的主题是与价值14并且可以通过修改MaterialPalette.Palette.FontSize财产。

中使用的默认字体的主题Roboto。

对于复杂的场景,我们强烈建议设置字形大小属性在应用程序初始化同时,我们建议值之间11 px和19像素为它。

示例2显示了默认的字体大小和家庭。

默认的字形大小和FontFamily属性:

MaterialPalette.Palette.FontSizeS = 12; MaterialPalette.Palette.FontSize = 14; MaterialPalette.Palette.FontSizeL = 18; MaterialPalette.Palette.FontFamily = new FontFamily("Roboto");

示例视图定义

< telerik: RadCalendar HorizontalAlignment = "中心" / > < telerik: RadButton内容=“改变字体”=“OnButtonChangeFontSizeClick HorizontalAlignment”=“中心”点击VerticalAlignment = "中心" / >

改变主题的字形大小和FontFamily

私人空间OnButtonChangeFontSizeClick(对象发送方,RoutedEventArgs e) {MaterialPalette.Palette。字形大小= 12;MaterialPalette.Palette。FontFamily= new FontFamily("Calibri"); }

使用符号

主题的材料使用和支持同样的方法添加图标和icon-like图片介绍Office2016主题。而不是我们使用图像或路径默认字体的字形。的TelerikWebUI字体提供了超过400个可缩放矢量符号,是我们的客户使用。

你可以阅读更多关于新符号的使用和范围字体字形概述文章。

添加ResourceDictionary符号

< ResourceDictionary源= " / Telerik.Windows.Controls;组件/主题/ FontResources.xaml " / >

改变圆角半径

材料主题公开了一个简单的方法来修改应用程序中的许多元素的圆角半径。你可以直接使用的圆角半径属性面板。默认情况下,CornerRadius值是2。

默认的圆角半径值

MaterialPalette.Palette。CornerRadius= new CornerRadius(2); MaterialPalette.Palette.CornerRadiusTop = new CornerRadius(2, 2, 0, 0); MaterialPalette.Palette.CornerRadiusBottom = new CornerRadius(0, 0, 2, 2); MaterialPalette.Palette.CornerRadiusLeft = new CornerRadius(2, 0, 0, 2); MaterialPalette.Palette.CornerRadiusRight = new CornerRadius(0, 2, 2, 0);

改变默认的圆角半径

MaterialPalette.Palette。CornerRadius= new CornerRadius(10);

物质帮助

的MaterialAssist静态类来自于材料主题和重用在流利的主题。它公开了一组附加属性,可以用来直接修改一个特定的外观基本控制而不需要改变其控制模板。您可以使用以下依赖属性直接在XAML中:

• ShadowDepth枚举属性表明阴影效果的深度的控制。有5个可以选择的值。
• IsShadowDisabled——属性用于控制阴影效果的可见性。

主题的助手

的ThemeHelper类是用于Windows11主题。它公开了一组附加属性,可以用来直接修改一个特定的外观基本控制而不需要改变其控制模板。

下面的例子显示RadToggleButton控制与改进刷子通过上面的助手类的不同状态:

声明名称空间的帮手

xmlns:垫= " = Telerik.Windows clr-namespace: Telerik.Windows.Controls.MaterialControls;装配。控制“xmlns:助手= " clr-namespace: Telerik.Windows.Controls.Theming.Helpers;装配= Telerik.Windows.Controls”

通过助手RadToggleButton的视觉外观

< telerik: RadToggleButton内容= " RadButton "保证金=“10”助手:ThemeHelper。MouseOverBrush="{telerik:MaterialResource ResourceKey=AccentHoverBrush}" helpers:ThemeHelper.PressedBrush="{telerik:MaterialResource ResourceKey=AccentPressedBrush}" helpers:ThemeHelper.CheckedBrush="{telerik:MaterialResource ResourceKey=ValidationBrush}" helpers:ThemeHelper.FocusBrush="{telerik:MaterialResource ResourceKey=PrimaryNormalBrush}"/>

影子

的影子是专门为新引入的元素之一的需要材料的主题。它是用来添加阴影效果在另一个控制或元素。

影子元素和不打算直接主机其他elements_ WPF阴影效应影响任何嵌套的文本和导致模糊字符。

如果你想单独使用它在你的应用程序中,您应该使用其宽度/高度特性,这样看来在所需的元素,如以下示例所示。

单独使用一个影子组件

<网格> <垫:阴影背景=“白色”宽度= = " 30 " ShadowDepth = " 150 "高度" Depth5 " / > < TextBlock文本= "文本" HorizontalAlignment = "中心" VerticalAlignment = "中心" / > < /网格>

影子元素应该有一个背景的效果出现。

公开了一个元素ShadowDepth枚举属性将下列值之一:Depth5,Depth4,Depth3,Depth2,Depth1,Depth0。深度越大数字阴影效果越强。

应用在一个TextBlock阴影效果

材料控制

另一个元素专门为材料设计的主题和用于显示用户的交互控制的材料控制。主要在模板中使用的控件显示用户操作如RadButton RadToggleButton,等等。它增加了“脉动”效应和公开几个属性,您可以使用它来修改脉动功能和外观:

• IsRippleEnabled指示是否启用了连锁反应。
• IsRippleCentered控件初始位置的连锁反应开始。将属性设置为true将导致效果总是从控制的中心。否则,光标位置是受人尊敬的。
• IsSmartClipped集涟漪是否应该在刀尖圆弧半径的边界。
• RippleBrush设置画笔用于连锁反应。
• RippleOpacity设置不透明度的连锁反应。

涟漪效应在RadDropDownButton

按钮元素的声明与字形为文本

<按钮VerticalAlignment = "中心" HorizontalAlignment =“中心”风格= " {StaticResource RoundRadButtonStyle} " > < TextBlock FontFamily = " {StaticResource TelerikWebUI}”字形大小=“32”FontWeight =“正常”FontStyle =“正常”文本= " {StaticResource GlyphEdit}“VerticalAlignment =“中心”HorizontalAlignment = "中心" / > < /按钮>

按钮的风格声明

< x风格:关键= " RoundRadButtonStyle " TargetType = "按钮" > < Setter属性= "背景" Value = " # FF2196F3 " / > < Setter属性=“前景”价值= " {telerik: MaterialResource ResourceKey = MarkerInvertedBrush} " / > < Setter属性= "垫:MaterialAssist。MouseOverBrush " Value = " # FF1976D2 " / > < Setter属性= "垫:MaterialAssist。PressedBrush " Value = " # FF1565C0 " / > < Setter属性= "垫:MaterialAssist。CornerRadius" Value="30" />                

注意,对于这个按钮MouseOverBrush和PressedBrush从上面的助手列出修改属性。他们负责鼠标和按动画和自动绑定到模板化的父母。

可以禁用MaterialControl通过风格的涟漪效应。下面的例子演示了如何实现这个。风格可以包含在Telerik控制(s)的范围,其连锁反应需要被禁用。

禁用的连锁反应

< !——如果您使用NoXaml二进制文件你应该基本样式的默认一个主题就像<风格TargetType =“垫:MaterialControl”基础= " {StaticResource MaterialControlStyle} " > - - > <风格TargetType = "垫:MaterialControl " > < Setter属性= " IsRippleEnabled " Value = " False " / > < /风格>

改变不透明度

如果你需要改变残疾人的不透明度和只读的元素,您现在可以轻松地通过使用DisabledOpacity和ReadOnlyOpacity的属性MaterialPalette。默认值是0.26和1分别。

改变不透明度

MaterialPalette.Palette。DisabledOpacity = 0.5;MaterialPalette.Palette。ReadOnlyOpacity = 0.5;

MaterialPalette.Palette。DisabledOpacity= 0.5 MaterialPalette.Palette.ReadOnlyOpacity = 0.5

合并修改面板资源StyleManager主题的方法

当修改字体、颜色或其他资源MaterialPalette和StyleManager作为主题化机制、主题的ResourceDictionary需要合并App.xaml文件以应用更改。

合并的主题ResourceDictionary App.xaml

<应用程序。> < ResourceDictionary > < ResourceDictionary资源。MergedDictionaries > < telerik: MaterialResourceDictionary / > < / ResourceDictionary。MergedDictionaries > < / ResourceDictionary > < / Application.Resources >

另请参阅

• 设定一个主题(使用隐式样式)
• 样式管理器
• 符号的概述
• Office2016主题
• 绿色主题