AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

UWP 轻量级样式定义（Lightweight Styling）

2018-11-09 905
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:UWP 轻量级样式定义（Lightweight Styling） 版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名吕毅（包含链接：http://blog.csdn.net/wpwalter/），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。
原文: UWP 轻量级样式定义（Lightweight Styling）

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名吕毅（包含链接：http://blog.csdn.net/wpwalter/），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系（walter.lv@qq.com）。 https://blog.csdn.net/WPwalter/article/details/82859508

在 UWP 中，可以通过给空间直接设置属性或在 Style 中设置属性来定制空间的样式；不过这样的样式定义十分有限，比如按钮按下时的样式就没法儿设置。当然可以通过修改 Template 来设置控件的样式，然而 UWP 中控件的样式代码实在是太多太复杂了，还不容易从 Blend 中复制了大量代码出来改，下个版本样式又不一样，于是我们就丢了不少功能。

本文将介绍 UWP 轻量级样式定义（Lightweight styling），你既不用写太多代码，又能获得更多的样式控制。

本文内容

轻量级样式定义

看一段简单的代码，你一定能立刻明白本文想说的是什么。

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonForeground" Color="#dd5145"/>
                <SolidColorBrush x:Key="ButtonBorderBrush" Color="#dd5145"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

本段代码摘抄自 XAML Lightweight styling - UWP app developer - Microsoft Docs

按钮的颜色定制
▲ 按钮的颜色定制

以上代码可以写在 Page 中，即可在 Page 范围内获得这些主题资源的重写。当然，如果需要更大范围，可以考虑去 App 类中重写。

官网上举例的这种类型的样式定义其实普通的 Style 也能很容易实现的，真正厉害的是 Style 里设置不了的那些鼠标滑过颜色和鼠标按下颜色。于是，我们额外添加一些代码：

<SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
<SolidColorBrush x:Key="ButtonForeground" Color="#dd5145"/>
<SolidColorBrush x:Key="ButtonBorderBrush" Color="#dd5145"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#10dd5145"/>
<SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="#ffcd44"/>
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="#ffcd44"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#10ca5100"/>
<SolidColorBrush x:Key="ButtonForegroundPressed" Color="#ca5100"/>
<SolidColorBrush x:Key="ButtonBorderBrushPressed" Color="#ca5100"/>

现在我们只是设置一些颜色值即修改了按钮在多种状态下的外观。而且在按下的过程中，还保留了按钮按下时的倾斜效果。

按钮更多的颜色定制
▲ 按钮更多的颜色定制

相比于 Template -> Edit Copy 这种重量级的样式与模板定义，在保证足够的样式定义的情况下，代码量是不是少了非常多了呢？

如何找到控件支持的主题资源

前面我们知道了如何定制轻量级样式，但实际做 UI 的时候，我怎么知道有哪些样式主题资源的值可以使用呢？

一种方法是直接看微软官方文档，比如这里 XAML theme resources；你可以在这篇文章中找到很多通用的主题资源的 Key 用来重写。不过实际上由于 Windows Community Toolkit 以及各种第三方控件库的存在，所以没有什么文档是可以把这些 Key 写全的；所以更重要的方法是我们能自己找到有哪些 Key 可以使用。

找到 Key 的方法和定义一个全新的 Style / Template 一样，都可以通过 Visual Studio 的设计器视图（或者 Blend）实现。

第一步：前往 Visual Studio 设计器视图

Visual Studio 设计器视图
▲ Visual Studio 设计器视图

第二步：在其中一个你想定制样式的控件上 右键 -> 编辑模板 -> 编辑副本

编辑模板
▲ 编辑模板

特别注意，如果你发现你的 “编辑副本” 是灰色的，说明你已经定制过样式了。将你已经定制的样式删除后，就可以再编辑副本了。

灰色的 编辑副本
▲ 灰色的 “编辑副本”

第三步：寻找你感兴趣的主题资源的 Key，记下来准备定义

在编辑副本后，你可以在副本的代码中找到按钮的原生样式定义。比如一个按钮的样式是这样的：

<Style x:Key="ButtonStyle1" TargetType="Button">
    <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/>
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
    <Setter Property="Padding" Value="8,4,8,4"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
    <Setter Property="FocusVisualMargin" Value="-3"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

从中我们可以找到这些可以定义的主题资源 Key：

  • ButtonBackground
  • ButtonForeground
  • ButtonBorderBrush
  • ButtonBorderThemeThickness
  • ContentControlThemeFontFamily
  • ControlContentThemeFontSize
  • ButtonBackgroundPointerOver
  • ButtonBorderBrushPointerOver
  • ButtonForegroundPointerOver
  • ButtonBackgroundPressed
  • ButtonBorderBrushPressed
  • ButtonForegroundPressed
  • ButtonBackgroundDisabled
  • ButtonBorderBrushDisabled
  • ButtonForegroundDisabled

第四步：轻量级样式定义

请先删除这份副本样式，这样你就可以进行 “轻量级样式定义” 了。代码量相比于上面这份完整样式可以少非常多。

文章标签：
Windows
杰克.陈
目录
相关文章
杰克.陈
|
C#
WPF 界面实现多语言支持 中英文切换 动态加载资源字典
原文:WPF 界面实现多语言支持 中英文切换 动态加载资源字典 1、使用资源字典，首先新建两个字典文件en-us.xaml、zh-cn.xaml。定义中英文的字符串在这里面【注意：添加xmlns:s="clr-namespace:System;assembly=mscorlib】 zh-cn.
杰克.陈
3179 0
lqj_本人
|
1天前
|
UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（边框设置）
在HarmonyOS 5.0中，ArkTS提供了丰富的边框设置属性，允许开发者自定义组件的边框样式，提升应用的视觉效果和用户体验。本文详细解读了border属性的使用方法，并提供了示例代码，展示了如何设置不同边的边框宽度、颜色、圆角和样式。边框设置在UI开发中具有重要作用，如区分组件、强调重要元素和美化界面。
lqj_本人
16 6
lqj_本人
|
3天前
|
UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（多态样式）
在HarmonyOS 5.0中，ArkTS的多态样式（stateStyles）功能允许开发者根据不同状态（如正常、按压、禁用、聚焦、选中等）为组件设置不同的样式，从而提供更丰富的用户体验。通过stateStyles属性，可以动态改变组件样式，提升用户交互的直观性和界面美观性。示例代码展示了如何为文本组件设置正常和按压状态的样式。
lqj_本人
56 1
你挚爱的强哥
|
6月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
你挚爱的强哥
89 0
【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
啸啸说
|
C# C++ Windows
3.只使用代码创建WPF应用程序
3.只使用代码创建WPF应用程序
啸啸说
105 0
Wesky
|
自然语言处理 编译器 C#
【WPF】实现动态切换语言(国际化)以及动态换肤功能
以下内容，手把手从搭建到最终实现，完成多语言切换以及换装功能。
Wesky
439 0
【WPF】实现动态切换语言(国际化)以及动态换肤功能
needrunning
|
JavaScript 前端开发 API
了解如何构建 Metro 样式的应用程序
Windows 提供两组用于构建 Metro 风格应用的 API：Windows 运行时和 Windows JavaScript 库。但是Windows JavaScript 库和大众的javascript不兼容，也就是说不是一回事 参考url http://msdn.
needrunning
657 0
杰克.陈
|
XML C# 数据格式
[UWP]为附加属性和依赖属性自定义代码段（兼容UWP和WPF）
原文:[UWP]为附加属性和依赖属性自定义代码段（兼容UWP和WPF） 1. 前言 之前介绍过依赖属性和附加属性的代码段，这两个代码段我用了很多年，一直都帮了我很多。不过这两个代码段我也多年没修改过，Resharper老是提示我生成的代码可以修改，它这么有诚意，这次就只好从了它，顺便简单介绍下怎么自定义代码段。
杰克.陈
759 0
杰克.陈
|
Windows
UWP 扩展/自定义标题栏的方法，一些概念和一些注意事项
原文 UWP 扩展/自定义标题栏的方法，一些概念和一些注意事项 在 Windows 10 的前几个版本中将页面内容扩展到标题栏上还算简单，主要是没什么坑。直到一些新控件的引入和一些外观设计趋势变化之后，扩展标题栏开始出现一些坑了。
杰克.陈
1304 0
杰克.陈
|
数据可视化 C# 容器
WPF 多线程 UI：设计一个异步加载 UI 的容器
原文 WPF 多线程 UI：设计一个异步加载 UI 的容器 对于 WPF 程序，如果你有某一个 UI 控件非常复杂，很有可能会卡住主 UI，给用户软件很卡的感受。但如果此时能有一个加载动画，那么就不会感受到那么卡顿了。
杰克.陈
1676 0