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 的知识复杂的还有不少，我可能会在中阶课程内作更深刻的介绍。

下篇见哈！