相信大家现在已经对blend不陌生了把，这节课我们学习下怎么用blend绘制出一个好看的button，而且将带一些动画@L_450_1@。
我们新建个工程起名叫“@H_727_23@myButton”，从“ToolBox”中放置一个“[Rectangle]” @H_403_57@
，接下来我们看我们的右侧@H_403_57@
先看第一个选项卡“Project”工程文件，里面包含我们@H_727_23
@myButton
工程所有文件。Silverlight application /Wpf 工程，一般都是xaml结尾的。Xaml是一种新型的文件格式有点类似xml，他的好处是可以让图像设计人员和程序编写人员很好的结合在一起，高效的完成工作。
@H_403_57@
第二个选项卡“Property”这里有“Brushes”、“Appearance”、“Layout”、“Common Properties”、“Transform”、“@H_727_23@miscellaneous”我们下面将分别对每个工具条介绍下
“Brushes”：刷子，顾名思义就是用来填充颜色的，最上面有“Fill”、“stroke”和“Opacitymask” ；Fill：内部填充，stroke：边缘填充，Opacitymask：透明度填充；
@H_403_57@
：
Nobrush即不填充，内部为空
@H_403_57@
：单色填充
@H_403_57@
：渐进色填充，也是最有意思的填充
@H_403_57@
【R，G，B，A】：分别对于红、绿、蓝三基色，A：透明度
@H_403_57@
：梯度渐变色设置，左侧为起始颜色，右侧为终止颜色，当我们设置后我们的矩形区域就变成
@H_403_57@@H_981_301@，我们也可以自己多增加几个渐变梯度
@H_403_57@
，再来看看我们的矩形：@H_403_57@
可以让我们的图像更丰富，更有立体感。拖住梯度小箭头向下拉即可删除此梯度。
@H_403_57@
：渐进色设置，前面的直线渐变，后面是圆形渐变@H_403_57@
，
@H_403_57@
：
Options中 reflect 为反射，repeat为重复，我们先点击下reflect，看看我们的图形(一定有朋友问“没什么变化啊？“)，我们用ToolBox中的
工具@H_403_57@
，@H_403_57@
,
我们缩小下梯度@H_403_57@
，看到变化了吧，这就是
reflect，接下来同样的方法用于repeat；
@H_403_57@
：
这里我们主要说明其中的几个，Opacity：透明度设置，100%为不透明。0%为全透明；visible：是否可见；radiusx：x轴方向曲率；radiusy：y轴方向曲率；strokethickness：边线宽度；
有了上面的基本知识我们就可以开始制作我们的Demo了：
第一步：在主工作区放置一个“Rectangle”
@H_403_57@
第二步：设置属性选项卡“Property”，将stroke 和Fill用渐变色填充，radiusx和radiusy都设为14，strokethickness设为5，
@H_403_57@@H_607_560@
@H_403_57@
其中代码：
-
<Rectangle @H_157_584@margin="294,191,201,0" RadiusY="14" RadiusX="14" strokeThickness="5" strokeDashCap="Triangle" strokeEndLineCap="Round" strokeDashOffset="0" strokeStartLineCap="Square" strokeDashArray="0 0" Height="44" VerticalAlignment="Top">
@H_548_674@
@H_332_675@
<Rectangle.stroke>
@H_548_674@
-
<LinearGradientBrush EndPoint="0.498,0" StartPoint="0.502,1">
@H_548_674@
@H_332_675@
<GradientStop Color="#FF000000"/>
@H_548_674@
-
<GradientStop Color="#FFFFFFFF" Offset="1"/>
@H_548_674@
@H_332_675@
</LinearGradientBrush>
@H_548_674@
-
</Rectangle.stroke>
@H_548_674@
@H_332_675@
<Rectangle.Fill>
@H_548_674@
-
<LinearGradientBrush EndPoint="0.494,1" StartPoint="0.496,0.023" SpreadMethod="Pad">
@H_548_674@
@H_332_675@
<GradientStop Color="#FF1E4E38" Offset="0"/>
@H_548_674@
-
<GradientStop Color="#FFDF662C" Offset="0.979"/>
@H_548_674@
@H_332_675@
</LinearGradientBrush>
@H_548_674@
-
</Rectangle.Fill>
@H_548_674@
@H_332_675@
</Rectangle>
@H_548_674@
接下来我们放置一个Textblock，改名为“click me”颜色设置为白色，并将它放置在矩形上
@H_403_57@
代码如下：
-
<UserControl
@H_548_674@
@H_332_675@
xmlns="http://scheR_510_11845@as.microsoft.com/winfx/2006/xaml/presentation"
@H_548_674@
-
xmlns:x="http://scheR_510_11845@as.microsoft.com/winfx/2006/xaml"
@H_548_674@
@H_332_675@
x:Class="MyButton.Page"
@H_548_674@
-
Width="640" Height="480">
@H_548_674@
@H_332_675@@H_548_674@
-
<Grid x:Name="LayoutRoot" BACkground="White">
@H_548_674@
@H_332_675@
<Rectangle @H_157_584@margin="294,0" RadiusY="14" RadiusX="14" strokeThickness="5" strokeDashCap="Triangle" strokeEndLineCap="Round" strokeDashOffset="0" strokeStartLineCap="Square" strokeDashArray="0 0" Height="44" VerticalAlignment="Top">
@H_548_674@
-
<Rectangle.stroke>
@H_548_674@
@H_332_675@
<LinearGradientBrush EndPoint="0.498,1">
@H_548_674@
-
<GradientStop Color="#FF000000"/>
@H_548_674@
@H_332_675@
<GradientStop Color="#FFFFFFFF" Offset="1"/>
@H_548_674@
-
</LinearGradientBrush>
@H_548_674@
@H_332_675@
</Rectangle.stroke>
@H_548_674@
-
<Rectangle.Fill>
@H_548_674@
@H_332_675@
<LinearGradientBrush EndPoint="0.494,0.023" SpreadMethod="Pad">
@H_548_674@
-
<GradientStop Color="#FF1E4E38" Offset="0"/>
@H_548_674@
@H_332_675@
<GradientStop Color="#FFDF662C" Offset="0.979"/>
@H_548_674@
-
</LinearGradientBrush>
@H_548_674@
@H_332_675@
</Rectangle.Fill>
@H_548_674@
-
</Rectangle>
@H_548_674@
@H_332_675@
<TextBlock @H_157_584@margin="0,207,234,0" textwrapping="Wrap" Foreground="#FFEFE3E3" Height="14" VerticalAlignment="Top" Width="64" HorizontalAlignment="Right"><Run Text="Click Me"/><LineBreak/><Run Text=""/></TextBlock>
@H_548_674@
-
</Grid>
@H_548_674@
@H_332_675@
</UserControl>
@H_548_674@
这样一个好看的按钮我们就完成了，由于本讲内容太多，添加动画@L_450_1@和事件处理我们将在下次和大家分享。
