穩紮穩打Silverlight(9) - 2.0畫筆之SolidColorBrush, ImageBrush, VideoBrush, LinearGradientBrush

<a href="http://webabcd.blog.51cto.com/1787395/342790" target="_blank">[索引頁]</a>

<a href="http://down.51cto.com/data/100302">[源碼下載下傳]</a>

穩紮穩打Silverlight(9) - 2.0畫筆之SolidColorBrush, ImageBrush, VideoBrush, LinearGradientBrush, RadialGradientBrush

介紹

Silverlight 2.0 畫筆：

    SolidColorBrush - 單色畫筆

    ImageBrush - 圖像畫筆

    VideoBrush - 視訊畫筆

    LinearGradientBrush - 線性漸變畫筆

    RadialGradientBrush - 放射性漸變畫筆

線上DEMO

<a href="http://webabcd.blog.51cto.com/1787395/342779">http://webabcd.blog.51cto.com/1787395/342779</a>

示例

1、SolidColorBrush.xaml

&lt;UserControl x:Class="Silverlight20.Brush.SolidColorBrush" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt; 

        &lt;StackPanel HorizontalAlignment="Left"&gt; 

                &lt;Ellipse Margin="10" Width="200" Height="100" Stroke="Yellow" StrokeThickness="3"&gt; 

                        &lt;Ellipse.Fill&gt; 

                                &lt;!--SolidColorBrush - 單色畫筆--&gt; 

                                &lt;!-- 

                                Color - 顔色 

                                        格式如下： 

                                                預定義的Color的名稱。如：Red, Green, Blue 

                                                #RGB。如：#F00 

                                                #ARGB（A為Alpha值）。如：#FF00, #F0F0, #F00F 

                                                #RGB。如：#FF0000, #00FF00, #0000FF 

                                                #ARGB（A為Alpha值）。如：#FFFF0000, #FF00FF00, #FF0000FF 

                                Opacity - 不透明度。0 - 1之間 

                                --&gt; 

                                &lt;SolidColorBrush Color="#FF0000" Opacity="0.5"    /&gt; 

                        &lt;/Ellipse.Fill&gt; 

                &lt;/Ellipse&gt; 

                                &lt;SolidColorBrush Color="#88FF0000" /&gt; 

        &lt;/StackPanel&gt; 

&lt;/UserControl&gt;

2、ImageBrush.xaml

&lt;UserControl x:Class="Silverlight20.Brush.ImageBrush" 

                &lt;Rectangle Width="100" Height="100" Stroke="Red" StrokeThickness="1"&gt; 

                        &lt;Rectangle.Fill&gt; 

                                &lt;!--ImageBrush - 圖像畫筆--&gt; 

                                ImageSource - 圖檔位址 

                                Stretch屬性 - 拉伸值 [System.Windows.Media.Stretch 枚舉]。參見：本Demo的Shape/Shape.xaml 

                                AlignmentX - 水準方向的對齊方式。Center（預設值）, Left, Right 

                                AlignmentY - 垂直方向的對齊方式。Center（預設值）, Top, Bottom 

                                &lt;ImageBrush ImageSource="/Silverlight20;component/Images/Logo.jpg" AlignmentX="Right" AlignmentY="Bottom" Stretch="None" /&gt; 

                        &lt;/Rectangle.Fill&gt; 

                &lt;/Rectangle&gt; 

3、VideoBrush.xaml

&lt;UserControl x:Class="Silverlight20.Brush.VideoBrush" 

                &lt;MediaElement x:Name="mediaElement" Source="/Silverlight20;component/Video/Demo.wmv" Width="0" Height="0" /&gt; 

                &lt;Rectangle Width="300" Height="100"&gt; 

                                &lt;!--VideoBrush - 視訊畫筆--&gt; 

                                SourceName - 相關的 MediaElement 的名稱 

                                &lt;VideoBrush SourceName="mediaElement" /&gt; 

4、LinearGradientBrush.xaml

&lt;UserControl x:Class="Silverlight20.Brush.LinearGradientBrush" 

                &lt;Grid Margin="10"&gt; 

                        &lt;Rectangle Width="200" Height="100" HorizontalAlignment="Left"&gt; 

                                &lt;Rectangle.Fill&gt; 

                                        &lt;!--LinearGradientBrush - 線性漸變畫筆--&gt; 

                                        &lt;!-- 

                                        StartPoint - 線性漸變的起點。預設漸變方向為對角線方向，預設值為左上角0,0 

                                        EndPoint - 線性漸變的終點。預設漸變方向為對角線方向，預設值為右下角1,1 

                                        GradientStop - 漸變中，過渡點的設定 

                                                GradientStop.Color - 過渡點的顔色 

                                                GradientStop.Offset - 過渡點的位置。相對于漸變線的比值。最小值0.0（預設值），最大值1.0 

                                        ColorInterpolationMode - 插入漸變顔色的方式 [System.Windows.Media.ColorInterpolationMode枚舉] 

                                                ColorInterpolationMode.ScRgbLinearInterpolation - scRGB    

                                                ColorInterpolationMode.SRgbLinearInterpolation - sRGB。預設值 

                                        --&gt; 

                                        &lt;LinearGradientBrush StartPoint="0,0" EndPoint="1,1" ColorInterpolationMode="SRgbLinearInterpolation"&gt; 

                                                &lt;GradientStop Color="Red" Offset="0.0" /&gt; 

                                                &lt;GradientStop Color="Green" Offset="0.25" /&gt; 

                                                &lt;GradientStop Color="Blue" Offset="0.75" /&gt; 

                                                &lt;GradientStop Color="Yellow" Offset="1.0" /&gt; 

                                        &lt;/LinearGradientBrush&gt; 

                                &lt;/Rectangle.Fill&gt; 

                        &lt;/Rectangle&gt; 

                        &lt;Line X1="0" Y1="0" X2="200" Y2="100" Stroke="Black" HorizontalAlignment="Left" /&gt; 

                &lt;/Grid&gt; 

                                        MappingMode - 指定線性漸變的起點（StartPoint）和終點（EndPoint）相對于輸出區域是相對的還是絕對的 [System.Windows.Media.BrushMappingMode枚舉] 

                                                MappingMode.RelativeToBoundingBox - 相對坐标。預設值 

                                                MappingMode.Absolute - 絕對坐标 

                                        &lt;LinearGradientBrush StartPoint="0,0" EndPoint="200,100" MappingMode="Absolute"&gt; 

                                        SpreadMethod - 線性漸變線（黑色線）之外， 輸出區域之内的漸變方式 [System.Windows.Media.GradientSpreadMethod枚舉] 

                                                GradientSpreadMethod.Pad - 用線性漸變線末端的顔色值填充剩餘空間。預設值                

                                        &lt;LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Pad"&gt; 

                                                &lt;GradientStop Color="Green" Offset="1.0" /&gt; 

                        &lt;Line X1="80" Y1="50" X2="120" Y2="50" Stroke="Black" HorizontalAlignment="Left" /&gt; 

                                                GradientSpreadMethod.Reflect - 相鄰填充區域，以 相反方向 重複漸變，直至填充滿整個剩餘空間 

                                        &lt;LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Reflect"&gt; 

                                                GradientSpreadMethod.Repeat - 相鄰填充區域，以 相同方向 重複漸變，直至填充滿整個剩餘空間 

                                        &lt;LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Repeat"&gt; 

5、RadialGradientBrush.xaml

&lt;UserControl x:Class="Silverlight20.Brush.RadialGradientBrush" 

                        &lt;Rectangle Width="200" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top"&gt; 

                                        &lt;!--LinearGradientBrush - 放射性漸變畫筆--&gt; 

                                        GradientOrigin - 放射性漸變的 放射源的 原點坐标。預設值0.5,0.5 

                                        Center - 放射性漸變的 填充範圍（紅色圓圈部分）的 原點坐标。預設值0.5,0.5 

                                        GradientStop - 漸變中，過渡點的設定。參見：Brush/LinearGradientBrush.xaml 

                                        ColorInterpolationMode - 插入漸變顔色的方式 [System.Windows.Media.ColorInterpolationMode枚舉]。參見：Brush/LinearGradientBrush.xaml 

                                        SpreadMethod - 線性漸變線之外， 輸出區域之内的漸變方式 [System.Windows.Media.GradientSpreadMethod枚舉]。。參見：Brush/LinearGradientBrush.xaml 

                                        &lt;RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"&gt; 

                                        &lt;/RadialGradientBrush&gt; 

                        &lt;Path Stroke="Red" StrokeThickness="1" HorizontalAlignment="Left" VerticalAlignment="Top"&gt; 

                                &lt;Path.Data&gt; 

                                        &lt;EllipseGeometry Center="100,50" RadiusX="100" RadiusY="50" /&gt; 

                                &lt;/Path.Data&gt; 

                        &lt;/Path&gt; 

                                        RadiusX - 填充範圍的 X 軸半徑。預設值0.5 

                                        RadiusY - 填充範圍的 Y 軸半徑。預設值0.5 

                                        &lt;RadialGradientBrush GradientOrigin="0.3,0.3" Center="0.7,0.7" RadiusX="0.6" RadiusY="0.6"&gt; 

                                        &lt;EllipseGeometry Center="140,70" RadiusX="120" RadiusY="60" /&gt; 

                                        MappingMode - 指定線性漸變的起點（StartPoint）、終點（EndPoint）填充範圍的 X 軸半徑（RadiusX）和填充範圍的 Y 軸半徑（RadiusY）相對于輸出區域是相對的還是絕對的 [System.Windows.Media.BrushMappingMode枚舉] 

                                        &lt;RadialGradientBrush MappingMode="Absolute" GradientOrigin="60,30" Center="140,70" RadiusX="120" RadiusY="60"&gt; 

OK

<a href="http://down.51cto.com/data/100302" target="_blank">[源碼下載下傳]</a>

     本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/342839，如需轉載請自行聯系原作者