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 的知識複雜的還有不少，我可能會在中階課程內作更深刻的介紹。

下篇見哈！