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了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...

随机推荐

Maven中安装本地Jar包到仓库中或将本地jar包上传
摘要 maven install 本地jar 命令格式 mvn install:install-file -DgroupId=<group_name> -DartifactId=<a ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（30）-本地化(多语言)
系列目录我们的系统有时要扩展到其他国家,或者地区,需要更多的语言环境,微软提供了一些解决方案,原始我们是用js来控制的,现在不需要了. 我们只要创建简单的资源文件,通过MVC的路由设置就可以轻松的进 ...
再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
markdown常用语法总结
转自markdown示例[模板] 1.1.段落标题根据原文中的文档标题可以对应设置标题. # 一级标题## 二级标题### 三级标题效果 => 一级标题二级标题三级标题 1.2.斜体.加 ...
现代3D图形编程学习-环境设置
本书系列现代3D图形编程学习环境设置由于本书中的例子,均是基于OpenGL实现的,因此你的工作环境需要能够运行OpenGL,为了读者能够更好的运行原文中的示例,此处简单地介绍了linux和win ...
php内核分析（八）－zend_compile
这里阅读的php版本为PHP-7.1.0 RC3,阅读代码的平台为linux 回到之前看的zend_eval_stringl ZEND_API int zend_eval_stringl(char * ...
EC笔记：第4部分：18、接口正确使用，不易被误用
好的接口容易被正确使用,不易被误用考虑以下函数: void func(int year,int month,int day){ //一些操作 } 这个函数看似合理,因为参数的名字已经暴露了它的用途. ...
Spring下ActiveMQ实战
MessageQueue是分布式的系统里经常要用到的组件,一般来说,当需要把消息跨网段.跨集群的分发出去,就可以用这个.一些典型的示例就是: 1.集群A中的消息需要发送给多个机器共享: 2.集群A中消 ...
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
JVM调优总结
堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...

WPF 自定义模板 Button闪亮效果

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

随机推荐

热门专题