Button的选中Effect,我们看下下面的效果:

让我们再放大一点:

怎么设置上面样式呢?直接设置Button的Effect,有点问题,因为Effect不是四周环绕的。那我们也只能重新定义Template了。下面看控件模板:

    <ControlTemplate x:Key="LightedBtnTemplate" TargetType="RadioButton">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="1" Grid.Column="1" Fill="{TemplateBinding Background}"></Rectangle> <Grid x:Name="Grid_00" Grid.Row="0" Grid.Column="0"></Grid>
<Grid x:Name="Grid_02" Grid.Row="0" Grid.Column="2"></Grid>
<Grid x:Name="Grid_20" Grid.Row="2" Grid.Column="0"></Grid>
<Grid x:Name="Grid_22" Grid.Row="2" Grid.Column="2"></Grid>
<Grid x:Name="Grid_Top" Grid.Row="0" Grid.Column="1"></Grid>
<Grid x:Name="Grid_Bottom" Grid.Row="2" Grid.Column="1"></Grid>
<Grid x:Name="Grid_Left" Grid.Row="1" Grid.Column="0"></Grid>
<Grid x:Name="Grid_Right" Grid.Row="1" Grid.Column="2"></Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Grid_00" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="0.5"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_02" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="0.5"></GradientStop>
</LinearGradientBrush> </Setter.Value>
</Setter>
<Setter TargetName="Grid_20" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="0.5"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_22" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="0.5"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_Top" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,1" EndPoint="1,0">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_Bottom" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_Left" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,1">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_Right" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

~~~估计你一下就能看懂了,只是用了点小技巧,多加了几个外部元素。

当然这个也是可以设置成自动的,然后在选中的时候,再加宽度和高度,这样就不会影响控件本身的布局。

下面是Demo:

<Window x:Class="WpfApplication13.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="525" Background="LightBlue">
<Window.Resources>
<ControlTemplate x:Key="LightedBtnTemplate" TargetType="RadioButton">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="1" Grid.Column="1" Fill="{TemplateBinding Background}"></Rectangle> <Grid x:Name="Grid_00" Grid.Row="0" Grid.Column="0"></Grid>
<Grid x:Name="Grid_02" Grid.Row="0" Grid.Column="2"></Grid>
<Grid x:Name="Grid_20" Grid.Row="2" Grid.Column="0"></Grid>
<Grid x:Name="Grid_22" Grid.Row="2" Grid.Column="2"></Grid>
<Grid x:Name="Grid_Top" Grid.Row="0" Grid.Column="1"></Grid>
<Grid x:Name="Grid_Bottom" Grid.Row="2" Grid.Column="1"></Grid>
<Grid x:Name="Grid_Left" Grid.Row="1" Grid.Column="0"></Grid>
<Grid x:Name="Grid_Right" Grid.Row="1" Grid.Column="2"></Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Grid_00" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="0.5"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_02" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="0.5"></GradientStop>
</LinearGradientBrush> </Setter.Value>
</Setter>
<Setter TargetName="Grid_20" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="0.5"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_22" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="0.5"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_Top" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,1" EndPoint="1,0">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_Bottom" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_Left" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,1">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="Grid_Right" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="Transparent" Offset="1"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<StackPanel Margin="0,5,0,-5">
<RadioButton Height="30" Width="100" Background="DeepSkyBlue" Template="{StaticResource LightedBtnTemplate}"></RadioButton>
<RadioButton Height="30" Width="100" Background="DeepSkyBlue" IsChecked="True" Template="{StaticResource LightedBtnTemplate}"></RadioButton>
<RadioButton Height="30" Width="100" Background="DeepSkyBlue" Template="{StaticResource LightedBtnTemplate}"></RadioButton>
</StackPanel>
</Grid>
</Window>

WPF 自定义模板 Button闪亮效果的更多相关文章

  1. WPF Step By Step 自定义模板

    WPF Step By Step 自定义模板 回顾 上一篇,我们简单介绍了几个基本的控件,本节我们将讲解每个控件的样式的自定义和数据模板的自定义,我们会结合项目中的具体的要求和场景来分析,给出我们实现 ...

  2. 使用 DotNet CLI 创建自定义的 WPF 项目模板

    描述 当我们安装完 DotNetCore 3.0 版本的 SDK 后,我们就可以创建基于 DotNetCore 的 WPF 项目模板,通过如下 CLI 可以方便快捷的创建并运行我们的项目: dotne ...

  3. WPF 自定义 MessageBox (相对完善版)

    WPF 自定义 MessageBox (相对完善版)     基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当 ...

  4. WPF Demo20 模板

    <Window x:Class="控件模板.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/x ...

  5. WPF 自定义 MessageBox (相对完善版 v1.0.0.6)

    基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当你不得不弹出一个消息框通知用户消息时(虽然很不建议在程序中频繁 ...

  6. WPF 自定义柱状图 BarChart

    WPF 自定义柱状图 当前的Telerik控件.DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的. 或者说,通过修改当前的第三方控 ...

  7. WPF三大模板简介(Z)

    WPF三大模板简介   WPF支持以下类型的模板: (1) 控件模板.控件模板可以将自定义模板应用到某一特定类型的所有控件,或是控件的某一实例.决定控件外观的是ControlTemplate,它决定了 ...

  8. WPF三大模板简介

    WPF支持以下类型的模板: (1) 控件模板.控件模板可以将自定义模板应用到某一特定类型的所有控件,或是控件的某一实例.决定控件外观的是ControlTemplate,它决定了控件“长成什么样子”,因 ...

  9. WPF自定义Window样式(1)

    1. 引言 WPF是制作界面的一大利器.最近在做一个项目,用的就是WPF.既然使用了WPF了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...

随机推荐

  1. php修改

    做出一张表,点击登录后进入此表   然后多建立一个<td></td>用来增加一列操作 <h1>英雄联盟英雄表</h1> <table width= ...

  2. WCF学习之旅—第三个示例之五(三十一)

       上接WCF学习之旅—第三个示例之一(二十七)               WCF学习之旅—第三个示例之二(二十八)              WCF学习之旅—第三个示例之三(二十九) WCF学习 ...

  3. 修改Coney主题之侧边栏移位

    title: 修改Coney主题之侧边栏移位 date: 2014-12-15 18:09:54 categories: Hexo tags: [hexo,css] --- Coney是一个非常漂亮的 ...

  4. JavaScript权威设计--JavaScript函数(简要学习笔记十一)

    1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...

  5. 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  6. ASP.NET 中 OutputCache 指令参数详解

    使用@ OutputCache指令使用@ OutputCache指令,能够实现对页面输出缓存的一般性需要.@ OutputCache指令在ASP.NET页或者页中包含的用户控件的头部声明.这种方式非常 ...

  7. 从零开始学 Java - Spring 集成 ActiveMQ 配置(一)

    你家小区下面有没有快递柜 近两年来,我们收取快递的方式好像变了,变得我们其实并不需要见到快递小哥也能拿到自己的快递了.对,我说的就是类似快递柜.菜鸟驿站这类的代收点的出现,把我们原来快递小哥必须拿着快 ...

  8. C++ tinyXML使用

    tinyXML下载: http://sourceforge.net/projects/tinyxml/ 加载到项目: 这六个文件添加到你的c++工程中,分别是tinystr.h.tinystr.cpp ...

  9. zip函数-Python 3

    zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表. zip函数在获取数据后,生成字典(dict)时比较好用. for examples: # Code based on P ...

  10. dpkg:处理软件包dradis (--configure)时出错

    dpkg:处理软件包dradis (--configure)时出错!解决方案:1.将info文件夹更名%mv /var/lib/dpkg/info /var/lib/dpkg/info_old2.新建 ...