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代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
就这样非常简单的Button样式就这样搞定了,第一次写,有点仓促,更有点无从下手,总算写了一篇了,哎,再接再厉吧!!!