UWP 开发初阶 Chapter 7 - 简单介绍 Style 与 Resource 在 XAML 中的应用，还有一些控件基本属性的介绍

上篇回顾

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

本篇正文

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

概念介绍

1. Resource

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

   在 XAML 中 Resource 有好多类，比如 StaticResource , ThemeResource , CustomeResource , RelativeResource 等等，今天我们着重将前两个，分别是 StaticResource 和 ThemeResource。

   • StaticResource

     直译那就是静态资源，那什么是静态资源呢？就是说这个资源在初次编译的时候解析后，就不再改变了，即使你在软件运行时（俗称 Runtime）改变这个资源，那软件上是看不出变化的，除非你重新打开软件，再次编译。

   • ThemeResource

     看起来这个比较抽象，什么是主题资源？其实这个 ThemeResource 可以粗略理解为和 StaticResource 相反，因为 ThemeResouce 会在 runtime 改变，而不是一旦编译完成，就不变化了。但随之也伴随着性能损耗。这种 ThemeResource 在你想要在运行过程中改变软件的主题的时候就比较有用了，这也是这名字的由来。

2. Style

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

代码与展示

1. 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>
       

     • 最后，我们编译一下，效果如下：

       

2. 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 的知识复杂的还有很多，我可能会在中阶课程内做更深入的介绍。

下篇见哈！