Silverlight學習之樣式

Silverlight中的樣式和Html中的CSS概念差不多，可以單獨寫在一個檔案中，用來達到複用的效果。

樣式按照範圍主要分為三類  內部樣式 局部樣式 全域樣式，其中局部樣式和全域樣式大體相同，下邊會放在一塊。

內部樣式

<Canvas>
           <Button Height="50" Width="150" Content="Hello World" Canvas.Left="50" Canvas.Top="20">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Foreground" Value="Red"></Setter>
                    <Setter Property="FontSize" Value="20"></Setter>
                </Style>
            </Button.Style>
        </Button>

 </Canvas> 

 

運行效果

 

內部樣式有效範圍只在此控制項內，因此不能達到重用的效果，不推薦用此方法。

 

 局部樣式和全域樣式

局部樣式通常定義在UserControl.Resources中 它只能作用在此頁面中。

<UserControl.Resources>
        <Style x:Key="ButtonPartStyle" TargetType="Button">
            <Setter Property="Foreground" Value="Green"></Setter>
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </UserControl.Resources>

全域樣式通常定義在<Application.Resources>中可以在整個項目中引用

  <Application.Resources>
         <Style x:Name="ButtonWholeStyle" TargetType="Button">
            <Setter Property="Foreground" Value="Orange"></Setter>
            <Setter Property="FontSize" Value="26"></Setter>
        </Style>   

</Application.Resources>

樣式定義都是通過Style元素來指定，需要設定一個Key屬性，用來區分不同的樣式，並且通過指定TargetType來指定作用目標的類型。通過Setter來聲明目標的屬性。在頁面控制項中中通過StaticResource來以用此樣式。

控制項引用樣式

 <Button Style="{StaticResource ButtonPartStyle}" Content="Hello" Canvas.Left="50" Canvas.Top="40" Height="50" Width="150"/>

<Button Style="{StaticResource ButtonWholeStyle}" Content="World" Canvas.Left="50" Canvas.Top="100"  Height="50" Width="150"/>

運行效果

樣式重寫

定義了全域樣式和局部樣式後，樣式能被重寫。即內部樣式高於全域樣式和局部樣式。

<Canvas>
         <Button Style="{StaticResource ButtonPartStyle}" Content="Hello" Canvas.Left="50" Canvas.Top="20" Height="50" Width="150" Foreground="Blue"/>
        <Button Style="{StaticResource ButtonWholeStyle}" Height="50" Width="150" Content="World" Canvas.Left="50" Canvas.Top="100">
        </Button>
  </Canvas>

 效果

 

儘管在局部樣式中定義了Button的Foreground為Green，但是在內部樣式重寫後它顯示為Blue