Telerik UI for WPF?下载30天免费试用

水晶主题

受MacOS的启发,Crystal主题为您的WPF应用程序提供了著名的MacOS外观和感觉。苹果的团队一直在引领潮流,他们干净的UI和水晶主题,你将能够把这种风格带到你自己的应用程序中。

跳转到以下主题以了解主题的调色板和功能的具体信息。

默认主题颜色

水晶主题可以通过主题调色板中暴露的颜色轻松修改。

主题中颜色的默认值如下所示。请注意,由于主题使用了许多渐变,大多数颜色都有一个而且值,该值表示渐变两端的颜色。

颜色名称 黑暗
AccentHighColor # FF56A9FD
# FF56A9FD
AccentLowColor # FF087EFF
# FF087EFF
AccentMouseOverHighColor # FF2590FB
# FF2590FB
AccentMouseOverLowColor # FF0072EE
# FF0072EE
AccentPressedColor # FF0060CF
# FF0060CF
AccentFocusedColor # FF7CB7F9
# FF7CB7F9
AccentSelectedColor # FF1C83FF
# FF1C83FF
BasicHighColor # FFCCCCCC
# FF818181
BasicLowColor # FFA4A3A4
# FF4F4F4F
AccentBasicHighColor # FF2390FD
# FF2390FD
AccentBasicLowColor # FF0052E6
# FF0052E6
IconColor # FF505050
# FFFFFFFF
MainHighColor # FFFFFFFF
# FF686868
MainLowColor # FFF3F3F3
# FF5F5F5F
MarkerColor # FF020202
# FFFFFFFF
ValidationColor # FFD40012
# FFD40012
ComplementaryColor # FFDEDEDE
# FF252525
ComplementaryBasicHighColor # FFADADAD
# FF646464
ComplementaryBasicLowColor # FF8D8D8D
# FF4D4D4D
MouseOverHighColor # FFF3F3F3
# FF898989
MouseOverLowColor # FFEEEEEE
# FF818181
PressedHighColor # FFDCDCDC
# FF5B5B5B
PressedLowColor # FFCDCDCD
# FF4B4B4B
AlternativeColor # FFEAEAEA
# FF3A3A3A
AlternativeBasicColor # FFD3D3D3
# FF4D4D4D
MarkerInvertedColor # FFFFFFFF
# FFFFFFFF
PrimaryBackgroundColor # FFFFFFFF
# FF2C2C2C
HeaderHighColor # FFE8E6E6
# FF5B5B5B
HeaderLowColor # FFD4D0D0
# FF494949
ReadOnlyBackgroundColor # FFFFFFFF
# FF2C2C2C
ReadOnlyBorderColor # FFA4A3A4
# FF4D4D4D

RadOutlookBar中表示的主题颜色

水晶主题颜色表示在RadOutlookBar

默认主题画笔

主刷

  • PrimaryBackgroundBrush-用于输入背景。
  • MainBrush-用于按钮背景。
  • AlternativeBrush-用于弹出窗口,窗口,列表框等的背景
  • AlternativeBasicBrush-用于在几个会重叠的情况下的边界(在复杂的网格结构控件中),并在 BasicBrush 被覆盖在 PrimaryBackgroundBrush的顶部时自动计算
  • BasicBrush-用于大多数正常的州边界。
  • ComplementaryBrush-在碰撞的情况下,颜色略深。也用于页脚的背景。
  • ComplementaryBasicBrush-用于窗户的边框。
  • MarkerBrush-用于大多数前景是黑色的。
  • MarkerInvertedBrush-用于交互状态-白色在两个变体。
  • IconBrush-用于字形和路径图标,应该是80%的黑色。
  • AccentBrush-用于背景的单选,重复,分割,切换按钮,以及选择器控制按钮- DatePicker, DateTimePicker, CalculatorPicker等
  • AccentBasicBrush-用于上述控件的边界,有AccentBrush为他们的背景。

交互状态刷

  • AccentFocusedBrush-变体 AccentBrush ,用于主要重音元素的聚焦状态。
  • AccentMouseOverBrush- AccentBrush 的变化,用于主重音元素的悬浮状态。
  • AccentSelectedBrush-变体 AccentBrush ,用于主重音元素的选定状态。
  • AccentPressedBrush- AccentBrush 的变化,用于主重音元素的按下状态。
  • MouseOverBrush-用于非重音元素的背景悬停状态。
  • PressedBrush-用于非重音元素的背景按下状态。

特殊的刷子

  • HeaderBrush-用于标题元素的背景。
  • ValidationBrush-一个明亮的红色笔刷用于指示验证错误-为无效控件的下划线,并作为错误提示的背景,无效行和单元格的背景,以及清除按钮鼠标经过状态。

其他属性

  • DisabledOpacity-当它们被禁用时用于文本。背景通常使用AlternativeBrush当禁用。
  • InputOpacity-用于屏蔽输入控件和水印元素中的文本。
  • ReadOnlyOpacity-用于输入中的文本,当它们在只读状态。
  • FocusThickness-默认值为2,2,2,2.它用于计算焦点边界的厚度。

改变调色板颜色

Crystal主题提供了负责控件中使用的画笔的调色板颜色的动态变化。它们的默认值如上所述。此机制用于修改主题的颜色变化。

一般的命名约定是:CrystalPalette.Palette[名字]。颜色负责[名字]刷——如。CrystalPalette.Palette.AccentPressedColor设置的颜色telerik: CrystalResource ResourceKey = AccentPressedBrush

以Low-和High- Color结尾的颜色分别设置线性梯度画笔的渐变停止颜色。

改变颜色可以在代码后面实现。

设置调色板颜色

CrystalPalette.Palette.AccentPressedColor =颜色。FromRgb(255,0,0);

主题变化

控件可以在调色板之间切换LoadPreset方法如下所示:

改变主题的颜色变化

//默认颜色变化CrystalPalette.LoadPreset(CrystalPalette.ColorVariation.Light);//颜色变化CrystalPalette.LoadPreset(CrystalPalette.ColorVariation.Dark);

黑暗主题的变化在设计时考虑到深色背景,建议在应用程序中使用这样的背景。

更改字体属性

当使用水晶主题,您可以动态更改字形大小而且FontFamily应用程序中所有组件的属性。

字形大小而且FontFamily属性是公共的,因此您可以轻松地在单个点修改主题资源。主题中最常用的字体大小是with value13并且可以通过CrystalPalette.Palette.FontSize属性,方法与在支持主题调色板的其他主题中相同。

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

对于复杂的场景,我们强烈建议只设置FontSize属性在应用程序初始化之前

默认的字形大小

CrystalPalette.Palette.FontSizeXS = 11;CrystalPalette.Palette.FontSizeS = 12;CrystalPalette.Palette.FontSize = 13;CrystalPalette.Palette.FontSizeL = 14;CrystalPalette.Palette.FontSizeXL = 15;

改变主题的FontSize和FontFamily

private void OnButtonChangeFontSizeClick(对象发送者,RoutedEventArgs e) {CrystalPalette.Palette.FontSize = 16;CrystalPalette.Palette.FontFamily =新的FontFamily(“Calibri斜体”);}
设置FontSize和FontFamily

RadCalendar与修改FontSize和fontfamily

使用符号

水晶主题还使用Telerik Web UI字体字形默认情况下。的RadGlyph提供字形字体的轻量级、灵活和设计时友好的实现。

您可以阅读更多关于RadGlyph在RadGlyph概述文章关于字体符号的范围字体字形概述文章

改变角半径

水晶主题提供了一种简单的方法来修改应用程序中许多元素的圆角半径。您可以直接使用调色板的角半径属性。默认情况下CornerRadius值是5

改变默认的角半径

CrystalPalette.Palette.CornerRadius = new CornerRadius(0);
RadButton控件在更改默认角半径后的外观

角半径为0的RadButton

视觉助手

使用主题助手

ThemeHelper类在Windows11主题中使用。它公开了一组附加属性,可用于直接修改特定基本控件的外观,而不需要更改其控件模板。

使用材料辅助

MaterialAssist静态类来自Material主题,在Crystal主题中被重用。它公开了一组附加属性,可用于直接修改特定基本控件的外观,而不需要更改其控件模板。你可以在XAML中直接使用以下依赖属性:

  • ShadowDepth-Enum属性,指示控件上阴影效果的深度。有5个值可以选择。
  • IsShadowDisabled-属性用来控制阴影效果的可见性。

为助手组件声明名称空间

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

通过视觉帮助设置RadToggleButton的视觉外观

RadToggleButton在不同状态下的外观

RadToggleButton州

窗口按钮对齐

根据MacOS的设计,默认情况下,RadWindow控件的最小化、最大化、恢复和关闭按钮显示在Crystal主题中窗口标题的左侧。可以很容易地通过WindowButtonsAlignment属性水晶调色板。

更改WindowButtonsAlignment

CrystalPalette.Palette.WindowButtonsAlignment = ButtonsAlignment.Right;
RadWindow的外观与不同的对齐

RadToggleButton州

改变ScrollBarsMode

默认情况下,Crystal主题中的滚动条会根据当前鼠标是否在滚动条上而改变大小。它们通常体积较小,占用的空间更少,悬停时变得更宽。您可以选择设置ScrollBarsMode属性,以控制此行为。它是类型的ScrollViewerScrollBarsMode,可设置为以下值之一:

  • ScrollViewerScrollBarsMode。汽车-滚动条显示为一个窄条,并在鼠标悬停时扩展到正常大小。这是默认值。
  • ScrollViewerScrollBarsMode。紧凑的-滚动条总是以窄条的形式出现。
  • ScrollViewerScrollBarsMode。正常的-滚动条总是显示正常大小。

ScrollViewerScrollBarsMode的CrystalPalette的枚举可以在Telerik.Windows.Controls.Theming名称空间。

自动、紧凑和普通滚动条模式中的滚动条行为

滚动条在自动,紧凑和正常的滚动条模式

将调色板的ScrollBarsMode属性设置为Compact

CrystalPalette.Palette.ScrollBarsMode = telerik . windows . controls . themes . scrollviewerscrollbarsmode . compact;

改变不透明度

方法可以轻松地更改禁用元素和只读元素的不透明度DisabledOpacity而且ReadOnlyOpacityCrystalPalette的属性。默认值为0.35而且0.55分别。

改变不透明度

CrystalPalette.Palette.DisabledOpacity = 0.5;CrystalPalette.Palette.ReadOnlyOpacity = 0.5;
CrystalPalette.Palette.DisabledOpacity = 0.5

用StyleManager主题化方法合并修改过的调色板资源

中修改字体、颜色或其他资源时CrystalPalette而且StyleManager是用作主题机制,主题的ResourceDictionary需要被合并App.xaml文件应用更改。

在App.xaml中合并主题的ResourceDictionary

<应用程序。资源>     

另请参阅

在本文中
Baidu
map