|
|
概述
Silverlight 2 Beta 1版本發(fā)布了，無(wú)論從Runtime還是Tools都給我們帶來(lái)了很多的驚喜，如支持框架語(yǔ)言Visual Basic, Visual C#, IronRuby, IronPython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章將從Silverlight 2基礎(chǔ)知識(shí)、數(shù)據(jù)與通信、自定義控件、動(dòng)畫、圖形圖像等幾個(gè)方面帶您快速進(jìn)入Silverlight 2開(kāi)發(fā)。
本文將簡(jiǎn)單介紹Silverlight中的畫刷，在Silverlight中，共提供了五種：SolidColorBrush、LinearGradientBrush、RadialGradientBrush、ImageBrush、VideoBrush，接下來(lái)將逐一進(jìn)行介紹。
SolidColorBrush
SolidColorBrush用單一的顏色進(jìn)行填充， 在使用SolidColorBrush時(shí)只要指定Color屬性就可以了，除此之外，還可以選擇指定Opacity等屬性。在我們使用其他圖形時(shí)，如果指定了Fill屬性，則默認(rèn)會(huì)用SolidColorBrush進(jìn)行填充。下面的示例，使用SolidColorBrush填充兩個(gè)矩形：
<Canvas Background="#CDFCAE"> <Rectangle Canvas.Top="60" Canvas.Left="20" Width="200" Height="100" Stroke="Green" StrokeThickness="2"> <Rectangle.Fill> <SolidColorBrush Color="Orange"> </SolidColorBrush> </Rectangle.Fill> </Rectangle> <Rectangle Canvas.Top="60" Canvas.Left="280" Width="200" Height="100" Stroke="Green" StrokeThickness="2"> <Rectangle.Fill> <SolidColorBrush Color="Orange" Opacity="0.5"> </SolidColorBrush> </Rectangle.Fill> </Rectangle></Canvas>
運(yùn)行后如下所示：
LinearGradientBrush
LinearGradientBrush將會(huì)使用線性漸變來(lái)進(jìn)行填充，需要設(shè)置漸變的坐標(biāo)：起始點(diǎn)屬性StartPoint和結(jié)束點(diǎn)EndPoint，兩點(diǎn)的坐標(biāo)最大值為1，最小值為0，用GradientStop來(lái)設(shè)置不同的顏色漸變以及它的偏移量。如下面的例子：
<Canvas Background="#FFFFFF"> <Rectangle Canvas.Top="40" Canvas.Left="100" Width="300" Height="160" Stroke="Green" StrokeThickness="4"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="#FBFE03" Offset="0.0" /> <GradientStop Color="#41F702" Offset="0.25" /> <GradientStop Color="#FF0000" Offset="0.75" /> <GradientStop Color="#0066FF" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle></Canvas>
運(yùn)行后如下圖所示：
下面我們對(duì)漸變的坐標(biāo)以及各個(gè)顏色漸變的偏移量做一下解釋，如下圖所示：
設(shè)置不同的漸變起始點(diǎn)和偏移量我們可以得到多種不同的漸變效果，如下面的示例：
<Canvas Background="#FFFFFF"> <Rectangle Canvas.Top="80" Canvas.Left="20" Width="120" Height="80" Stroke="Green" StrokeThickness="4"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="#FBFE03" Offset="0.0" /> <GradientStop Color="#41F702" Offset="0.25" /> <GradientStop Color="#FF0000" Offset="0.75" /> <GradientStop Color="#0066FF" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Canvas.Top="80" Canvas.Left="160" Width="120" Height="80" Stroke="Green" StrokeThickness="4"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#FBFE03" Offset="0.0" /> <GradientStop Color="#41F702" Offset="0.25" /> <GradientStop Color="#FF0000" Offset="0.75" /> <GradientStop Color="#0066FF" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Canvas.Top="80" Canvas.Left="300" Width="120" Height="80" Stroke="Green" StrokeThickness="4"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FBFE03" Offset="0.0" /> <GradientStop Color="#41F702" Offset="0.25" /> <GradientStop Color="#FF0000" Offset="0.75" /> <GradientStop Color="#0066FF" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle></Canvas>
運(yùn)行后如下圖所示：
RadialGradientBrush
RadialGradientBrush使用放射性漸變來(lái)進(jìn)行顏色填充，用GradientOrigin來(lái)指定放射源的位置坐標(biāo)，Center指定圖形的中心位置坐標(biāo)，RadiusX和RadiusY分別指定在X軸和Y軸上的放射半徑，同樣使用GradientStop指定不同顏色的漸變及偏移量，如下面的例子：
<Canvas Background="#CDFCAE"> <Ellipse Canvas.Top="30" Canvas.Left="100" Width="300" Height="180"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="#FBFE03" Offset="0.0" /> <GradientStop Color="#41F702" Offset="0.25" /> <GradientStop Color="#FF0000" Offset="0.75" /> <GradientStop Color="#0066FF" Offset="1.0" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse></Canvas>
運(yùn)行后如下所示：
在這個(gè)示例中，對(duì)于上面提到的放射源位置的坐標(biāo)和圖形中心坐標(biāo)、在X軸和Y軸上的放射半徑它們四個(gè)之間的關(guān)系，大家看下面四個(gè)圓形，我們?yōu)樗膫€(gè)屬性設(shè)置不同的值：
<Canvas Background="#CDFCAE"> <Ellipse Canvas.Top="20" Canvas.Left="80" Width="120" Height="120"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="#FFFFFF" Offset="0.0" /> <GradientStop Color="#000000" Offset="1.0" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Canvas.Top="20" Canvas.Left="280" Width="120" Height="120"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="#FFFFFF" Offset="0.0" /> <GradientStop Color="#000000" Offset="1.0" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Canvas.Top="160" Canvas.Left="80" Width="120" Height="120"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.25" RadiusY="0.5"> <GradientStop Color="#FFFFFF" Offset="0.0" /> <GradientStop Color="#000000" Offset="1.0" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Canvas.Top="160" Canvas.Left="280" Width="120" Height="120"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.25"> <GradientStop Color="#FFFFFF" Offset="0.0" /> <GradientStop Color="#000000" Offset="1.0" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse></Canvas>
運(yùn)行后的效果如下所示，在圖上標(biāo)注了他們各自的放射源位置坐標(biāo)、中心位置坐標(biāo)、X軸上和Y軸上的放射半徑。
ImageBrush
ImageBrush使用圖片來(lái)對(duì)圖形進(jìn)行填充，使用方式比較簡(jiǎn)單，我們只需要指定ImageSource屬性就可以了，如下面的例子使用圖片來(lái)填充一個(gè)矩形：
<Canvas Background="#CDFCAE"> <Rectangle Canvas.Top="40" Canvas.Left="100" Width="300" Height="160" Stroke="Green" StrokeThickness="4" RadiusX="10" RadiusY="10"> <Rectangle.Fill> <ImageBrush ImageSource="bg1.png"></ImageBrush> </Rectangle.Fill> </Rectangle></Canvas>
對(duì)于圖片我們后面會(huì)有專門一篇文章進(jìn)行講解，這里就不再說(shuō)明。
結(jié)束語(yǔ)
本文簡(jiǎn)單介紹了Silverlight中的Brushes，這些Brushes對(duì)于自定義控件的外觀或者做出更酷更炫的界面效果，將會(huì)有很大的幫助。
NET技術(shù)：一步一步學(xué)Silverlight ：使用Brush進(jìn)行填充，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
