WPF Styles

Sharing Styles

可以把不同 element 的 property 以 <Style x:Key=”…”> 集中在一起，如果 element 沒有這項 property，則會被忽略。

Example:

<StackPanel>     <StackPanel.Resources>         <Style x:Key="controlStyle">             <Setter Property="Control.FontSize" Value="15"/>             <Setter Property="Control.Height" Value="25"/>             <Setter Property="Control.Width" Value="100"/>             <Setter Property="Control.HorizontalAlignment" Value="Left"></Setter>             <Setter Property="Control.VerticalAlignment" Value="Top"></Setter>         </Style>     </StackPanel.Resources>     <Button Style="{StaticResource controlStyle}" Content="Button"   />     <CheckBox Style="{StaticResource controlStyle}" Content="CheckBox" />     <Rectangle Style="{StaticResource controlStyle}" Stroke="Black" /> </StackPanel>

Inherit

可以加入 BaseOn=”{..}” 來繼承其他的 style 設定：

<Style x:Key="controlStyleBold" BasedOn="{StaticResource controlStyle}">     <Setter Property="Control.FontWeight" Value="Bold"/> </Style>

Restricting the Styles

可以透過 TargetType=”{x:Type …}” 來限制 element 的類別：

<Style x:Key="controlStyle" TargetType="{x:Type Button}">     <Setter Property="Control.FontSize" Value="15"/> </Style>

Implicit Styles

上列的範例，若省略了前面的 x:Key，則會將所有 Button 的 style 都變更了。

<Style TargetType="{x:Type Button}">     <Setter Property="Control.FontSize" Value="15"/> </Style>

Property Triggers

可以透過 Style.Triggers 判斷 property 的數值，變動另一項 property 的內容：

<Style x:Key="controlStyle" TargetType="{x:Type Button}">     <Style.Triggers>         <Trigger Property="IsMouseOver" Value="True">             <Setter Property="FontSize" Value="15"/>         </Trigger>     </Style.Triggers>     <Setter Property="FontSize" Value="12"/>     <Setter Property="Height" Value="25"/> </Style>

Data Triggers

也可以經由資料內容動態改變 property：

<Style TargetType="{x:Type TextBox}">     <Style.Triggers>         <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="1">             <Setter Property="Background" Value="LightBlue"/>         </DataTrigger>     </Style.Triggers> </Style>

Logical OR Triggers

無論是 property trigger 或是 data trigger，都可以使用多項設定，來達到 or 效果：

<Style TargetType="{x:Type TextBox}">     <Style.Triggers>         <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="1">             <Setter Property="Background" Value="LightBlue"/>         </DataTrigger>         <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="2">             <Setter Property="Background" Value="LightCoral"/>         </DataTrigger>     </Style.Triggers> </Style>

Logical AND Triggers

如果想使用 and 產生 trigger，就必須使用 MultiTrigger 或 MultiDataTrigger指令：

<Style.Triggers>     <MultiTrigger>         <MultiTrigger.Conditions>             <Condition Property="IsMouseOver" Value="True"/>             <Condition Property="IsEnabled" Value="True"/>         </MultiTrigger.Conditions>         <Setter Property="Background" Value="AliceBlue"/>     </MultiTrigger> </Style.Triggers>