WPFbutton样式
有四款button不同的风格
- <Window x:Class="SjglzxRj.Window3"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- Title="Window3" Height="400" Width="300">
- <Window.Resources>
- <Style TargetType="Button" x:Key="StyleBtn1">
- <Setter Property="Foreground" Value="White"/>
- <Setter Property="Background" Value="Blue"/>
- <Setter Property="FontSize" Value="25"/>
- <Setter Property="FontFamily" Value="楷体"/>
- <!--修改模板属性-->
- <Setter Property="Template">
- <Setter.Value>
- <!--控件模板-->
- <ControlTemplate TargetType="Button">
- <!--背景色-->
- <Border x:Name="back" Opacity="0.8" CornerRadius="3">
- <Border.BitmapEffect>
- <OuterGlowBitmapEffect Opacity="0.7" GlowSize="0"
- GlowColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" />
- </Border.BitmapEffect>
- <Border.Background>
- <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5">
- <GradientBrush.GradientStops>
- <GradientStopCollection>
- <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/>
- <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/>
- <GradientStop Color="#FFF" Offset="1"/>
- </GradientStopCollection>
- </GradientBrush.GradientStops>
- </LinearGradientBrush>
- </Border.Background>
- <!--前景色及边框-->
- <Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="#5555">
- <Border.Background>
- <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
- <GradientBrush.GradientStops>
- <GradientStopCollection>
- <GradientStop Color="#6FFF" Offset="0.5"/>
- <GradientStop Color="#1111" Offset="0.51"/>
- </GradientStopCollection>
- </GradientBrush.GradientStops>
- </LinearGradientBrush>
- </Border.Background>
- <!--按钮内容-->
- <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}">
- <ContentPresenter.BitmapEffect>
- <DropShadowBitmapEffect Color="#000" Direction="-90" ShadowDepth="2" Softness="0.1" Opacity="0.3" />
- </ContentPresenter.BitmapEffect>
- </ContentPresenter>
- </Border>
- </Border>
- <!--触发器-->
- <ControlTemplate.Triggers>
- <!--鼠标移入移出-->
- <Trigger Property="IsMouseOver" Value="True">
- <Trigger.EnterActions>
- <BeginStoryboard>
- <Storyboard>
- <DoubleAnimation To="6" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
- <ColorAnimation To="#AFFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
- <ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(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="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
- <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
- </Storyboard>
- </BeginStoryboard>
- </Trigger.ExitActions>
- </Trigger>
- <!--按钮按下弹起-->
- <Trigger Property="IsPressed" Value="True">
- <Trigger.EnterActions>
- <BeginStoryboard>
- <Storyboard>
- <DoubleAnimation To="3" Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
- <ColorAnimation To="#3AAA" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
- <ColorAnimation To="#2111" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
- </Storyboard>
- </BeginStoryboard>
- </Trigger.EnterActions>
- <Trigger.ExitActions>
- <BeginStoryboard>
- <Storyboard>
- <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
- <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
- <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
- </Storyboard>
- </BeginStoryboard>
- </Trigger.ExitActions>
- </Trigger>
- <!--按钮失效-->
- <Trigger Property="IsEnabled" Value="False">
- <Setter Property="Foreground" Value="#B444"/>
- <Trigger.EnterActions>
- <BeginStoryboard>
- <Storyboard>
- <DoubleAnimation To="0" Duration="0:0:0.3" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
- <DoubleAnimation To="1" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />
- <DoubleAnimation To="-135" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)" />
- <ColorAnimation To="#FFF" Duration="0:0:0.3" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)" />
- <ColorAnimation To="#D555" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />
- <ColorAnimation To="#CEEE" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
- <ColorAnimation To="#CDDD" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
- </Storyboard>
- </BeginStoryboard>
- </Trigger.EnterActions>
- <Trigger.ExitActions>
- <BeginStoryboard>
- <Storyboard>
- <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
- <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />
- <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)" />
- <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)" />
- <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />
- <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
- <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
- </Storyboard>
- </BeginStoryboard>
- </Trigger.ExitActions>
- </Trigger>
- </ControlTemplate.Triggers>
- </ControlTemplate>
- </Setter.Value>
- </Setter>
- </Style>
- <Style TargetType="Button" x:Key="StyleBtn2">
- <Setter Property="FontSize" Value="16"></Setter>
- <Setter Property="Foreground" Value="White"></Setter>
- <Setter Property="FontWeight" Value="Bold"></Setter>
- <Setter Property="Cursor" Value="Hand"/>
- <Setter Property="Background">
- <Setter.Value>
- <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
- <GradientStop Color="#FF00B6B6" Offset="0"/>
- <GradientStop Color="#FF1A40EA" Offset="1"/>
- </LinearGradientBrush>
- </Setter.Value>
- </Setter>
- <Setter Property="Template">
- <Setter.Value>
- <ControlTemplate TargetType="Button">
- <Border Name="border" CornerRadius="8" Background="{TemplateBinding Background}">
- <ContentPresenter Name="content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
- RecognizesAccessKey="True"
- SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
- VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
- </Border>
- <ControlTemplate.Triggers>
- <Trigger Property="IsMouseOver" Value="True">
- <Setter Property="Background">
- <Setter.Value>
- <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
- <GradientStop Color="#FF1A40EA" Offset="0"/>
- <GradientStop Color="#FF00B6B6" Offset="1"/>
- </LinearGradientBrush>
- </Setter.Value>
- </Setter>
- </Trigger>
- <Trigger Property="IsPressed" Value="True">
- <Setter Property="Foreground" Value="#FFF9F7E1"/>
- <Setter Property="Background">
- <Setter.Value>
- <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
- <GradientStop Color="#FF1A40EA" Offset="0"/>
- <GradientStop Color="#FF1A40EA" Offset="1"/>
- </LinearGradientBrush>
- </Setter.Value>
- </Setter>
- </Trigger>
- <Trigger Property="IsEnabled" Value="false">
- <Setter TargetName="border" Property="Opacity" Value="0.6" />
- </Trigger>
- </ControlTemplate.Triggers>
- </ControlTemplate>
- </Setter.Value>
- </Setter>
- </Style>
- <Style x:Key="StyleBtn3" TargetType="{x:Type Button}">
- <Setter Property="Border.BorderThickness" Value="1,1,1,1"/>
- <Setter Property="Border.CornerRadius" Value="3"/>
- <Setter Property="Height" Value="36"/>
- <Setter Property="Width" Value="36"/>
- <Setter Property="Template">
- <Setter.Value>
- <ControlTemplate TargetType="Button">
- <Grid>
- <Ellipse Fill="{TemplateBinding Background}"/>
- <Ellipse>
- <Ellipse.Fill>
- <RadialGradientBrush>
- <GradientStop Offset="0" Color="#00000000"></GradientStop>
- <GradientStop Offset="0.88" Color="#00000000"></GradientStop>
- <GradientStop Offset="1" Color="#80000000"></GradientStop>
- </RadialGradientBrush>
- </Ellipse.Fill>
- </Ellipse>
- <Ellipse Margin="10" x:Name="highlightCircle">
- <Ellipse.Fill>
- <LinearGradientBrush>
- <GradientStop Offset="0" Color="#50FFFFFF"/>
- <GradientStop Offset="0.5" Color="#00FFFFFF"/>
- <GradientStop Offset="1" Color="#50FFFFFF"/>
- </LinearGradientBrush>
- </Ellipse.Fill>
- </Ellipse>
- <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
- </Grid>
- </ControlTemplate>
- </Setter.Value>
- </Setter>
- <Style.Triggers>
- <Trigger Property="IsMouseOver" Value="True">
- <Setter Property="RenderTransform">
- <Setter.Value>
- <RotateTransform Angle="10"></RotateTransform>
- </Setter.Value>
- </Setter>
- <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
- <Setter Property="Background" Value="#FF0CC030" />
- </Trigger>
- <Trigger Property="IsPressed" Value="True">
- <Setter Property="Foreground" Value="Red"/>
- </Trigger>
- </Style.Triggers>
- </Style>
- <Style x:Key="StyleBtn4" TargetType="Button">
- <Setter Property="FontSize" Value="15"></Setter>
- <Setter Property="Foreground" Value="Black"></Setter>
- <Setter Property="FontWeight" Value="Bold"></Setter>
- <!--修改模板属性-->
- <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>
- </Window.Resources>
- <Grid>
- <StackPanel>
- <Button Height="100" Content="样式1" Style="{StaticResource StyleBtn1}"/>
- <Button Height="100" Content="样式2" Style="{StaticResource StyleBtn2}"/>
- <Button Height="100" Content="样式3" Width="100" Style="{StaticResource StyleBtn3}"/>
- <Button Height="100" Content="样式4" Style="{StaticResource StyleBtn4}"/>
- </StackPanel>
- </Grid>
- </Window>
效果如下
WPFbutton样式的更多相关文章
- WPF界面设计技巧(2)—自定义漂亮的按钮样式
原文:WPF界面设计技巧(2)-自定义漂亮的按钮样式 上次做了个很酷的不规则窗体,这次我们来弄点好看的按钮出来,此次将采用纯代码来设计按钮样式,不需要 Microsoft Expression Des ...
- WPF自定义漂亮的按钮样式
首先打开 Microsoft Visual Studio 2008 ,新建一个WPF项目,在上面随便放几个按钮: 然后给各个按钮设置不同的背景颜色: 设置好之后就是这样啦: 然后我们就开始在 App. ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- BootStrap_02之全局样式及组件
1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...
- CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
- x:bind不支持样式文件 或 此Xaml文件必须又代码隐藏类才能使用{x:Bind} 解决办法
这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题 如果是写在Style里,则提示 “x: ...
- input[tyle="file"]样式修改及上传文件名显示
默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...
- WPF样式之画刷结合样式
第一种画刷,渐变画刷GradientBrush (拿线性渐变画刷LinearGradientBrush(其实它涵盖在GradientBrush画刷内.现在拿他来说事.),还有一个圆心渐变画刷Radia ...
- JavaScript特性(attribute)、属性(property)和样式(style)
最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...
随机推荐
- Chapter 2 Open Book——36
"That was awful," he groaned. "They all looked exactly the same. You're lucky you had ...
- C# 压缩打包文件下载
C# 压缩打包文件下载 public class MyNameTransfom : ICSharpCode.SharpZipLib.Core.INameTransform { #region INam ...
- C# 语言规范_版本5.0 (第16章 异常)
1. 异常 C# 中的异常用于处理系统级和应用程序级的错误状态,它是一种结构化的.统一的和类型安全的处理机制.C# 中的异常机制非常类似于 C++ 的异常机制,但是有一些重要的区别: 在 C# 中,所 ...
- wampserver使用过程中遇到的问题及相关配置
wampserver集合了Apache+PHP+Mysql 下载地址:点这里 安装过程很方便,一直点下一步就行,中间会提示选择默认的浏览器及文件编辑器 起因: 使用过程中提示: In the http ...
- MYSQL主从同步故障一例及解决过程
公司里有两个mysql服务器做主从同步,某天Nagios发来报警短信,mysqla is down...赶紧联系机房,机房的人反馈来的信息是 HARDWARE ERROR 后面信息省略,让机房记下错误 ...
- mycat 概述
从开始接触mycat,到现在为止也有三个多月的时间了,目前在测试环境中已经初步应用!大概可以总结一下了 mycat是一个数据库中间件,也可以理解为是数据库代理.在架构体系中是位于数据库和应用层之间的一 ...
- angular中的等号(==)判定
使用angularjs的时候会使用到其中的表达式,其中有相等的判断.由于js有==和===的区别,于是就想看看是否相同.自己稍微做了一点测试,一看便知. 先给结论:angularjs表达式中的==和= ...
- 特殊函数(__all__)
python里__all__ 属性分别于模块和包之中的用法 一. 在模块(*.py)中使用意为导出__all__列表里的类.函数.变量等成员,否则将导出modualA中所有不以下划线开头(私有)的成员 ...
- 【原创】Spring MVC项目搭建(使用Java配置)
一.使用Intellij idea,新建maven项目,选择maven-archetype-webapp. 二.在src/main下新建文件夹,命名为java,并标注为source folder. 三 ...
- java变量初始化
java全局变量会自动初始化,但局部变量不会自动初始化.当我们新建一个对象的时候,java会申请一个区域存放类的数据,而成员变量就是类的数据,也是放在这个内存区域中,jvm申请内存时初始化.而方法中变 ...