UWP 开发初阶 Chapter 7 - 简单介绍 Style

2018-07-17 本文已影响0人 TotoroQ

上篇回顾

上篇讲述了如何通过 C# 来对于 XAML 控件的属性进行更改。其实大致思路很简单，首先我们需要给这个控件一个名字，这样我们才可以在 C# 中找到该控件。然后再通过 controlName.propertyname 的形式获取或者赋值。

本篇正文

今天我们简单讲述一下 Style 和 Resource 这两个概念。顺带也补充一下 Margin 和 Padding 这两个常用属性（之前忘记介绍了 :smile:），这次先介绍概念性的东西，然后加以示范！

概念介绍

Resource

Resource 顾名思义，就是资源。然而在 XAML 中这个所谓的资源有代表着什么意思呢？其实就是表示一些你已经在程序里面定义的，或者微软帮你定义好的资源。

在 XAML 中 Resource 有好多类，比如 StaticResource , ThemeResource , CustomeResource , RelativeResource 等等，今天我们着重将前两个，分别是 StaticResource 和 ThemeResource。
- StaticResource
  
  直译那就是静态资源，那什么是静态资源呢？就是说这个资源在初次编译的时候解析后，就不再改变了，即使你在软件运行时（俗称 Runtime）改变这个资源，那软件上是看不出变化的，除非你重新打开软件，再次编译。
- ThemeResource
  
  看起来这个比较抽象，什么是主题资源？其实这个 ThemeResource 可以粗略理解为和 StaticResource 相反，因为 ThemeResouce 会在 runtime 改变，而不是一旦编译完成，就不变化了。但随之也伴随着性能损耗。这种 ThemeResource 在你想要在运行过程中改变软件的主题的时候就比较有用了，这也是这名字的由来。
Style

顾名思义，样式！这个和写逻辑代码的时候，注意包裹（encapsulate）的好处是一致的。如果你在几个控件上应用相同的样式，那么样式可以帮你省去很多重复代码。同时，也使得你的代码更易更改，因为你只需要在定义 Style 的地方进行更改，省去了一整个项目为了同一个东西四处更改的麻烦。

代码与展示

Resource
- 如何使用微软已经在 SDK 中定义的 Resource （防止部分初学朋友不知道 SDK，全称 Software Development Kit，即软件开发套件）
  
  举个例子，见如下代码与效果：
  - 代码：
```
<Grid Background="{StaticResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}">
</Grid>
```
  - 效果预览：
  下面解释
  这里面，我在 Background 里面设置一个微软预先设定好的背景颜色，这个背景颜色里面会根据你系统的颜色变化而变化（上图我用的是蓝色的系统色），同时大家在图片里面可能看不清，这个背景还是采用了亚克力模糊效果的。
  
  加入我们系统换了其他的主题色（比如红色），那么效果如下：
  
  使用 Resource 的语法其实都是这样 PropertyName="{StaticResource ResourceName}" ，即便是 ThemeResource 也是这样子的语法，比如如下代码（其中 myResourceName 指代资源的名字）：
```
Background="{ThemeResource myResourceName}"
```
- 如何使用自己定义的 Resource？
  
  下面我们举个例子，我们定义一个亚克力背景色的资源！
  - 第一步
    
    在 MainPage.xaml 里面新建如下代码：
```
<Page.Resources>
   <ResourceDictionary>
            
   </ResourceDictionary>
</Page.Resources>
```
    完整代码如下图所示：
  - 第二步
    
    在刚才新建的 ResourceDictionary 里面编写如下代码：
```
<Page.Resources>
   <ResourceDictionary>
       <AcrylicBrush x:Key="myAcrylicBrush"
                     TintColor="White"
                     TintOpacity="0.3"
                     BackgroundSource="HostBackdrop"
                     FallbackColor="White"/>
   </ResourceDictionary>
</Page.Resources>
```
    解释：这个 AcrylicBrush 就是微软先前发布的 Fluent Design 里面重要的元素之一，亚克力。而第一行 x:Key 有点类似于 Name ，用于后面引用，只不过 Resource 都是根据 x:Key 来引用的。第二行的 TintColor 就是用于模糊的颜色，这里面是白色。第三行的 TintOpacity 指的便是透明度，值在 0 - 1 之间，越接近于 0，越透明。第四行的 BackgroundSource 表示背景虚化的对象，其中 HostBackDrop 表示模糊软件背后的背景，而 BackDrop 表示模糊应用内背景。第五行 FallbackColor 表示的是，当你切换到其他软件，或者电脑进入省电模式的时候，显示的颜色。
  - 第三步
    
    这时候，我们其实已经编写好了一个 Resource，而我们现在要去使用它。我们在 Grid 中设置如下的 Background。
```
<Grid Background="{StaticResource myAcrylicBrush}">

</Grid>
```
  - 最后，我们编译一下，效果如下：
Style
- 如何使用 SDK 内定义好的 Style？
  
  举个例子，我们常规新建一个 Button 是没有光影效果的，而需要我们引用一个 Style。现在，我们新建一个 Button ，然后引用一个叫 ButtonRevealStyle 的 Style 代码如下：
```
<Button Content="Demo show how to use Style in XAML"
        Style="{StaticResource ButtonRevealStyle}"
        Height="300"
        Width="300"/>
```
  解释：为了让大家更方便看到 Reveal （光影效果），因此我通过 Height 和 Width 将这个按钮变得比较大。
  
  编译后效果如下：
- 如何自定义 Style ？
  
  这里举个例子，通过 Style 来定义一个 Textblock 的字号，字体颜色和对齐方式。
  - 首先，在之前写的 ResourceDictionary 里面增加下面的代码（和刚才新建的 AcrylicBrush 并列）：
```
<Style x:Key="myStyle"
       TargetType="TextBlock">
                
</Style>
```
    解释：其中 x:Key 概念上面解释过了，而 TargetType 是指代你要做用于控件的类型，这里面我们是要改变 TextBlock ，因此如上面所示。
  - 然后，我们在新建的 Style 里面，加上 Setter，完整代码如下：
```
<Style x:Key="myStyle"
       TargetType="TextBlock">
    <Setter Property="FontSize" Value="30"/>
    <Setter Property="Foreground" Value="Blue"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
</Style>
```
    解释：每个 Setter，都是用来设定相应的属性。Property 里面就是你要更改的属性，Value 就是你要设置的值，比如第一个 Setter 里面，我们就是将 FontSize 改为 30，其他类似。
  - 然后，我们新建一个 TextBlock ，并且使用 Style，代码如下：
```
<TextBlock Text="This is a demo text around Style"
           Style="{StaticResource myStyle}"/>
```
  - 最后，我们编译，看一下使用效果！效果如下：

补充知识：Margin 和 Padding

Margin 和 Padding 都是表示边缘空出的大小，只是 Margin 表示向外空出，而 Padding 表示向内空出。

语法：

以下以 Button 为例

Margin：

<Button Content="Demo to show margin"
        Margin="10,10,10,10"/>

Padding:
```
<Button Content="Demo to show padding"
        Padding="10,10,10,10"/>
```
解释：其中四个数字分别表示左、上、右、下四个方向的空出大小，向上面这种特殊情况，左上右下四个数一样的话，那你也可以直接只输入一个数字，例如：Margin="10"

运行效果：

以下为了显示效果建立了多个 Button

Margin：
- 无 Margin：
- 有 Margin：
Padding:
- 无 Padding：
- 有 Padding:

提示：Margin 和 Padding 也可以设置负数，效果大家可以自己去试一试哈！

总结

好啦！今天就到此为止啦！今天的量可能比较大，希望大家好好理解吧！

下次会给大家介绍一下 ListView 和其他一些控件。很快就要带领大家去真正走进 C# 的世界了，XAML 的知识复杂的还有很多，我可能会在中阶课程内做更深入的介绍。

下篇见哈！