天天看點

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 對象。

  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>

3、RadialGradientBrush - 使用徑向漸變繪制區域。

RadialGradientBrush 對象與 LinearGradientBrush 對象類似。但是,線性漸變有一個起點和一個終點用于定義漸變矢量,而徑向漸變有一個橢圓以及一個焦點 (GradientOrigin) 用于定義漸變行為。該橢圓定義漸變的終點。換言之,1.0 處的漸變停止點定義橢圓圓周處的顔色。焦點定義漸變的中心。0 處的漸變停止點定義焦點處的顔色。

4、ImageBrush - 使用圖像繪制區域。

可以使用 ImageBrush 對象為應用程式中的文本建立裝飾性效果。例如,TextBlock 對象的 Foreground 屬性可以指定 ImageBrush。 如果 ImageSource 屬性設定為無效格式,或其指定了無法解析的 URI,将引發 ImageFailed 事件。

下面的 XAML 示例示範如何将 Foreground 屬性設定為 ImageBrush 對象,其圖像用作 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。

MainPage.xaml

<phone:PhoneApplicationPage   

    x:Class="BrushDemo.MainPage" 

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

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

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

    FontFamily="{StaticResource PhoneFontFamilyNormal}" 

    FontSize="{StaticResource PhoneFontSizeNormal}" 

    Foreground="{StaticResource PhoneForegroundBrush}" 

    SupportedOrientations="Portrait" Orientation="Portrait" 

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 

    shell:SystemTray.IsVisible="True"> 

    <!--LayoutRoot contains the root grid where all other page content is placed--> 

    <Grid x:Name="LayoutRoot" Background="Transparent"> 

        <Grid.RowDefinitions> 

            <RowDefinition Height="Auto"/> 

            <RowDefinition Height="*"/> 

        </Grid.RowDefinitions> 

        <!--TitlePanel contains the name of the application and page title--> 

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12"> 

            <TextBlock x:Name="ApplicationTitle" Text="DEMO" Style="{StaticResource PhoneTextNormalStyle}"/> 

            <TextBlock x:Name="PageTitle" Text="brushs" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 

        </StackPanel> 

        <!--ContentPanel - place additional content here--> 

        <Grid x:Name="ContentGrid" Grid.Row="1"> 

            <Grid.RowDefinitions> 

                <RowDefinition Height="270*" /> 

                <RowDefinition Height="347*" /> 

            </Grid.RowDefinitions> 

            <Ellipse Height="160" HorizontalAlignment="Left" Margin="24,18,0,0" Name="ellipse1" StrokeThickness="1" VerticalAlignment="Top" Width="166" Stroke="White"></Ellipse> 

            <Button Content="SoildColorBrush" Grid.Row="1" Height="78" HorizontalAlignment="Left" Margin="12,0,0,0" Name="btnSoildColor" VerticalAlignment="Top" Width="462" Click="btnSoildColor_Click" /> 

            <Button Content="LinearGradientBrush" Height="78" HorizontalAlignment="Left" Margin="12,72,0,0" Name="btnLinearGradient" VerticalAlignment="Top" Width="462" Grid.Row="1" Click="btnLinearGradient_Click" /> 

            <Button Content="ImageBrush" Height="78" HorizontalAlignment="Left" Margin="12,214,0,0" Name="btnImage" VerticalAlignment="Top" Width="462" Grid.Row="1" Click="btnImage_Click" /> 

            <TextBlock Height="96" Margin="24,168,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" FontSize="80" HorizontalAlignment="Left" Width="444" /> 

            <Button Content="RadialGradientBrush" Height="78" HorizontalAlignment="Left" Margin="12,143,0,0" Name="btnRadialGradient" VerticalAlignment="Top" Width="462" Grid.Row="1" Click="btnRadialGradient_Click" /> 

        </Grid> 

    </Grid> 

</phone:PhoneApplicationPage> 

MainPage.xaml.cs

using System;  

using System.Collections.Generic;  

using System.Linq;  

using System.Net;  

using System.Windows;  

using System.Windows.Controls;  

using System.Windows.Documents;  

using System.Windows.Input;  

using System.Windows.Media;  

using System.Windows.Media.Animation;  

using System.Windows.Shapes;  

using Microsoft.Phone.Controls;  

namespace BrushDemo  

{  

    public partial class MainPage : PhoneApplicationPage  

    {  

        // Constructor  

        public MainPage()  

        {  

            InitializeComponent();  

        }  

        private void btnSoildColor_Click(object sender, RoutedEventArgs e)  

            ellipse1.Fill = new SolidColorBrush(Colors.Green);  

            textBlock1.Foreground = new SolidColorBrush(Colors.Green);  

        private void btnLinearGradient_Click(object sender, RoutedEventArgs e)  

            LinearGradientBrush l = new LinearGradientBrush();  

            l.StartPoint = new Point(0.5, 0);  

            l.EndPoint = new Point(0.5, 1);  

            GradientStop s1 = new GradientStop();  

            s1.Color = Colors.Yellow;  

            s1.Offset = 0.25;  

            l.GradientStops.Add(s1);  

            GradientStop s2 = new GradientStop();  

            s2.Color = Colors.Orange;  

            s2.Offset = 1.0;  

            l.GradientStops.Add(s2);  

            ellipse1.Fill = l;  

            textBlock1.Foreground = l;  

        private void btnImage_Click(object sender, RoutedEventArgs e)  

            ImageBrush i = new ImageBrush();  

            i.Stretch = Stretch.UniformToFill;  

            i.ImageSource = new System.Windows.Media.Imaging.BitmapImage(  

                new Uri("/Images/IMAG0076.jpg", UriKind.Relative));  

            ellipse1.Fill = i;  

            textBlock1.Foreground = i;  

        private void btnRadialGradient_Click(object sender, RoutedEventArgs e)  

            RadialGradientBrush rb = new RadialGradientBrush();  

            rb.Center = new Point(0.5, 0.5);  

            rb.RadiusX = 0.5;  

            rb.RadiusY = 0.5;  

            rb.GradientStops.Add(s1);  

            rb.GradientStops.Add(s2);  

            ellipse1.Fill = rb;  

            textBlock1.Foreground = rb;  

    }  

BrushByXaml.xaml

    x:Class="BrushDemo.BrushByXaml" 

    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480" 

    <!--LayoutRoot is the root grid where all page content is placed--> 

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 

            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 

            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 

            <Ellipse x:Name="ellipse1" Stroke="White" StrokeThickness="2" Margin="106,28,122,350"> 

                <Ellipse.Fill> 

                    <RadialGradientBrush GradientOrigin="0,0.5" Center="0.5,0.5" 

                                         RadiusX="1" RadiusY="1"> 

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

                        <GradientStop Color="Green" Offset="0.5" /> 

                    </RadialGradientBrush> 

                </Ellipse.Fill> 

            </Ellipse> 

            <Ellipse Margin="106,279,122,99" Name="ellipse2" Stroke="White" StrokeThickness="2"> 

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

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

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

                    </LinearGradientBrush> 

BrushByXaml.xaml.cs

    public partial class BrushByXaml : PhoneApplicationPage  

        public BrushByXaml()  

本文轉自linzheng 51CTO部落格,原文連結:

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

繼續閱讀