Style主要就是透過屬性(Property)去自訂控制項的外觀, 尤其當我們需要相同的屬性套用在多個控制項時, Style會很方便.
比方在UI設計時, 常會讓UI具有某些相同的Style,例如:背景顏色,字型,控制項的顏色…等等.
使用Style的好處如下:
- 可以方便使用者將一組屬性值(顏色,尺寸,動畫, 觸發方式等)套用到多個控制項的方式,這樣一來, 程式碼將變得簡潔.
- 可集中在同一個地方作管理(ex: 資源 Resource), 好處如果以後想改變這些屬性, 只要在同一個地方更新即可
例如下面範例中, 有一個影音播放程式,如圖1所示, 其中UI上有三個外觀相同的按鈕, 在這程式碼當中, 如圖2所示, 如果不套用Style的話, 我們必需要將每一個控制項都設定一次相同的屬性, 這樣, 程式碼將會有很多重覆的部分, 而且, 萬一以後要變更其中一個屬性, 將要修改到很多地方
[圖1]具有一些相同屬性的Button
[圖2] 沒有套用Style
下面的範例中, 我們利用Style將上述程式碼中相同屬性抽離出來(Style用Setter組成的集合來設定目標屬性, 而每個Setter是由依存屬性和設定值組成), 並集中在Resource中. 程式碼將變得簡潔, 管理上也變的更方便, 如圖3所示.
[圖3] 套用Style
Style的共享與限定
你也可以將Style套用在不同的控制項上,如下所示:
或限定此Style只能給特定的控制項使用, 可用TargetType屬性指定, 例如你希望只有Button可套用此Style, 可寫成:
Style繼承
Style之間可以互相繼承, 如果要這樣做, 您可以使用一個樣式做為基礎來建立新樣式, 並利用BasedOn屬性來繼承
另外, Style除了可用來設定控制項的屬性(Property)之外, 還可以運用在下列幾個地方
你也可以將Style套用在不同的控制項上,如下所示:
<Style x:Key="controlStyle">
<Setter Property="Control.Height" Value="30"/>
<Setter Property="Control.Width" Value="75"/>
<Setter Property="Control.Margin" Value="10"/>
<Setter Property="Control.Background"
Value="{StaticResource btnBackground}"/>
</Style>
<!-- Style套用在不同的控制項上-->
<Button x:Name="btnPlay" Grid.Column="0"
Style="{StaticResource controlStyle}"
Content="Play" Click="btnPlay_Click">
</Button>
<Label Grid.Column="1"
Style="{StaticResource controlStyle}"
Content="Text Block"/>
<Border Grid.Column="2"
Style="{StaticResource controlStyle}"/>
或限定此Style只能給特定的控制項使用, 可用TargetType屬性指定, 例如你希望只有Button可套用此Style, 可寫成:
<Style x:Key="btnStyle" TargetType="{x:Type Button}">
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="75"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Background"
Value="{StaticResource btnBackground}"/>
</Style>
若此Syle套用在非Button的控制項上, 將會產生編譯錯誤Style繼承
Style之間可以互相繼承, 如果要這樣做, 您可以使用一個樣式做為基礎來建立新樣式, 並利用BasedOn屬性來繼承
<Style x:Key="btnStyleWithBold"
BasedOn="{StaticResource btnStyle}"
<Setter Property="Button.FontWeight" Value= "Bold"/>
</Style>
另外, Style除了可用來設定控制項的屬性(Property)之外, 還可以運用在下列幾個地方
- 設定觸發方式(Trigger)
- 設定動畫(Animation)
- 設定樣板(Template)
