小D学blend-----如何创建一个漂亮的button按钮

运行环境：blend 4.0

一个漂亮的按钮和布局效果会带给用户不一样的感受，blend中可以自定义许多漂亮的按钮，今天我就做了这样一个按钮，当然是模仿所致，所以有许多不足，请见谅，本文纯属自己练笔之作。

View Code

< Window
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
x:Class = " RecDemo.MainWindow "
x:Name = " Window "
Title = " MainWindow "
Width = " 640 " Height = " 480 " >
< Window.Resources >
< Style x:Key = " ButtonStyle1 " TargetType = " {x:Type Button} " >
< Setter Property = " Template " >
< Setter.Value >
< ControlTemplate TargetType = " {x:Type Button} " >
< Grid Margin = " 0,0,0,-14 " >
< Image Source = " image/快速入口切图/未标题-3.png " Stretch = " Fill " Width = " 38 " Height = " Auto " Margin = " 0,0,0,15.837 " />
< ContentPresenter HorizontalAlignment = " {TemplateBinding HorizontalContentAlignment} " RecognizesAccessKey = " True " SnapsToDevicePixels = " {TemplateBinding SnapsToDevicePixels} " VerticalAlignment = " Bottom " />
</ Grid >
< ControlTemplate.Triggers >
< Trigger Property = " IsFocused " Value = " True " />
< Trigger Property = " IsDefaulted " Value = " True " />
< Trigger Property = " IsMouseOver " Value = " True " />
< Trigger Property = " IsPressed " Value = " True " />
< Trigger Property = " IsEnabled " Value = " False " />
</ ControlTemplate.Triggers >
</ ControlTemplate >
</ Setter.Value >
</ Setter >
</ Style >
< Style x:Key = " ButtonStyle2 " TargetType = " {x:Type Button} " >
< Setter Property = " Template " >
< Setter.Value >
< ControlTemplate TargetType = " {x:Type Button} " >
< Grid Margin = " 0,-33,-5,-24 " >
< Image RenderTransformOrigin = " 2.553,3.486 " Source = " image/快速入口切图/积累.png " Stretch = " Fill " Width = " 38 " Height = " 37 " />
< ContentPresenter HorizontalAlignment = " {TemplateBinding HorizontalContentAlignment} " RecognizesAccessKey = " True " SnapsToDevicePixels = " {TemplateBinding SnapsToDevicePixels} " VerticalAlignment = " {TemplateBinding VerticalContentAlignment} " Margin = " 0,52,0,0 " />
</ Grid >
< ControlTemplate.Triggers >
< Trigger Property = " IsFocused " Value = " True " />
< Trigger Property = " IsDefaulted " Value = " True " />
< Trigger Property = " IsMouseOver " Value = " True " />
< Trigger Property = " IsPressed " Value = " True " />
< Trigger Property = " IsEnabled " Value = " False " />
</ ControlTemplate.Triggers >
</ ControlTemplate >
</ Setter.Value >
</ Setter >
</ Style >
</ Window.Resources >

< Grid x:Name = " LayoutRoot " >
< Grid HorizontalAlignment = " Right " Width = " 160 " Margin = " 0,0,30,0 " Height = " 162 " VerticalAlignment = " Bottom " >
< Image x:Name = " image1 " Margin = " -429,-165,-21,8 " Source = " pack://siteoforigin:,,,/image/快速入口切图/桌面.png " Stretch = " Fill " RenderTransformOrigin = " 0.5,0.5 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Ellipse Margin = " -240,7,0,9 " HorizontalAlignment = " Left " Width = " 152 " >
< Ellipse.Effect >
< DropShadowEffect BlurRadius = " 3 " Direction = " 230 " />
</ Ellipse.Effect >
< Ellipse.Stroke >
< LinearGradientBrush EndPoint = " 0.5,1 " StartPoint = " 0.5,0 " >
< GradientStop Color = " #24FFF3F3 " Offset = " 0 " />
< GradientStop Color = " #34544C4C " Offset = " 0.979 " />
</ LinearGradientBrush >
</ Ellipse.Stroke >
</ Ellipse >
< Ellipse Margin = " -240,7,0,9 " RenderTransformOrigin = " 0.5,0.5 " Panel.ZIndex = " 10 " Fill = " #1FFFFFFF " HorizontalAlignment = " Left " Width = " 152 " >
< Ellipse.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Ellipse.RenderTransform >
< Ellipse.Effect >
< DropShadowEffect Direction = " 271 " />
</ Ellipse.Effect >
</ Ellipse >
< Rectangle Margin = " -232,79,0,0 " HorizontalAlignment = " Left " Height = " 1.75 " VerticalAlignment = " Top " Width = " 138.5 " >
< Rectangle.Fill >
< LinearGradientBrush EndPoint = " 0.5,1 " StartPoint = " 0.5,0 " >
< GradientStop Color = " #FFFFFDFD " Offset = " 0.008 " />
< GradientStop Color = " #7F292727 " Offset = " 1 " />
</ LinearGradientBrush >
</ Rectangle.Fill >
< Rectangle.Stroke >
< LinearGradientBrush EndPoint = " 0.5,1 " StartPoint = " 0.5,0 " >
< GradientStop Color = " #7FFFF3F3 " Offset = " 0 " />
< GradientStop Color = " #7F544C4C " Offset = " 1 " />
</ LinearGradientBrush >
</ Rectangle.Stroke >
</ Rectangle >
< Rectangle Margin = " -232,79,0,0 " RenderTransformOrigin = " 0.5,0.5 " HorizontalAlignment = " Left " Height = " 1.75 " VerticalAlignment = " Top " Width = " 138.5 " >
< Rectangle.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform Angle = " 90 " />
< TranslateTransform />
</ TransformGroup >
</ Rectangle.RenderTransform >
< Rectangle.Fill >
< LinearGradientBrush EndPoint = " 0.5,1 " StartPoint = " 0.5,0 " >
< GradientStop Color = " #FFFFFDFD " Offset = " 0.008 " />
< GradientStop Color = " #FF292727 " Offset = " 1 " />
</ LinearGradientBrush >
</ Rectangle.Fill >
< Rectangle.Stroke >
< LinearGradientBrush EndPoint = " 0.5,1 " StartPoint = " 0.5,0 " >
< GradientStop Color = " #7FFFF3F3 " Offset = " 0 " />
< GradientStop Color = " #7F544C4C " Offset = " 1 " />
</ LinearGradientBrush >
</ Rectangle.Stroke >
</ Rectangle >
< Button Content = " 人脉 " Margin = " -208.833,23.75,0,0 " Style = " {DynamicResource ButtonStyle1} " Foreground = " #FFFDF9F9 " HorizontalAlignment = " Left " Height = " 37 " VerticalAlignment = " Top " Width = " 38 " />
< Button Content = " 人脉 " Margin = " -147.5,23.75,0,0 " Style = " {DynamicResource ButtonStyle1} " Foreground = " #FFFDF9F9 " HorizontalAlignment = " Left " Height = " 37 " VerticalAlignment = " Top " Width = " 38 " />
< Button Content = " 人脉 " Margin = " -208.833,0,0,40.25 " Style = " {DynamicResource ButtonStyle1} " Foreground = " #FFFDF9F9 " HorizontalAlignment = " Left " Width = " 38 " Height = " 37 " VerticalAlignment = " Bottom " />
< Button Content = " 人脉 " Margin = " -147.5,0,0,40.25 " Style = " {DynamicResource ButtonStyle1} " Foreground = " #FFFDF9F9 " HorizontalAlignment = " Left " Width = " 38 " Height = " 37 " VerticalAlignment = " Bottom " />
< Image x:Name = " image " HorizontalAlignment = " Left " Height = " 37 " Source = " image/快速入口切图/选中图标.png " Stretch = " Fill " VerticalAlignment = " Top " Width = " 38 " RenderTransformOrigin = " 0.5,0.5 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
</ Grid >
</ Grid >
</ Window >

源代码下载： RecDemo.zip

转载于:https://www.cnblogs.com/LeiCha/archive/2011/06/08/LeiCha.html