Silverlight//像html的CSS功能

  1. Silverlight//像html的CSS功能
    1. mystyle.css檔
    2. .html檔
    3. App.xaml檔
    4. .xaml檔
    5. Dictionary1.xaml
    6. App.xaml檔

Silverlight//像html的CSS功能

原文連結: https://darkblack01.blogspot.com/2014/05/silverlighthtmlcss.html
移植時的最後更新日期: 2014-07-30T15:58:12.529+08:00

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檔無需修改。
只是這個引用外部資源的語法也太長了點。

發表於 
tags:
  • { .new framework }
  • { Sliverlight }