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>
View Code
复制代码

 

posted @   唐宋元明清2188  阅读(1184)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
点击右上角即可分享
微信分享提示
哥伦布
01:11发布
哥伦布
01:11发布
8°
西北风
2级
空气质量
相对湿度
81%
今天
中雨
3°/15°
周四
大雨
2°/14°
周五
小雨
4°/10°