自制WPF的Button的Style，以及一些变化方案

在园子里潜水了半年多了，终于写了第一篇随笔，希望不是太丢人现眼.... 

然后，斗胆发在园子的首页上，要是大家拍砖过于猛烈....我就立刻撤下来.....

 

自制的WPF中Button的Style

最近做的一个项目，主要是关注用户体验，所以视图层用到了WPF来增加用户使用时候的新鲜感，自然传统的控件样式是不能令人满意的，所以就自己做了一个Button的Style....

这个Style的功效...就是把我们平时见到的方形的Button

1.做成了一个圆形的（这个功能要做到蛮容易的）

2.这个圆形分两层，分别用渐变色表示（可调）

3.这个圆形的底层有一个背景（背景颜色必须填充，不知道为何 - - 其实我这个例子用不到这个颜色，不过没有那个Ellipse.Fill它就不让我编译通过）

4.这个圆形还有一个顶层，用来放入这个Button的Content

5.这个Button当鼠标移入移出时...可以渐变色（动画效果的）

6.这个Button当鼠标移入移出时...有光晕产生（同上、移出时是消失）——这个功能折腾了我一个小时的样子，因为最初的光晕是方形的...（原始Border的形状.....）

7.这个Button按下之后给用户一种按下去的感觉...

 

其实整个东西我们现在做的这套系统用不到上面所有的效果 - - 权当熟悉WPF的Style了...

 

把源码贴出来，分享一下吧 - - 我没查，不知道国内有没有这样的源码...

颜色很恶心，想要漂亮的请自己调整

还有Content的效果也能自己写一些Property加进去

就定义了三种常用事件，可以根据需要多添加一些事件进去

 

感谢楼下几位朋友的评论，我再补充一些吧

1、奇形怪状的Button

那就是只要你愿意，你将这个代码中的Ellipse替换一下（比如Polygon），你就可以做出各种形状的Button（比如五角星型）

还有，若是使用BLEND，就更加强大了，你只要在BLEND里手绘出一个图形，然后把那段代码替换进这个Style里面就能做出更加“怪异”的Button了。

还有一些其他的特性，比如其实最下层的那个Ellipse我没有用到，但是你可以通过变更它的大小和Opacity来做出一个三层的按钮

然后也可以添加一些特效（我这里的特效是outerGlowBitMapEffect——光晕），都是比较灵活的，只要把我这串代码的模式掌握了，基本上以后什么样的Button都可以信手拈来

2、如何在Button里放入图片（普通的Winform的Button直接就有这个属性，但是WPF的Button不支持）

    最简单的方案就是放入一个<ViewBox>，再在里面放入一个<Image>就可以。

3、特殊的Brush

    其实WPF中定义了不少的刷子，比如VisualBrush，ImageBrush，DrawingBrush，这些刷子要是使用得当可以有各种各样的功用，已经不仅仅局限于用在Button上了，当然，要是你希望把Button做个倒影，那就要使用VisualBrush了~

 

<!--定义按钮样式-->
        <Style x:Key="buttonTemplate" TargetType="Button" >
            <!--修改模板属性-->
            <Setter Property="Template">
                <Setter.Value>
                    <!--控件模板-->
                    <ControlTemplate TargetType="Button">
                        <!--只有Grid才能装下这么多Child-->
                        <Grid>
                            <!--带特效的底层背景-->
                            <Border x:Name="back" Opacity="0.8" CornerRadius="2">
                                <Border.BitmapEffect>
                                    <OuterGlowBitmapEffect Opacity="0.8" GlowSize="0" GlowColor="Red" />
                                </Border.BitmapEffect>                                
                                <Ellipse Width="49" Height="49">
                                    <Ellipse.Fill>
                                        Red
                                    </Ellipse.Fill>
                                </Ellipse>
                            <!--按钮呈圆形-->
                            </Border>                            
                            <Ellipse x:Name="outerCircle" Width="50" Height="50">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Offset="0" Color="DarkOliveGreen"/>
                                        <GradientStop Offset="1" Color="Azure"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse Width="40" Height="40">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Offset="0" Color="White"/>
                                        <GradientStop Offset="1" Color="Transparent"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <!--按钮内容-->
                            <Border>                                
                                <TextBlock x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding  Content}">
                                </TextBlock>
                            </Border>
                        </Grid>
                        <!--触发器-->
                        <ControlTemplate.Triggers>
                            <Trigger Property="Button.IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation To="10" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
                                            <ColorAnimation To="#4FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
                                            <ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="Button.IsPressed" Value="True">
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX=".9" ScaleY=".9"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

注：本人使用VS2008时，有时XAML设计器会报错，但是能够编译通过，所以有些情况下无视就好，估计是MS的小BUG....

 

补充两张效果图

鼠标焦点不在Button上时：

 

鼠标焦点在Button上时（变色动画完成之后的效果）

转载于:https://www.cnblogs.com/iamzhyk/archive/2009/03/12/1409271.html