[Silverlight]- 如何使用畫筆功能

Silverlight 給使用者提供了四種畫筆的功能:單色筆刷、線性漸層畫筆、放射狀漸層畫筆、影像筆刷以及視屏畫筆.下面簡單介紹一下各自的用途:

一、單色筆刷（SolidColorBrush）

單色筆刷（SolidColorBrush ） 又叫單色畫筆，它的特點在於用單一的顏色來填充對象。例如用紅色（Red）、綠色（Green）等等日常所見的顏色。它的一個重要屬性就是【Color】 屬性。用【Color】屬性可以設定它的填充顏色。

樣本：

SolidColorBrush

<Grid x:Name="LayoutRoot"  ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="350"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="500"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Rectangle Grid.Row="0" Grid.Column="0">
            <Rectangle.Fill>
                <SolidColorBrush Color="Red"/>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>

 

:

這裡定義了一個Rectangle對象,並用SolidColorBrush 填充Rectangle的Fill屬性. 使用的是單一的顏色紅色(Red).另外,在Silverlight中,同樣也支援帶透明度的顏色,帶透明度的顏色一般用ARGB 十六進位表述法表示,例如 #FFFF0000

二、漸層筆刷

它屬於漸層筆刷使用沿一條軸彼此混合的多種顏色繪製地區。 可以使用它們來形成光和影的效果，使 UI 元素具有三維外觀。 還可以使用它們來類比玻璃、鑲邊、水和其他光滑表面。漸層筆刷又分為兩種：線性漸層畫筆和放射狀漸層畫筆

（1）線性漸層畫筆（LinearGradientBrush）

線性漸層畫筆（LinearGradientBrush）使用沿一條直線（即“漸層軸”）定義的漸層來繪製地區。漸層軸可以改變，通過改變漸層軸的方向實現不同的漸層效果。漸層軸有起始點和終止點，預設的起始點在左上方（0，0），終止點在右下角（1，1）。所以預設的漸層軸是一條對角線。

實現漸層的效果可以使用GradientStop 來指定漸層的顏色及其在漸層軸上的位置。主要是使用了GradientStop 對象的【Color】和【Offset】 這兩個屬性。【Offset】屬性用於設定漸層軸上的位置，【Color】屬性用於指定漸層的顏色。漸層停止點之間每個點的顏色按兩個邊界漸層停止點指定的顏色組合執行線性插補

樣本：

LinearColorBrush

 <Rectangle Grid.Row="0" Grid.Column="1">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Yellow" Offset="0"/>
                    <GradientStop Color="Red" Offset="0.25"/>
                    <GradientStop Color="Blue" Offset="0.5"/>
                    <GradientStop Color="LimeGreen" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

 

：

這裡設定了四個漸層層級，分別在0，0。25，0.5，1 處設定了不同的顏色。漸層的起止點均為預設。

同樣,我們可以重新更改它的起止點位置,達到不同的漸層效果,這裡我們將它的起始位置設定為(0.5,0);終止點設定為(0.5,1). 這樣就達到了一個從上到下的垂直漸層效果:

水平漸層效果:

 

三、放射狀漸層畫筆（RadialGradientBrush）

放射狀漸層畫筆（RadialGradientBrush）又叫射線漸層筆刷，與LinearColorBrush相似，RadialGradientBrush用沿一條軸混合在一起的顏色繪製地區，而線性漸層畫筆（LinearColorBrush）的軸是一條直線。 放射狀漸層畫筆的軸由一個圓圈定義；其顏色從圓圈的原點向外輻射。

樣本：

RadialGradientBrush

<Rectangle Grid.Row="1" Grid.Column="0">
            <Rectangle.Fill>
                <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
        RadiusX="0.5" RadiusY="0.5">
                    <GradientStop Color="Yellow" Offset="0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1" />
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

 

效果：

 

GradientOrigin指定放射狀漸層畫筆的漸層軸的起點。 漸層軸從漸層原點輻射至漸層圓。 畫筆的漸層圓由其 Center、RadiusX、和RadiusY 屬性定義。

顯示了具有不同的 GradientOrigin、Center、RadiusX和 RadiusY 設定的多個放射狀漸層。

另外，由於漸層停止點不提供 opacity 屬性，因此必須使用 ARGB 十六進位標記法或 ScRGB 標記法來指定顏色的 Alpha 色板，以建立透明或部分透明的漸層停止點。其十六進位標記法，詳見其他文檔。

四、影像筆刷（ImageBrush）

ImageBrush類支援您將映像用作填充、背景和輪廓。 ImageBrush使用由 ImageSource屬性指定的 JPEG 或 PNG 映像來繪製地區。 使用時將要載入的映像的路徑來設定ImageSource 屬性。

預設情況下，ImageBrush會將其映像展開以完全充滿要繪製的地區，如果繪製的地區和該映像的長寬比不同，則可能會扭曲該映像。 您可以通過將Strech屬性從預設值 Fill 更改為 None、Uniform 或 UniformToFill 來更改此行為。

樣本：

<Rectangle Grid.Row="1" Grid.Column="1">
            <Rectangle.Fill>
                <ImageBrush ImageSource="Windows7opendaylogo.png"/>
            </Rectangle.Fill>
        </Rectangle>

 

五、視頻畫筆（VideoBrush）

視頻畫筆（VideoBrush）使用視頻繪製某個地區。它依賴MediaElement對象提供視頻流。通過將VideoBrush的SourceName指向MediaElement的名稱即可使用視頻內容。

VideoBrush

<MediaElement x:Name="media" Source="ok.WMV"  AutoPlay="True" Stretch="UniformToFill"/>
        <StackPanel>
            <StackPanel.Background>
                <VideoBrush SourceName="media"/>
            </StackPanel.Background>
        </StackPanel>

 

有關MediaElement的使用，下一節將詳細介紹