2014年5月12日 星期一

Silverlight//像html的CSS功能

CSS之於HTML那麼,XML:STYLE就之於XML

用Silverlight的說法,將style設定成全域的寫法,用html的表示如下:

mystyle.css檔

body{ margin-top:10px}

*.html檔

<html>
<head>
<title>Google</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

</body>
</html>
用xml的表示如下:
在Silverlight中Body並非預設標籤,只是要和HTML做對照而舉的例子而已。
可以用內建標籤取代之,例如<Button>之類的。

App.xaml檔

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SliverlightOne.App"
>
<Application.Resources>
<Style x:Key="keyBody" TargetType="Body">
<Setter Property="Margin" Value="0, 10, 0, 0"/>
</Style>
</Application.Resources>
</Application>

*.xaml檔

<Grid x:Name="LayoutRoot" Background="White">
<Body></Body>
<Body Style="{StaticResource keyBody}"></Body>
</Grid>
</html>
第一種使用Style的方式,是直接用TargetType的隱喻。像是最初的CSS一樣,直接定義某標籤的Style之後呼叫使用預設Style直接套用。
另一種是指定Key,在CSS中,就是指定id或class的方式。被指定者才適用於該Style。

在Silverlight中,每一個元素都有屬於自己的resource(CSS的說法,就是「每個元素都可以定義該元素自己的Style」),當解析到這一個markup,Silverlight會先找該markup(就是有"{StaticResource ResourceName}"的時候)的resource,如果沒有找到相同名稱的就再往一層去找,一直找到Application的這一層。

所以,Application有全域Resource的感覺,而XAML的樹,各個分支都算是區域的resource。



最後,將資源的Style獨立成一個檔案,才是真正像CSS的功能。
先在VS上→方案管理員中按右鍵→Add→New Item→Silverlight Resource Dictionary
新增的Dictionary1.xaml檔,把元素貼過來。

Dictionary1.xaml

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="keyBody" TargetType="Body">
<Setter Property="Margin" Value="0, 10, 0, 0"/>
</Style>
</ResourceDictionary>

App.xaml檔

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SliverlightOne.App"
>
<Application.Resources>

<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ElementBrushes.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

</Application.Resources>
</Application>
最後在使用該Resource的*.xaml檔無需修改。
只是這個引用外部資源的語法也太長了點。

沒有留言:

張貼留言