(3上)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

相信大家现在已经对blend不陌生了把，这节课我们学习下怎么用blend绘制出一个好看的button，而且将带一些动画效果。

   我们新建个工程起名叫“MyButton”，从“ToolBox”中放置一个“[Rectangle]” ，接下来我们看我们的右侧 先看第一个选项卡“Project”工程文件，里面包含我们MyButton工程所有文件。Silverlight application /Wpf 工程，一般都是xaml结尾的。Xaml是一种新型的文件格式有点类似xml，他的好处是可以让图像设计人员和程序编写人员很好的结合在一起，高效的完成工作。

 

第二个选项卡“Property”这里有“Brushes”、“Appearance”、“Layout”、“Common Properties”、“Transform”、“Miscellaneous”我们下面将分别对每个工具条介绍下

 

“Brushes”：刷子，顾名思义就是用来填充颜色的，最上面有“Fill”、“Stroke”和“OpacityMask” ；Fill：内部填充，Stroke：边缘填充，OpacityMask：透明度填充；

：Nobrush即不填充，内部为空

：单色填充

：渐进色填充，也是最有意思的填充

 

【R，G，B，A】：分别对于红、绿、蓝三基色，A：透明度

：梯度渐变色设置，左侧为起始颜色，右侧为终止颜色，当我们设置后我们的矩形区域就变成 ，我们也可以自己多增加几个渐变梯度，再来看看我们的矩形：

可以让我们的图像更丰富，更有立体感。拖住梯度小箭头向下拉即可删除此梯度。

：渐进色设置，前面的直线渐变，后面是圆形渐变，

：Options中 reflect 为反射，repeat为重复，我们先点击下reflect，看看我们的图形(一定有朋友问“没什么变化啊？“)，我们用ToolBox中的 工具，,我们缩小下梯度，看到变化了吧，这就是reflect，接下来同样的方法用于repeat；

：

这里我们主要说明其中的几个，Opacity：透明度设置，100%为不透明。0%为全透明；visible：是否可见；radiusx：x轴方向曲率；radiusy：y轴方向曲率；Strokethickness：边线宽度；

   有了上面的基本知识我们就可以开始制作我们的Demo了：

第一步：在主工作区放置一个“Rectangle”

第二步：设置属性选项卡“Property”，将Stroke 和Fill用渐变色填充，radiusx和radiusy都设为14，Strokethickness设为5，

其中代码：

1. <Rectangle 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">
2.             <Rectangle.Stroke>
3.                 <LinearGradientBrush EndPoint="0.498,0" StartPoint="0.502,1">
4.                     <GradientStop Color="#FF000000"/>
5.                     <GradientStop Color="#FFFFFFFF" Offset="1"/>
6.                 </LinearGradientBrush>
7.             </Rectangle.Stroke>
8.             <Rectangle.Fill>
9.                 <LinearGradientBrush EndPoint="0.494,1" StartPoint="0.496,0.023" SpreadMethod="Pad">
10.                     <GradientStop Color="#FF1E4E38" Offset="0"/>
11.                     <GradientStop Color="#FFDF662C" Offset="0.979"/>
12.                 </LinearGradientBrush>
13.             </Rectangle.Fill>
14.         </Rectangle>

 

接下来我们放置一个Textblock，改名为“click me”颜色设置为白色，并将它放置在矩形上

 

代码如下：

1. <UserControl
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.     x:Class="MyButton.Page"
5.     Width="640" Height="480">
7.     <Grid x:Name="LayoutRoot" Background="White">
8.         <Rectangle 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">
9.             <Rectangle.Stroke>
10.                 <LinearGradientBrush EndPoint="0.498,0" StartPoint="0.502,1">
11.                     <GradientStop Color="#FF000000"/>
12.                     <GradientStop Color="#FFFFFFFF" Offset="1"/>
13.                 </LinearGradientBrush>
14.             </Rectangle.Stroke>
15.             <Rectangle.Fill>
16.                 <LinearGradientBrush EndPoint="0.494,1" StartPoint="0.496,0.023" SpreadMethod="Pad">
17.                     <GradientStop Color="#FF1E4E38" Offset="0"/>
18.                     <GradientStop Color="#FFDF662C" Offset="0.979"/>
19.                 </LinearGradientBrush>
20.             </Rectangle.Fill>
21.         </Rectangle>
22.         <TextBlock 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>
23.     </Grid>
24. </UserControl>

 

这样一个好看的按钮我们就完成了，由于本讲内容太多，添加动画效果和事件处理我们将在下次和大家分享。