原文:
潜移默化学会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