Microsoft Expression Blend 4制作简单的按钮

在博客园混了这么久了，第一次写博客。本人标准的理工男，文笔不敢说一般，只能用还学过语文。勉强达意而已。见笑！！

由于本人能有有限，错误之处在所难免，望大牛们批评指正，共同进步。^_^!!!!!!!!!!!!!!!!!!!!!!

觉得此篇博文对你有用，欢迎阅读，同时欢迎喜欢拍砖的同学。哥们脑袋硬。

书归正传，由于第一次写博客、加上个人技术有限，只能简单把自己曾经用的一些技术在这里做下简单的纪录。作为一个攻城狮，那就先慢慢的攻城吧，总有一天要成为狮！！嘿嘿

制作圆角的按钮：

step by step：建立wpf项目工程，首先在窗体上画一个矩形，设置其Fill为no brush，RadiusX、RadiusY的值2（圆角效果），右键选中矩形，构成控件，如下图：

 

 

在控件类型中选中Button，修改名称为myBtnStyle，确定。下面就来制作button的样式，鼠标滑动，点击的各种效果。

在上图的触发器选项卡下面有以上的触发事件，下面分别设置IsDefaulted，IsMouseOver，IsPressed来设置Button的默认、鼠标滑过、按下的样式。

IsDefaulted：设置如上图，背景填充为绿色，边框为无样式。

其他触发选项如IsDefaulted一样，设置自己喜欢的颜色。

设置完成活按F5，运行，看下效果：

默认：

鼠标滑过：

点击样式：（运行点击没有虚线，截图就出现了，嘿嘿）

ok，一个简单的按钮的样式就写完了。

xaml代码如下：

 1 <Style x:Key="myBtnStyle" TargetType="{x:Type Button}">
 2 <Setter Property="Template">
 3 <Setter.Value>
 4 <ControlTemplate TargetType="{x:Type Button}">
 5 <Grid>
 6 <Grid.ColumnDefinitions>
 7 <ColumnDefinition x:Name="columnDefinition1" Width="0.982*"/>
 8 <ColumnDefinition x:Name="columnDefinition" Width="0.018*"/>
 9 </Grid.ColumnDefinitions>
10 <Rectangle x:Name="rectangle" RadiusY="2" RadiusX="2" Stroke="{x:Null}" Fill="#FF0DAD5F" Grid.ColumnSpan="2"/>
11 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
12 </Grid>
13 <ControlTemplate.Triggers>
14 <Trigger Property="IsFocused" Value="True">
15 <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
16 <Setter Property="Fill" TargetName="rectangle" Value="#FF0EED80"/>
17 </Trigger>
18 <Trigger Property="IsDefaulted" Value="True">
19 <Setter Property="Fill" TargetName="rectangle" Value="#FF0DAD5F"/>
20 <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
21 </Trigger>
22 <Trigger Property="IsMouseOver" Value="True">
23 <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
24 <Setter Property="Fill" TargetName="rectangle" Value="#FF83D245"/>
25 </Trigger>
26 <Trigger Property="IsPressed" Value="True">
27 <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
28 <Setter Property="Fill" TargetName="rectangle" Value="#FF17D256"/>
29 <Setter Property="Width" TargetName="columnDefinition" Value="Auto"/>
30 <Setter Property="MinWidth" TargetName="columnDefinition" Value="0"/>
31 <Setter Property="Width" TargetName="columnDefinition1" Value="*"/>
32 </Trigger>
33 <Trigger Property="IsEnabled" Value="False">
34 <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
35 <Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/>
36 </Trigger>
37 </ControlTemplate.Triggers>
38 </ControlTemplate>
39 </Setter.Value>
40 </Setter>
41 </Style>

View Code

 

就这样非常简单的Button样式就这样搞定了，第一次写，有点仓促，更有点无从下手，总算写了一篇了，哎，再接再厉吧！！！

 

转载于:https://www.cnblogs.com/Aeryoure/p/3302195.html