Windows Phone 7 Brush笔刷的使用


对于采用 Brush 对象的 XAML 语法,需要指定以下项之一:

  • 一个 Color 对象,指定为一个直接以 XAML 属性 (Attribute) 形式填充 Brush 类型属性 (Property) 的字符串。该字符串暗指用于填充值的 SolidColorBrush,您指定的 Color 将变为 Color (SolidColorBrush) 属性值。

  • 作为对象元素的非抽象派生类型的 Brush,具有以属性元素形式指定的 Brush 类型属性。

Brush 使用其输出绘制一个区域。下面的列表描述了不同类型的画笔:

1、SolidColorBrush - 使用纯色绘制区域。

SolidColorBrush 对象可能是最基本的画笔,用于将外观应用到对象。可以通过类型转换语法在 XAML 中将 SolidColorBrush 指定为属性值,该语法使用关于字符串含义的几个约定。其他画笔(如 LinearGradientBrush)需要属性元素语法。可以将 Brush 属性的属性元素语法与对象元素语法 <SolidColorBrush.../> 结合在一起使用;如果要为对象元素提供 Name 值并在今后以其属性作为目标,这可能会很有用。

可以使用 ColorAnimation 或 ColorAnimationUsingKeyFrames 对象,对 SolidColorBrush 进行动画处理。若要对 SolidColorBrush 进行动画处理,通常会使用 Fill 等属性(采用 Brush)的间接定向,而不是对 SolidColorBrush 的 Color 属性进行动画处理。

通过名称选择一个预定义的 SolidColorBrush。例如,可以将 Rectangle 对象的 Fill 值设置为 Red 或 MediumBlue。下面的示例使用预定义 SolidColorBrush 的名称来设置 Rectangle 的 Fill

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!-- This rectangle's fill is painted with a red SolidColorBrush,
described by using a named color. -->
<Rectangle Width="100" Height="100" Fill="Red" />
</Canvas>

2、LinearGradientBrush - 使用线性渐变绘制区域。

LinearGradientBrush 对象使用线性渐变绘制区域。线性渐变沿直线定义渐变。该直线的终点由线性渐变的 StartPoint 和 EndPoint 属性定义。 LinearGradientBrush 画笔沿此直线绘制其 GradientStops。

默认的线性渐变是沿对角方向进行的。默认情况下,线性渐变的 StartPoint 是被绘制区域的左上角 (0,0),其 EndPoint 是被绘制区域的右下角 (1,1)。所得渐变的颜色是沿着对角方向路径插入的。

下面的示例创建了一个具有四种颜色的线性渐变,然后使用该渐变绘制 Rectangle 对象。

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <!-- This rectangle is painted with a diagonal linear gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>
 

 

3、RadialGradientBrush - 使用径向渐变绘制区域。

RadialGradientBrush 对象与 LinearGradientBrush 对象类似。但是,线性渐变有一个起点和一个终点用于定义渐变矢量,而径向渐变有一个椭圆以及一个焦点 (GradientOrigin) 用于定义渐变行为。该椭圆定义渐变的终点。换言之,1.0 处的渐变停止点定义椭圆圆周处的颜色。焦点定义渐变的中心。0 处的渐变停止点定义焦点处的颜色。

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <!-- This rectangle is painted with a radial gradient. -->
  <Rectangle Width="200" Height="100">
    <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> 
  
</Canvas>

 

 

4、ImageBrush - 使用图像绘制区域。

可以使用 ImageBrush 对象为应用程序中的文本创建装饰性效果。例如,TextBlock 对象的 Foreground 属性可以指定 ImageBrush。 如果 ImageSource 属性设置为无效格式,或其指定了无法解析的 URI,将引发 ImageFailed 事件。

下面的 XAML 示例演示如何将 Foreground 属性设置为 ImageBrush 对象,其图像用作 TextBlock 对象呈现文本的填充。

<!-- TextBlock with an image brush applied to the text. -->
<TextBlock
  Canvas.Top="120"
  FontFamily="Verdana"
  FontSize="72"
  FontStyle="Italic"
  FontWeight="Bold">
  SHRUBBERY
  <TextBlock.Foreground>
    <ImageBrush ImageSource="forest.jpg"/>
  </TextBlock.Foreground>
</TextBlock>

5、VideoBrush - 使用正在运行的视频绘制区域。

VideoBrush 是一种类似于 LinearGradientBrush 或 ImageBrush 对象的 Brush 对象。但是,VideoBrush 是使用 MediaElement 对象提供的视频内容绘制区域,而不是使用纯色、渐变或图像绘制区域。就像其他画笔类型一样,您也可以使用 VideoBrush 来绘制 Rectangle 等形状的填充或 Path 的几何内容、Canvas 的背景或者 TextBlock 或 Run 的前景。

若要使用 VideoBrush,可以创建一个 MediaElement,将 VideoBrush 应用于要绘制的对象,然后将 VideoBrush 对象的 SourceName 属性设置为所创建的 MediaElement 的 Name 值。

下面的示例使用 VideoBrush 对象绘制 TextBlock 的 Foreground。

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
    <MediaElement 
      x:Name="butterflyMediaElement" 
      Source="sampleMedia/Butterfly.wmv" IsMuted="True"
      Opacity="0.0" IsHitTestVisible="False" />
      
    <TextBlock Canvas.Left="5" Canvas.Top="30"  
      FontFamily="Verdana" FontSize="120" 
      FontWeight="Bold" TextWrapping="Wrap"
      Text="Video">
      
        <!-- Paint the text with video. -->
        <TextBlock.Foreground>
          <VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" />
        </TextBlock.Foreground>
    </TextBlock>
    
</Canvas>
 
 
笔刷使用的例子
 

 

 

MainPage.xaml

 

 
 
  1. <phone:PhoneApplicationPage   
  2.     x:Class="BrushDemo.MainPage" 
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  5.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
  6.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
  7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  9.     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
  10.     FontSize="{StaticResource PhoneFontSizeNormal}" 
  11.     Foreground="{StaticResource PhoneForegroundBrush}" 
  12.     SupportedOrientations="Portrait" Orientation="Portrait" 
  13.     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
  14.     shell:SystemTray.IsVisible="True"> 
  15.  
  16.     <!--LayoutRoot contains the root grid where all other page content is placed--> 
  17.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
  18.         <Grid.RowDefinitions> 
  19.             <RowDefinition Height="Auto"/> 
  20.             <RowDefinition Height="*"/> 
  21.         </Grid.RowDefinitions> 
  22.  
  23.         <!--TitlePanel contains the name of the application and page title--> 
  24.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12"> 
  25.             <TextBlock x:Name="ApplicationTitle" Text="DEMO" Style="{StaticResource PhoneTextNormalStyle}"/> 
  26.             <TextBlock x:Name="PageTitle" Text="brushs" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
  27.         </StackPanel> 
  28.  
  29.         <!--ContentPanel - place additional content here--> 
  30.         <Grid x:Name="ContentGrid" Grid.Row="1"> 
  31.             <Grid.RowDefinitions> 
  32.                 <RowDefinition Height="270*" /> 
  33.                 <RowDefinition Height="347*" /> 
  34.             </Grid.RowDefinitions> 
  35.             <Ellipse Height="160" HorizontalAlignment="Left" Margin="24,18,0,0" Name="ellipse1" StrokeThickness="1" VerticalAlignment="Top" Width="166" Stroke="White"></Ellipse> 
  36.             <Button Content="SoildColorBrush" Grid.Row="1" Height="78" HorizontalAlignment="Left" Margin="12,0,0,0" Name="btnSoildColor" VerticalAlignment="Top" Width="462" Click="btnSoildColor_Click" /> 
  37.             <Button Content="LinearGradientBrush" Height="78" HorizontalAlignment="Left" Margin="12,72,0,0" Name="btnLinearGradient" VerticalAlignment="Top" Width="462" Grid.Row="1" Click="btnLinearGradient_Click" /> 
  38.             <Button Content="ImageBrush" Height="78" HorizontalAlignment="Left" Margin="12,214,0,0" Name="btnImage" VerticalAlignment="Top" Width="462" Grid.Row="1" Click="btnImage_Click" /> 
  39.             <TextBlock Height="96" Margin="24,168,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" FontSize="80" HorizontalAlignment="Left" Width="444" /> 
  40.             <Button Content="RadialGradientBrush" Height="78" HorizontalAlignment="Left" Margin="12,143,0,0" Name="btnRadialGradient" VerticalAlignment="Top" Width="462" Grid.Row="1" Click="btnRadialGradient_Click" /> 
  41.         </Grid> 
  42.     </Grid> 
  43. </phone:PhoneApplicationPage> 

MainPage.xaml.cs

 

 
 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Windows;  
  6. using System.Windows.Controls;  
  7. using System.Windows.Documents;  
  8. using System.Windows.Input;  
  9. using System.Windows.Media;  
  10. using System.Windows.Media.Animation;  
  11. using System.Windows.Shapes;  
  12. using Microsoft.Phone.Controls;  
  13.  
  14. namespace BrushDemo  
  15. {  
  16.     public partial class MainPage : PhoneApplicationPage  
  17.     {  
  18.         // Constructor  
  19.         public MainPage()  
  20.         {  
  21.             InitializeComponent();  
  22.         }  
  23.  
  24.         private void btnSoildColor_Click(object sender, RoutedEventArgs e)  
  25.         {  
  26.             ellipse1.Fill = new SolidColorBrush(Colors.Green);  
  27.             textBlock1.Foreground = new SolidColorBrush(Colors.Green);  
  28.         }  
  29.  
  30.         private void btnLinearGradient_Click(object sender, RoutedEventArgs e)  
  31.         {  
  32.             LinearGradientBrush l = new LinearGradientBrush();  
  33.             l.StartPoint = new Point(0.5, 0);  
  34.             l.EndPoint = new Point(0.5, 1);  
  35.             GradientStop s1 = new GradientStop();  
  36.             s1.Color = Colors.Yellow;  
  37.             s1.Offset = 0.25;  
  38.             l.GradientStops.Add(s1);  
  39.             GradientStop s2 = new GradientStop();  
  40.             s2.Color = Colors.Orange;  
  41.             s2.Offset = 1.0;  
  42.             l.GradientStops.Add(s2);  
  43.             ellipse1.Fill = l;  
  44.             textBlock1.Foreground = l;  
  45.         }  
  46.  
  47.         private void btnImage_Click(object sender, RoutedEventArgs e)  
  48.         {  
  49.             ImageBrush i = new ImageBrush();  
  50.             i.Stretch = Stretch.UniformToFill;  
  51.             i.ImageSource = new System.Windows.Media.Imaging.BitmapImage(  
  52.                 new Uri("/Images/IMAG0076.jpg", UriKind.Relative));  
  53.             ellipse1.Fill = i;  
  54.             textBlock1.Foreground = i;  
  55.         }  
  56.  
  57.         private void btnRadialGradient_Click(object sender, RoutedEventArgs e)  
  58.         {  
  59.             RadialGradientBrush rb = new RadialGradientBrush();  
  60.             rb.Center = new Point(0.5, 0.5);  
  61.             GradientStop s1 = new GradientStop();  
  62.             rb.RadiusX = 0.5;  
  63.             rb.RadiusY = 0.5;  
  64.             s1.Color = Colors.Yellow;  
  65.             s1.Offset = 0.25;  
  66.             rb.GradientStops.Add(s1);  
  67.             GradientStop s2 = new GradientStop();  
  68.             s2.Color = Colors.Orange;  
  69.             s2.Offset = 1.0;  
  70.             rb.GradientStops.Add(s2);  
  71.             ellipse1.Fill = rb;  
  72.             textBlock1.Foreground = rb;  
  73.         }  
  74.     }  

BrushByXaml.xaml

 

 
 
  1. <phone:PhoneApplicationPage   
  2.     x:Class="BrushDemo.BrushByXaml" 
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  5.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
  6.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
  7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  9.     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
  10.     FontSize="{StaticResource PhoneFontSizeNormal}" 
  11.     Foreground="{StaticResource PhoneForegroundBrush}" 
  12.     SupportedOrientations="Portrait" Orientation="Portrait" 
  13.     mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480" 
  14.     shell:SystemTray.IsVisible="True"> 
  15.  
  16.     <!--LayoutRoot is the root grid where all page content is placed--> 
  17.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
  18.         <Grid.RowDefinitions> 
  19.             <RowDefinition Height="Auto"/> 
  20.             <RowDefinition Height="*"/> 
  21.         </Grid.RowDefinitions> 
  22.  
  23.         <!--TitlePanel contains the name of the application and page title--> 
  24.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
  25.             <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 
  26.             <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
  27.         </StackPanel> 
  28.  
  29.         <!--ContentPanel - place additional content here--> 
  30.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
  31.             <Ellipse x:Name="ellipse1" Stroke="White" StrokeThickness="2" Margin="106,28,122,350"> 
  32.                 <Ellipse.Fill> 
  33.                     <RadialGradientBrush GradientOrigin="0,0.5" Center="0.5,0.5" 
  34.                                          RadiusX="1" RadiusY="1"> 
  35.                         <GradientStop Color="Yellow" Offset="0" /> 
  36.                         <GradientStop Color="Green" Offset="0.5" /> 
  37.                     </RadialGradientBrush> 
  38.                 </Ellipse.Fill> 
  39.             </Ellipse> 
  40.             <Ellipse Margin="106,279,122,99" Name="ellipse2" Stroke="White" StrokeThickness="2"> 
  41.                 <Ellipse.Fill> 
  42.                     <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> 
  43.                         <GradientStop Color="Yellow" Offset="0.25" /> 
  44.                         <GradientStop Color="Orange" Offset="0.75" /> 
  45.                     </LinearGradientBrush> 
  46.                 </Ellipse.Fill> 
  47.             </Ellipse> 
  48.         </Grid> 
  49.     </Grid> 
  50. </phone:PhoneApplicationPage> 

BrushByXaml.xaml.cs

 

 
 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Windows;  
  6. using System.Windows.Controls;  
  7. using System.Windows.Documents;  
  8. using System.Windows.Input;  
  9. using System.Windows.Media;  
  10. using System.Windows.Media.Animation;  
  11. using System.Windows.Shapes;  
  12. using Microsoft.Phone.Controls;  
  13.  
  14. namespace BrushDemo  
  15. {  
  16.     public partial class BrushByXaml : PhoneApplicationPage  
  17.     {  
  18.         public BrushByXaml()  
  19.         {  
  20.             InitializeComponent();  
  21.         }  
  22.     }  

 


本文转自linzheng 51CTO博客,原文链接:

http://blog.51cto.com/linzheng/1079214

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值