WPF 自定义模板 Button闪亮效果

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闪亮效果的更多相关文章

WPF Step By Step 自定义模板
WPF Step By Step 自定义模板回顾上一篇,我们简单介绍了几个基本的控件,本节我们将讲解每个控件的样式的自定义和数据模板的自定义,我们会结合项目中的具体的要求和场景来分析,给出我们实现 ...
使用 DotNet CLI 创建自定义的 WPF 项目模板
描述当我们安装完 DotNetCore 3.0 版本的 SDK 后,我们就可以创建基于 DotNetCore 的 WPF 项目模板,通过如下 CLI 可以方便快捷的创建并运行我们的项目: dotne ...
WPF 自定义 MessageBox (相对完善版)
WPF 自定义 MessageBox (相对完善版) 基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当 ...
WPF Demo20 模板
<Window x:Class="控件模板.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/x ...
WPF 自定义 MessageBox (相对完善版 v1.0.0.6)
基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当你不得不弹出一个消息框通知用户消息时(虽然很不建议在程序中频繁 ...
WPF 自定义柱状图 BarChart
WPF 自定义柱状图当前的Telerik控件.DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的. 或者说,通过修改当前的第三方控 ...
WPF三大模板简介（Z）
WPF三大模板简介 WPF支持以下类型的模板: (1) 控件模板.控件模板可以将自定义模板应用到某一特定类型的所有控件,或是控件的某一实例.决定控件外观的是ControlTemplate,它决定了 ...
WPF三大模板简介
WPF支持以下类型的模板: (1) 控件模板.控件模板可以将自定义模板应用到某一特定类型的所有控件,或是控件的某一实例.决定控件外观的是ControlTemplate,它决定了控件“长成什么样子”,因 ...
WPF自定义Window样式（1）
1. 引言 WPF是制作界面的一大利器.最近在做一个项目,用的就是WPF.既然使用了WPF了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...

随机推荐

python基础操作以及hdfs操作
目录前言基础操作 hdfs操作总结一.前言作为一个全栈工程师,必须要熟练掌握各种语言...HelloWorld.最近就被"逼着"走向了python开发之路, ...
IIS7.5上的REST服务的Put,Delete操作发生HTTP Error 405.0 - Method Not Allowed 解决方法
WebDAV 是超文本传输协议 (HTTP) 的一组扩展,为 Internet 上计算机之间的编辑和文件管理提供了标准.利用这个协议用户可以通过Web进行远程的基本文件操作,如拷贝.移动.删除等.在I ...
现代3D图形编程学习-基础简介(2) (译)
本书系列现代3D图形编程学习基础简介(2) 图形和渲染接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...
匹夫细说C#：委托的简化语法，聊聊匿名方法和闭包
0x00 前言通过上一篇博客<匹夫细说C#:庖丁解牛聊委托,那些编译器藏的和U3D给的>的内容,我们实现了使用委托来构建我们自己的消息系统的过程.但是在日常的开发中,仍然有很多开发者因为 ...
C#组件系列———又一款日志组件：Elmah的学习和分享
前言:好久没动笔了,都有点生疏,12月都要接近尾声,可是这月连一篇的产出都没有,不能坏了“规矩”,今天还是来写一篇.最近个把月确实很忙,不过每天早上还是会抽空来园子里逛逛.一如既往,园子里每年这个时候 ...
Win10桌面预览版14316更新内容大全
下载更新: 安装之后右下角: Win10桌面预览版14316更新内容: Windows上运行乌班图Bash:通过设置开启开发者模式,更新和安全>面向开发人员.然后搜索"Wi ...
【Android】纯代码创建页面布局（含异步加载图片）
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
C# 条件编译
本文导读: C#的预处理器指令从来不会转化为可执行代码的命令,但是会影响编译过程的各个方面,常用的预处理器指令有#define.#undef.#if,#elif,#else和#endif等等,下面介绍 ...
C# http
minihttpd minihttpd:HTTPWeb服务器库 https://www.codeproject.com/articles/11342/minihttpd-an-http-web-ser ...
Java传值和传址
调用函数时,传的参数过去可能是传值,也可能是传址.如果是传值,函数内部的操作对参数的值没有影响:如果是传址,函数内部的操作是对参数指向的内存进行操作,会影响参数的值. Java到底是传值还是传址?用下 ...

WPF 自定义模板 Button闪亮效果

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

随机推荐

热门专题