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




其中代码：

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

<Rectangle.Stroke>

<LinearGradientBrush EndPoint="0.498,0" StartPoint="0.502,1">

<GradientStop Color="#FF000000"/>

<GradientStop Color="#FFFFFFFF" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Stroke>

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.494,1" StartPoint="0.496,0.023" SpreadMethod="Pad">

<GradientStop Color="#FF1E4E38" Offset="0"/>

<GradientStop Color="#FFDF662C" Offset="0.979"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

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



代码如下：

<UserControl

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

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

x:Class="MyButton.Page"

Width="640" Height="480">

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

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

<Rectangle.Stroke>

<LinearGradientBrush EndPoint="0.498,0" StartPoint="0.502,1">

<GradientStop Color="#FF000000"/>

<GradientStop Color="#FFFFFFFF" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Stroke>

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.494,1" StartPoint="0.496,0.023" SpreadMethod="Pad">

<GradientStop Color="#FF1E4E38" Offset="0"/>

<GradientStop Color="#FFDF662C" Offset="0.979"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

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

</Grid>

</UserControl>

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