使用WPF创建炫亮按钮

1. 创建三个按钮(创建多个按钮的目的是作对比及样式演示)

(1)打开Microsoft Expression Blend 2(我这里是August Preview版本，以下简称Blend)

(2)File -> New Project,默认选中的是第一个:WPF Applications(.exe),进行相关设置后按OK,如图:

(3)此时回到刚才创建位置C:/Books/ButtonDemos目录中查看时,文件结构如下图:

注意其中的App.xaml,Window1.xaml系列文件（此处之系列代表以之开头的所有文件,比如App.xaml, App.xaml.cs文件，下同）。

（4）在Blend操作窗右边的Project中将Window1.xaml更名为ButtonDemos.xaml,改名之后相应的cs文件也自动更改为新的文件名，比如ButtonDemos.xaml.cs。

（5）从左边工具箱中点击“Button”按钮，在中间内容区拖出一个按钮，同理，在右边Properties选项卡中将Name改为：btnDemo1, Common Properties项的Content框中输入"Demo 1"，这将是按钮显示的文字内容。

（6）选中此按钮，按右键，点View Xaml，将看到如下代码：

<Button Horiznotallow="Left" Margin="8,8,0,0" x:Name="btnDemo1" VerticalAlignment="Top" Width="81" Height="37" Cnotallow="Demo 1"/>

（7）转到Design模式，选中刚才这个名为“btnDemo1”的按钮，复制，粘贴，拖动到下面位置，设置Name为：btnDemo2, Content: Demo 2;

（8）再重复步骤（7），做Demo 3按钮。2、制作一个漂亮的按钮

（1）在Design模式下，选中刚才这个名为“btnDemo1”的按钮，复制，粘贴，拖动到右边位置，设置Name为：btnDemo1_Copy, Content: Demo 1 Copy;

（2）设置右边这个btnDemo1_Copy按钮：

在Properties选项卡中Brushes折叠选项内点击Backgound项，之后点击下面的Gradient Brush(再按照Photoshop做渐变画笔一样）选择/调整颜色设置，如下图：(如果你用过Photoshop,你会发现是何等的相似，而操作方法亦是如此)

在上图Options处选择Reflect(即保持其前面被勾选），得到如下按钮样式：

（3）让我们来看看这个按钮的代码：

<Button x:Name="btnDemo1_Copy" Height="37" Cnotallow="Demo 1 Copy" Horiznotallow="Left" Margin="107,8,0,0" VerticalAlignment="Top" Width="81">
   <Button.Background>
    <LinearGradientBrush EndPoint="0.123,0.595" StartPoint="0.123,-0.243" SpreadMethod="Reflect">
     <GradientStop Color="#FFFDFDFD" Offset="0"/>
     <GradientStop Color="#FFF5AD10" Offset="1"/>
    </LinearGradientBrush>   </Button.Background>
  </Button>

（关于代码中的含义，以及如何使用C#代码一一实现它，我有时间的话，再一一道来，在此按下不表）

（4）如法炮制，制作另外一个按钮：

3、使用Application.Resources设置按钮属性（类似CSS样式单）：
（1）定义Application.Resources块：打开 app.xaml 文件，我们可以看到里面有下面XML片段：

<Application.Resources>
  <!-- Resources scoped at the Application level should be defined here. -->
 </Application.Resources>

（2）将中间<!-- -->部分换成以下代码（敬请留意：其中黄色底且加粗的部分是上面第2步中（3）中按钮的XAML代码，但在标签的开头处加了一个x:Key的属性，其值是“GrayBlueGradientBrush”）：

<LinearGradientBrush x:Key="GrayBlueGradientBrush" EndPoint="0.123,0.595" StartPoint="0.123,-0.243" SpreadMethod="Reflect">
  <GradientStop Color="#FFFDFDFD" Offset="0"/>
  <GradientStop Color="#FFF5AD10" Offset="1"/>
 </LinearGradientBrush>
   <Style TargetType="{x:Type Button}">
     <Setter Property="Background"  Value="{StaticResource GrayBlueGradientBrush}" />
     <Setter Property="Width" Value="120" />
     <Setter Property="Margin" Value="10" />
   </Style>

值得一提的是，x:Key用来是渐变画刷的唯一名称。
这里有必要解释一下红色文字部分中Style标记的内容：
首先，Style的TargetType属性值中“{}”括起的部分内容是要表明Style所要发挥作用的控件类型名称；其次，Style标签中，有一项<Setter Property="Background"...>，表示将控件的背景（Background）设置为Value属性所对应的值，而Value值用一个大括号{}括起，表示其中的值是一个表达式，需要经过程序“计算”处理此部分内容，而“StaticResource GrayBlueGradientBrush”表示是对“GrayBlueGradientBrush”的静态资源引用。最后，将Width, Margin的属性值分别设置(Setter,可以理解为“赋值器”)为120，10，注意这里的设置值仅当相关控件对应值为空时，它们才发挥作用。
至此，完整的XAML内容为：

<Window
 xmlns="​​​http://schemas.microsoft.com/winfx/2006/xaml/presentation​​​"
 xmlns:x="​​​http://schemas.microsoft.com/winfx/2006/xaml​​​"
 x:Class="ButtonDemos.Window1"
 x:Name="Window"
 Title="Window1"
 Width="640" Height="480" Background="#FF000000"> <Grid x:Name="LayoutRoot">
  <Button HorizontalAlignment="Left" Margin="8,8,0,0" x:Name="btnDemo1" VerticalAlignment="Top" Width="81" Height="37" Content="Demo 1"/>
  <Button x:Name="btnDemo2" Width="81" Height="37" Content="Demo 2" HorizontalAlignment="Left" Margin="8,49,0,0" VerticalAlignment="Top"/>
  <Button x:Name="btnDemo3" Width="81" Height="37" Content="Demo 3" HorizontalAlignment="Left" Margin="8,90,0,0" VerticalAlignment="Top"/>
  <Button x:Name="btnDemo1_Copy" Height="37" Content="Demo 1 Copy" HorizontalAlignment="Left" Margin="107,8,0,0" VerticalAlignment="Top" Width="81">
   <Button.Background>
    <LinearGradientBrush EndPoint="0.123,0.595" StartPoint="0.123,-0.243" SpreadMethod="Reflect">
     <GradientStop Color="#FFFDFDFD" Offset="0"/>
     <GradientStop Color="#FFF5AD10" Offset="1"/>
    </LinearGradientBrush>
   </Button.Background>
  </Button>
  <Button x:Name="btnDemo2_Copy" Height="37" Content="Demo 2 Copy" HorizontalAlignment="Left" Margin="107,49,0,0" VerticalAlignment="Top" Width="81">
   <Button.Background>
    <LinearGradientBrush EndPoint="0.123,0.595" StartPoint="0.123,-0.243" SpreadMethod="Pad">
     <GradientStop Color="#FFF9F110" Offset="0.005"/>
     <GradientStop Color="#FF9F9A12" Offset="1"/>
     <GradientStop Color="#FFFBFAF1" Offset="0.298"/>
     <GradientStop Color="#FF595506" Offset="0.659"/>
    </LinearGradientBrush>
   </Button.Background>
  </Button>
  <Button x:Name="btnDemo3_Copy" Width="81" Height="37" Content="Demo 3 Copy" RenderTransformOrigin="0.481,0.432" HorizontalAlignment="Left" Margin="107,90,0,0" VerticalAlignment="Top">
   <Button.Background>
    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
     <GradientStop Color="#FF938686" Offset="0"/>
     <GradientStop Color="#FFC63838" Offset="1"/>
     <GradientStop Color="#FFFBF9F9" Offset="0.418"/>
     <GradientStop Color="#FFF01717" Offset="0.74"/>
     <GradientStop Color="#FFD4D4B7" Offset="0.091"/>
     <GradientStop Color="#FF8F8F87" Offset="0.183"/>
     <GradientStop Color="#FF972424" Offset="0.562"/>
     <GradientStop Color="#FF5C0D0D" Offset="0.928"/>
    </LinearGradientBrush>
   </Button.Background>
  </Button>
  <Button x:Name="btnDemo3_Copy1" Width="81" Height="37" Content="Demo 3 Copy" RenderTransformOrigin="0.481,0.432" HorizontalAlignment="Left" Margin="107,131,0,0" VerticalAlignment="Top">
   <Button.Background>
    <LinearGradientBrush EndPoint="0.198,1" StartPoint="0.198,0.054">
     <GradientStop Color="#FF938686" Offset="0"/>
     <GradientStop Color="#FFC63838" Offset="1"/>
     <GradientStop Color="#FFFBF9F9" Offset="0.418"/>
     <GradientStop Color="#FFF01717" Offset="0.74"/>
     <GradientStop Color="#FFD4D4B7" Offset="0.091"/>
     <GradientStop Color="#FF8F8F87" Offset="0.183"/>
     <GradientStop Color="#FF972424" Offset="0.562"/>
     <GradientStop Color="#FF5C0D0D" Offset="0.928"/>
    </LinearGradientBrush>
   </Button.Background>
  </Button>
 </Grid>
</Window>

（3）好了,按F5，得到下面的结果：

我们发现，所有只要是那些没有设置过Background属性的所有Button的背景全部换成了与Demo 1 Copy按钮一样的背景色了！