首页 > Windows开发 > 详细

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

时间:2019-03-01 23:49:04      阅读:410      评论:0      收藏:0      [点我收藏+]
原文:潜移默化学会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框架 - 博客园

原文:https://www.cnblogs.com/lonelyxmas/p/10459088.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!