潜移默化学会WPF（综合篇）--模板，样式，动画（提供一个很漂亮的色块按钮）（一） - AYUI框架 - 博客园...

潜移默化学会WPF（综合篇）--模板，样式，动画（提供一个很漂亮的色块按钮）（一） - AYUI框架 - 博客园

原文: 潜移默化学会WPF（综合篇）--模板，样式，动画（提供一个很漂亮的色块按钮）（一） - AYUI框架 - 博客园

 先声明一下，我的样式的样式资源是放在App.xaml中的，用的时候页面上面别忘了引入命名空间啊，或者直接放入本页中，会资源和样式的人会知道怎么用的，呃...最近写的比较散，文章不是一章一章来的，本文章不适合初学者

 

 

先看代码

View Code

 <Style x:Key="WindowsButton" TargetType="{x:Type Button}">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="FontFamily" Value="微软雅黑"/>
            <Setter Property="Background" Value="#cdcdce"/>
            <Setter Property="Foreground" Value="#000000"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="back" Opacity="0.8" CornerRadius="0" SnapsToDevicePixels="True">
                            <Border.Background>
                                <SolidColorBrush Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}"></SolidColorBrush>
                            </Border.Background>
                            <!--前景色及边框-->
                            <Border x:Name="fore" BorderThickness="0" CornerRadius="0" BorderBrush="#ffffff">
                                <Border.Background>
                                    <SolidColorBrush Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}"></SolidColorBrush>
                                </Border.Background>
                                <!--按钮内容-->
                                <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center">
                                </ContentPresenter>
                            </Border>
                        </Border>
                        <!--触发器-->
                        <ControlTemplate.Triggers>
                            <!--鼠标移入移出-->
                            <Trigger Property="IsMouseOver" Value="True">
                                <!--<Setter Property="BorderThickness" TargetName="fore" Value="1"/>-->
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation To="#c8c8c9" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>

                                    <BeginStoryboard>
                                        <Storyboard>

                                            <ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>

                            <!--按钮按下弹起-->

                            <Trigger Property="IsPressed" Value="True">

                                <Trigger.EnterActions>

                                    <BeginStoryboard>

                                        <Storyboard>
                                            <ColorAnimation To="#717073" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
                                        </Storyboard>

                                    </BeginStoryboard>

                                </Trigger.EnterActions>

                                <Trigger.ExitActions>

                                    <BeginStoryboard>

                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
                                        </Storyboard>

                                    </BeginStoryboard>

                                </Trigger.ExitActions>

                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>

            </Setter>

        </Style>

用法，这是我写好的一个样式，你也可以自己尝试修改样式，看看有什么效果吧，（鼠标移入，移走，按下，禁用所有效果都写好了，你可以改成自己喜欢的，还有色块颜色的变化  是动画效果的，可不是死邦邦的，值得一学）

 <Button Command="" Canvas.Left="0" Canvas.Top="0" Content="取消" Height="35" Name="btnCloseConsume" Width="90" Style="{StaticResource WindowsButton}"  Background="{x:Null}" ></Button>

这样用就行了，Background的值你可以修改为任何颜色（按钮没有单击的样子的色块颜色），后面那个Style就是样式。

本章不提供教学，这是综合篇，不会的人想要改成自己喜欢的颜色的话，自己随便改改里面的样式试试吧，Style  和 Template 和 Animation 我会在近期出文章的，我自己比较喜欢动画的实现，希望你们还顶啊

 

效果图

分类: WPF

好文要顶 关注我 收藏该文

AYUI框架
关注 - 152
粉丝 - 841

+加关注

1

0

« 上一篇： 我的博客学习记录一箩筐（每天更新）
» 下一篇： 潜移默化学会WPF（综合篇）--模板，样式，自定义控件，依赖性属性（提供一个水印文本框，自定义颜色方形border外观）（二）

posted on 2019-03-01 22:20 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/10459088.html