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/Silverlight
标签:
Button
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)