XAML - 樣式



XAML 框架提供了幾種策略來個性化和定製應用程式的外觀。樣式使我們能夠靈活地設定物件的某些屬性,並跨多個物件重用這些特定設定,以獲得一致的外觀。

  • 在樣式中,您只能設定物件的現有屬性,例如高度、寬度和字型大小。

  • 只能指定控制元件的預設行為。

  • 可以在單個樣式中新增多個屬性。

樣式用於為一組控制元件提供統一的外觀。隱式樣式用於將外觀應用於給定型別的所有控制元件並簡化應用程式。

假設我們有三個按鈕,並且它們都必須看起來相同——相同的寬度和高度、相同的字型大小和相同的前景顏色。我們可以將所有這些屬性設定在按鈕元素本身上,對於所有按鈕來說,這仍然還可以,如下圖所示。

XAML Styles

但在現實生活中的應用程式中,通常會有更多需要看起來完全相同的按鈕。當然,不僅僅是按鈕,您通常希望文字塊、文字框和組合框等在您的應用程式中看起來相同。當然一定有更好的方法來實現這一點——這就是所謂的樣式。您可以將樣式視為一種方便的方法,可以將一組屬性值應用於多個元素,如下圖所示。

Styling

讓我們來看一個示例,其中包含三個在 XAML 中建立並帶有一些屬性的按鈕。

<Window x:Class = "XAMLStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button Content = "Button1" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button2" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button3" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/> 
   </StackPanel> 
	
</Window>

檢視上面的程式碼,您會看到對於所有按鈕,高度、寬度、前景顏色、字型大小和邊距屬性都保持不變。編譯並執行上述程式碼後,將顯示以下輸出:

Button

現在讓我們來看同一個示例,但這次我們將使用樣式

<Window x:Class = "XAMLStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources> 
      <Style x:Key = "myButtonStyle" TargetType = "Button">
         <Setter Property = "Height" Value = "30"/> 
         <Setter Property = "Width" Value = "80"/> 
         <Setter Property = "Foreground" Value = "Blue"/> 
         <Setter Property = "FontSize" Value = "12"/> 
         <Setter Property = "Margin" Value = "10"/> 
      </Style>
   </Window.Resources> 
	
   <StackPanel> 
      <Button Content = "Button1" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button2" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button3" Style = "{StaticResource myButtonStyle}"/>
   </StackPanel>
	
</Window>

樣式在資源字典中定義,每個樣式都有一個唯一的鍵識別符號和一個目標型別。在<style>內,您可以看到為樣式中包含的每個屬性定義了多個 setter 標記。

在上面的示例中,每個按鈕的所有公共屬性現在都在樣式中定義,然後透過使用 StaticResource 標記擴充套件設定 style 屬性來為每個按鈕分配具有唯一鍵的樣式。

編譯並執行上述程式碼後,將生成以下視窗,該視窗與輸出相同。

Button

這樣做的優點是顯而易見的。我們可以在其範圍內隨處重用該樣式,如果需要更改它,只需在樣式定義中更改一次,而不是在每個元素上更改。

樣式的定義級別會立即限制該樣式的範圍。因此,範圍(即可以使用樣式的位置)取決於您定義樣式的位置。樣式可以在以下級別定義:

序號 級別和描述
1 控制元件級別

在控制元件級別定義的樣式只能應用於該特定控制元件。

2 佈局級別

在任何佈局級別定義的樣式只能被該佈局及其子元素訪問。

3 視窗級別

在視窗級別定義的樣式可以被該視窗上的所有元素訪問。

4 應用程式級別

在應用程式級別定義的樣式可在整個應用程式中訪問。

廣告
© . All rights reserved.