Response.Write("Hello LOLOTA")

在ASP.NET，我們可以透過CSS來「裝飾」我們的控制項，而在Silverlight，同樣地可以利用相同的觀念來處理。

透過Style資源，可以調整控制項的外觀，而且將很多重複調整控制項外觀的程式碼變成只要寫一次就好，這可

節省很多的時間。

 

1.

首先，建立一個專案，在畫面上放置一個Button，如下：

 

<UserControl x:Class="SL_D10.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <Button x:Name="uxClick" Content="Click Me" Width="140" Height="100"></Button> </Grid> </UserControl>

 

這個 Button看起來就是「入門基本款」的Button，我們來改造它一下。

 

2.

我們將Button的Content屬性，調整如下：

<UserControl x:Class="SL_D10.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot"> <Button x:Name="uxClick" Width="140" Height="120"> <Button.Content> <StackPanel Orientation="Vertical" > <Image Source="Cover.jpg" Height="60" Width="80"></Image> <TextBlock Text="Click Me" HorizontalAlignment="Center" ></TextBlock> </StackPanel> </Button.Content> </Button> </Grid> </UserControl>

 

 

我們在Button的Content屬性中，放入了一個StackPanel物件，然後在這個物件中，放入一個Image以及TextBlock物件。

呈現出來的結果就如上圖一樣，但是，如果你要你的Button重複使用這個style，要怎麼處理呢？可以透過Resource來作處理。

 

3.

在程式碼中，放置一段如下的程式碼：

<Grid.Resources> <Style TargetType="Button" x:Key="homeboyButton"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Button> <StackPanel Orientation="Vertical" > <Image Source="Cover.jpg" Height="60" Width="80"/> <TextBlock Text="Click Me" HorizontalAlignment="Center" /> </StackPanel> </Button> </ControlTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources>

 

這一段程式碼的作用就如同在ASP.NET的CSS檔案中，對於控制項的外觀設定，我們在Grid的資源(Resource)中，命名了一個

homeboyButton的樣式(Style)，然後設定它套用的對象是Button，接下來，在其樣板內容中，填入要共用的樣式內容。

 

4.

然後在控制項中引用它：

<Button x:Name="uxButton1" Style="{StaticResource homeboyButton}" Width="150" Height="100" HorizontalAlignment="Right" />

 

5.

呈現出來的效果：

(左邊沒有透過樣式，右邊則為透過樣式)

 

6.

同樣的，你也可以針對內容設定不同的Style，例如：

<Style TargetType="TextBlock" x:Key="Show"> <Setter Property="FontSize" Value="20"></Setter> <Setter Property="Text" Value="這是一個宅字"></Setter> </Style>

 

然後在TextBlock套用：

<TextBlock HorizontalAlignment="Center" Style="{StaticResource Show}" />

 

這邊要注意到的是，套用資源時，會區分大小寫!! (請特別留意。)

而且，如果你原有的控制項已經設定有設定相同屬性，則會以原有的屬性設定值為主。

優先度: 原物件設定屬性 > 資源內設定的屬性值。

 

另外，針對Style，有下列要注意的事項(From MSDN)：

樣式於首次套用後即會密封。

您可以變更個別屬性 (已於樣式中設定) 的值。例如，即使 Template 屬性已經透過樣式設定，您還是可以在執行階段設定該屬性。或者，您可以將 setter 加入到 Setters 中的集合。然而，一旦該樣式由載入的物件放置於適當的位置，Style 就應該視為已密封。您可以針對 Style 檢查 IsSealed 的值，藉此偵測這個狀態。一旦某一樣式由連接到物件樹狀結構以及的 Silverlight 根視覺之載入物件參考，則該樣式應該視為待使用。這時，可以偵測在 Style 屬性已設定的情況下，物件何時會引發其 Loaded 事件。嘗試變更使用中樣式的任何個別屬性 (例如 Setters 內的任何項目)，會導致擲回例外狀況。

 

 

線上Demo

程式碼下載

 

 

 

參考資源：

1. 相依性屬性值優先順序 - http://msdn.microsoft.com/zh-tw/library/cc265148(VS.95).aspx

2. Style.IsSealed 屬性 - http://msdn.microsoft.com/zh-tw/library/system.windows.style.issealed(VS.95).aspx

 

 

如果您有微軟技術開發的問題，可以到MSDN Forum發問。

如果您有微軟IT管理的問題，可以到TechNet Forum發問喔。