Simple Style

在 Silverlight 中可以利用 Style 類別來定義一致性的樣式，有點類似網頁中 CSS 樣式表的功能。 下面的 XAML 可以替繼承至 Control 類別的控制項設定自己固定的樣式。

<!-- 控制項底層樣式 -->
<Style x:Key="BaseControlStyle" TargetType="Control">
    <Setter Property="Margin" Value="10" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="CornflowerBlue" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontSize" Value="26" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Center" />
</Style>

有了通用的樣式之後可再針對各樣的控制項定義自己的樣式。

<!-- 按鈕的樣式 -->
<Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseControlStyle}">
    <Setter Property="Width" Value="200" />
    <Setter Property="Content" Value="Say Hello" />
</Style>

<!-- 文字方塊的樣式 -->
<Style x:Key="TextBoxStyle" TargetType="TextBox" BasedOn="{StaticResource BaseControlStyle}">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Width" Value="300" />
    <Setter Property="Text" Value="I am a TextBox" />
</Style>
<br />

在 WPF 中的 Style (在 System.Windows 命名空間底下) 與行動裝置及網頁中有點不太相同， WPF Style 支援了 Trigger, MultiTrigger, DataTrigger  等屬性，讓控制項的樣式還能依資料及事件來動態改變。

<!-- 當取得焦點或觸控版通過時時更換顏色 -->
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True" />
        <Condition Property="IsStylusOver" Value="True" />
    </MultiTrigger.Conditions>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush >
                <GradientStop Color="White" Offset="0" />
                <GradientStop Color="Blue" Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</MultiTrigger>

    <!-- 當文字方塊是空的時侯不予許按下按鈕 -->
    <DataTrigger Binding="{Binding ElementName=myTextBox, Path=Text}" Value="">
    <Setter Property="IsEnabled" Value="False" />
</DataTrigger>

範例檔案: WP7.Silverlight.Style WPF.Style