[置顶] Silverlight之画刷（7）

5种画刷

LinearGradientBrush -线性渐变画刷
RadialGradientBrush - 放射性渐变画刷

SolidColorBrush -单色画刷
ImageBrush - 图像画刷
VideoBrush - 视频画刷

 

1.        线性渐变画刷(LinearGradientBrush/GradientStop)

1)        StartPoint :线性渐变起始点，如(0,0.5)，对象最左侧边框中间位置,第一个数字代表X轴的位置，第二个数字代表Y轴的位置

2)        EndPoint :线性渐变结束点，参见StartPoint

3)        Color:填充的颜色，可以为命名颜色(如:Red)、6个或 8个字符的十六进制标示 (如：

3)FFFFFF)

4)        OffSet：获取渐变停止点在渐变向量中的位置。通俗的说，就是该颜色在对象中完全显示的位置，在完全显示的位置两侧，都为渐变的。如(0.75)，在对象的 3/4 处达到该颜色的饱和值。

<!--线性渐变画刷(LinearGradientBrush/GradientStop)-->

<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">

                    <GradientStop Color="Black" Offset="0"></GradientStop>

                    <GradientStop Color="Red" Offset="0.25"></GradientStop>

                    <GradientStop Color="Blue" Offset="0.75"></GradientStop>

                    <GradientStop Color="Yellow" Offset="1"></GradientStop>

                </LinearGradientBrush>

 

2.        径向渐变画刷(RadialGradientBrush/GradientStop)

              <!--径向渐变画刷(RadialGradientBrush/GradientStop)-->

                <RadialGradientBrush Center="0.5,0.5">

                    <GradientStop Color="Blue" Offset="0"></GradientStop>

                    <GradientStop Color="red" Offset="1"></GradientStop>

                </RadialGradientBrush>

1)    GradientStop: 获取或定义渐变开始的二维焦点的位置。及用一点来确定放射源在放射区域(圆)中的位置,如(0.5,0.5)

2)    Center: 渐变区域(渐变圆)的位置(圆心),为二维焦点,如（0.5,0.5）

3)    Color: 填充的颜色(渐变色)，可以为命名颜色(如:Red)、6 个或 8个字符的十六进制标示 (如：FFFFFF)

4)    OffSet：获取渐变停止点在渐变向量中的位置。通俗的说，就是该颜色在对象中 完全显示的位置，在完全显示的位置两侧，都为渐变的。如(0.75)，在对象的 3/4 处 达到该颜色的饱和值。

5)    RadiusX :渐变圆的X轴放射半径。从圆心到所要填充对象最近的Border，即为直径的1/2，所以,0.5 就是最大值

6)    RadiusY ：渐变圆Y轴放射半径

 

3.        单色花刷SolidColorBrush

<!--单色画刷-->

<SolidColorBrush Color="Blue" Opacity="0.25"></SolidColorBrush>

4.        图像画刷ImageBrush

<!--图像画刷ImageBrush-->

                <ImageBrush AlignmentX="Left" AlignmentY="Bottom" ImageSource="/SLLayout;component/Images/Chrysanthemum.jpg"></ImageBrush>

5.        VideoBrush视频画刷

<!--VideoBrush视频画刷-->

                <VideoBrush SourceName="mediaElement"></VideoBrush>

 

  <MediaElement x:Name="mediaElement" Margin="679,163,-252,223" Source="/SLLayout;component/九阴真经.wmv" />

 完整代码

<navigation:Page x:Class="SLLayout.画刷" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="画刷 Page">
    <Grid x:Name="LayoutRoot">
        <Button Content="画刷测试" Height="23" HorizontalAlignment="Left" Margin="59,30,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
        <Image Height="150"  HorizontalAlignment="Left" Margin="59,68,0,0" Name="image1" Stretch="Fill"VerticalAlignment="Top" Width="200" />
        <MediaElement x:Name="mediaElement" Margin="679,163,-252,223" Source="/SLLayout;component/九阴真经.wmv"  />
        <Ellipse Height="100" HorizontalAlignment="Left"  Margin="356,82,0,0" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200">
                      <Ellipse.Fill>
                <!--线性渐变画刷(LinearGradientBrush/GradientStop)-->
                <!--<LinearGradientBrushStartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStopColor="Black" Offset="0"></GradientStop>
                    <GradientStopColor="Red" Offset="0.25"></GradientStop>
                    <GradientStopColor="Blue" Offset="0.75"></GradientStop>
                    <GradientStopColor="Yellow" Offset="1"></GradientStop>
               </LinearGradientBrush>-->
                <!--径向渐变画刷(RadialGradientBrush/GradientStop)-->
                <!--<RadialGradientBrushCenter="0.5,0.5" RadiusX="1" RadiusY="0.5">
                    <GradientStopColor="Blue" Offset="0"></GradientStop>
                    <GradientStopColor="red" Offset="1"></GradientStop>
               </RadialGradientBrush>-->
                <!--单色画刷-->
                <!--<SolidColorBrushColor="Blue"Opacity="0.25"></SolidColorBrush>-->
                <!--图像画刷ImageBrush-->
                <!--<ImageBrush AlignmentX="Left"AlignmentY="Bottom"ImageSource="/SLLayout;component/Images/Chrysanthemum.jpg"></ImageBrush>-->
                <!--VideoBrush视频画刷-->
                <VideoBrush SourceName="mediaElement"></VideoBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</navigation:Page>