Silverlight for Windows Phone 7：Brushs、Chooser

笔刷的使用

笔刷在 Silverlight 的开发中也是常常会利用到的，例如为元素填上单一颜色，或是渐层的色彩，甚至利用图片作为来源来帮元素上色等等，下面笔者介绍几种常见的笔刷以及使用的方式
SolidColorBrush

SolidColorBrush 是一个单色笔刷，使用的方式也很容易，例如说要帮一个圆形 (ellipse) 填满绿色的效果，只要利用下面的程序代码就可以达成

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

LinearGradientBrush

LinearGradientBrush 是一个渐层笔刷；在使用渐层笔刷时，首先要注意的属性是 StartPoint 以及 EndPoint，这两个坐标是设定渐层色的上色方向，以下图来看，就是红色箭头的方向，而这个时候属性设定会像下面所示
LinearGradientBrush l = new LinearGradientBrush();

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

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

在座目标定义上，几何图形的左上角是坐标 0,0(x=0,y=0)，右下角则是 1,1(x=1,y=1)，那如果将渐层方向改为 (0,0)、(1,1) 之后的效果就会变成下面这样

有了渐层上色的方向之后，再来就是要决定要填上什么颜色了；以渐层来说，最少需要两个颜色，那颜色深浅是怎么去配置呢？这个时候就要去设定 GradientStops 属性了；GradientStops 是 GradientStop 的集合，所以会利用像是这样的方式去增加
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);

要留意的是 Color 以及 Offset 的属性， 那么 Offset 是做甚么用的呢？还记得刚刚提到的渐层上色方向吗，Offset是在『渐层上色方向』的偏移量，例如下图

所以例如要填上黄色到橘色的渐层，大致上会像这样
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);

在渐层笔刷都设定完毕之后，以 ellipse 为例子，只要将 Fill 属性设定为渐层笔刷就可以了
ellipse1.Fill = l;
RadialGradientBrush

RadialGradientBrush

类似于渐层笔刷，主要差别是它是以放射状的方式来处理渐层，例如说下面这个样子

而在设定的时候，需要注意的属性是
Center：在放射状的渐层填色的时候，是以圆形的方式来上色的，而 Center 的属性则是这个放射状圆型的中心点位置
GradientOrigin：这个属性是设定『从什么位置开始做 RadialGradientBrush 的效果』，以上图来说，是设定为 (0.5,0.5)
RadiusX：设定放射性渐层圆型区域X轴方向的半径
RadiusY：设定放射放射性渐层圆型区域 Y 轴方向的半径

例如用下面 XAML 绘制的圆形


<Ellipse x:Name="ellipse1" Width="300" Height="300" Stroke="White" StrokeThickness="2">

<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>

会是这个样子

Center、RadiusX、RadiusY 这三个属性组合起来设定了要上色的圆形区域，而 GradientOrigin 则设定的上色的开始位置
ImageBrush

ImageBruch

则是可以利用图片来做为颜料来填到目标元素上面，同样的，以 ellipse 来说，可以做成像这样子的效果

您可以发现，就连 TextBlock 这样的元素，在前景的颜色上，同样的可以以图片作为来源来做填色的效果得；而以上图来说，程序代码的部分大致会像这个样子
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;

使用 Chooser

Chooser 的功能是去『选择』某一些东西；例如说一张图片、一个联络人信息等等；而要使用 Chooser 要先引入 Microsoft.Phone.Task 的命名空间；下面列出各种 Chooser 的种类

上面这三个画面中，最左侧的画面是呼叫出 CameraCaptureTask 之后的拍照画面，右上角的图案就是拍照的按钮了，在您实际使用的时候会有白色的方框以及一个小黑色方框 (例如最右侧的画面是取得拍照后的图片效果) 作为仿真的拍照画面，按下拍照按钮之后，便会出现中间的画面，要您确认拍照的结果或是重新拍一张新的照片，确认之后便会回到应用程序中，并且显示出拍摄到的画面，下面简单的来看一下程序代码的部分

首先记得要引入相关的命名空间
using Microsoft.Phone.Tasks;

using System.Windows.Media.Imaging;

之后做 Chooser 的宣告以及初始化的动作，例如
CameraCaptureTask cct ;



public CamerChooser()

{

InitializeComponent();

//掛載完成事件，建議要在初始化完成之後便掛載事件，與 application lift cycle 有關

cct = new CameraCaptureTask();

cct.Completed += new EventHandler<PhotoResult>(cct_Completed);

}

而怎么去呼叫 Chooser 出来呢？这部分相当的简单，只要呼叫 Show 的方法就可以了，例如下面笔者是在 Button 的 Click 事件中去做呼叫
private void btnShot_Click(object sender, RoutedEventArgs e)

{

//呼叫 Chooser

cct.Show();

}

而在 Chooser 的使用上，最主要的部份就是处理 Completed 的事件，例如下面
void cct_completed(object sender, PhotoResult e)

{

//判斷結果是否成功

if (e.TaskResult == TaskResult.OK)

{

BitmapImage bmpSource = new BitmapImage();

bmpSource.SetSource(e.ChosenPhoto);

image1.Source = bmpSource;

}

else

{

image1.Source = null;

}

}

在处理 Completed 的事件当中，必须要先判断 TaskResult 属性，在这个属性当中，可以取得拍照动作的结果，例如当使用者按下确定 (Accept) 的按钮时，会响应 OK，而如果使用者按下返回键呢？这时候回传的就会是 Cancel 的状态了；藉由这个状态，可以去判断接下来应用程序当中要处理的动作。

而怎么取得拍摄的照片呢？主要便是利用 ChoosenPhoto 的属性；ChoosenPhoto 是一个 Stream，是指向实体照片位置的数据流，还记得 Isolated Storage 吗？拍照后图片是不会直接的储存到应用程序所属的隔离储存区中的，因为 Chooser 所叫出的是另外的应用程序，不同应用程序之间是不能去交叉存取隔离储存区中的档案的；因此 Chooser 会藉由这种方式来让我们的应用程序取得结果。

。。。。。。

http://msdn.microsoft.com/zh-cn/windowsphone/gg454714.aspx