AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

WPF 自定义模板 Button闪亮效果

2018-09-25 596
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF 自定义模板 Button闪亮效果Button的选中Effect，我们看下下面的效果：   让我们再放大一点： 怎么设置上面样式呢？直接设置Button的Effect，有点问题，因为Effect不是四周环绕的。
原文: 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

 

文章标签：
C#
关键词：
wpf模板
wpf自定义
wpf button
wpf自定义模板button闪亮
wpf自定义模板
杰克.陈
目录
相关文章
广州爱奇迪-伍华聪
|
4月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
广州爱奇迪-伍华聪
146 15
土木林森
|
4月前
|
开发者 C# 存储
WPF开发者必读：资源字典应用秘籍，轻松实现样式与模板共享，让你的WPF应用更上一层楼！
【8月更文挑战第31天】在WPF开发中，资源字典是一种强大的工具，用于共享样式、模板、图像等资源，提高了应用的可维护性和可扩展性。本文介绍了资源字典的基础知识、创建方法及最佳实践，并通过示例展示了如何在项目中有效利用资源字典，实现资源的重用和动态绑定。
土木林森
114 0
土木林森
|
4月前
|
开发者 C# 存储
WPF开发者必读：样式与模板的艺术，轻松定制UI外观，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，样式与模板是实现美观界面与一致性的关键工具。样式定义了控件如字体、颜色等属性，而模板则允许自定义控件布局与子控件，两者均可存储于`.xaml`文件中。本文介绍了样式与模板的基础知识，通过示例展示了如何创建并应用它们来改变按钮的外观，从而提升用户体验。
土木林森
102 0
广州爱奇迪-伍华聪
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
广州爱奇迪-伍华聪
99 2
VipSoft
|
4月前
|
C#
WPF 自定义可拖动标题栏
WPF 自定义可拖动标题栏
VipSoft
54 0
广州爱奇迪-伍华聪
|
4月前
|
开发框架 前端开发 C#
使用WPF开发自定义用户控件，以及实现相关自定义事件的处理
使用WPF开发自定义用户控件，以及实现相关自定义事件的处理
广州爱奇迪-伍华聪
132 0
老码识途
|
算法 C# UED
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计，同时还推出了以模板为核心的新一代设计理念。在WPF中，通过引入模板，将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类：数据模板【Data Template】和控件模板【Control Template】。
老码识途
220 8
Rick_1/2
|
C#
WPF技术之Slider控件
Slider控件是WPF中常用的用于选择范围值的控件之一。它可以通过拖动滑块来选择一个在指定范围内的数值。
Rick_1/2
450 0
WPF技术之Slider控件
Rick_1/2
|
C# Windows
WPF技术之Button控件
WPF（Windows Presentation Foundation）是用于创建 Windows 客户端应用程序的一种技术。在 WPF 中，按钮是常用的控件之一，用于触发某种行为或操作。
Rick_1/2
291 0
WPF技术之Button控件
关关长语
|
C#
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
关关长语
253 0