脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → ASP.NET → 实用技巧 → WPF实现渐变淡入淡出的登陆窗口效果

WPF实现渐变淡入淡出的登陆窗口效果

 更新时间：2014年11月08日 10:44:02   投稿：shichen2014  
这篇文章主要介绍了WPF实现渐变淡入淡出的登陆窗口效果的方法,详细讲述了该效果的实现原理与功能代码,具有一定的参考借鉴价值,需要的朋友可以参考下

本文实例讲述了WPF实现渐变淡入淡出的登陆窗口效果的方法。分享给大家供大家参考。具体实现方法如下：

1、实现原理

① 利用UIElement.OpacityMask属性，用于改变对象区域的不透明度的画笔。可以使元素的特定区域透明或部分透明，从而实现比较新颖的效果。

② OpacityMask属性接受任何画刷，可利用LinearGradientBrush线性渐变画刷，通过对渐变画刷中各颜色点加以动画处理即可。

2、渐变淡入实现

渐变淡入效果，可通过事件触发器触发Loaded事件实现，所以可以仅用前端XAML语言实现。

① 设置对象的OpacityMask属性

复制代码 代码如下:
<Grid.OpacityMask>
    <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
        <GradientStop Color="#00000000" Offset="0"/>
        <GradientStop Color="#00000000" Offset="1"/>
        <GradientStop Color="#00000000" Offset="1"/>
    </LinearGradientBrush>
</Grid.OpacityMask>

② 设置对象的事件触发器

复制代码 代码如下:
<Grid.Triggers>
    <EventTrigger RoutedEvent="Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation From="1" To="0" Duration="0:0:1.5" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"/>
                    <DoubleAnimation From="1" To="0" Duration="0:0:1" BeginTime="0:0:0.5" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Offset"/>
                    <ColorAnimation To="#FF000000" Duration="0" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Color"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Grid.Triggers>

3、渐变淡出实现
渐变淡出效果，由于事件触发器事件需要路由事件触发，所以需要使用后端代码实现。

① 准备渐变淡出的动画和画刷资源

复制代码 代码如下:
<Window.Resources>
    <Storyboard x:Key="ClosedStoryboard" Storyboard.TargetName="LoginGrid">
        <DoubleAnimation From="1" To="0" Duration="0:0:2" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"/>
        <DoubleAnimation From="1" To="0" Duration="0:0:1.5" BeginTime="0:0:0.5"Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Offset"/>
        <ColorAnimation To="#00000000" Duration="0" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Color"/>
    </Storyboard>
    <LinearGradientBrush x:Key="ClosedBrush" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="#FF000000" Offset="0"/>
        <GradientStop Color="#FF000000" Offset="1"/>
        <GradientStop Color="#FF000000" Offset="1"/>
    </LinearGradientBrush>
</Window.Resources>

② 后端通过绑定按钮的Click事件实现

复制代码 代码如下:
private void btnCancel_Click(object sender, RoutedEventArgs e)
{
    this.IsEnabled = false;

    LoginGrid.OpacityMask = this.Resources["ClosedBrush"] as LinearGradientBrush;
    Storyboard std = this.Resources["ClosedStoryboard"] as Storyboard;
    std.Completed += delegate { this.Close(); };

    std.Begin();
}

4、运行效果图如下：

 

 希望本文所述对大家的WPF程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • asp.net提取多层嵌套json数据的方法

    asp.net提取多层嵌套json数据的方法

    这篇文章主要介绍了asp.net提取多层嵌套json数据的方法,结合实例形式较为详细的分析了asp.net解析json格式数据的步骤与相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Request.UrlReferrer中文乱码解决方法

    Request.UrlReferrer中文乱码解决方法

    参考了网络大部分的解决方案，没一个能搞定的，如果穷途末路，试试下面的方法:将获得的前一页面的URL分成两段，后面的参数部分进行编码（直接对URL编码是不行的），然后再组合一下就可以了,需要的朋友可以了解下
    2012-12-12
  • asp.net 验证码生成和刷新及验证

    asp.net 验证码生成和刷新及验证

    在.NET中新建一个Web项目，添加一个.ASPX页面，取名VerifyCode.aspx, 转到其代码编辑状态，将下面的代码Copy&Paste过去就可以用了，有什么意见或问题欢迎提出^@^
    2009-10-10
  • DataTable类Clone方法与Copy方法的区别分析

    DataTable类Clone方法与Copy方法的区别分析

    初学者可能不清楚DataTable类的Clone及Copy方法的区别，查msdn，可得到如下结论
    2013-03-03
  • .Net Api 中使用Elasticsearch存储文档的方法

    .Net Api 中使用Elasticsearch存储文档的方法

    Elasticsearch 是一个分布式、高扩展、高实时的搜索与数据分析引擎，在C# 的环境中，有一个Es的官方拓展包Nest，可以让我们方便快捷的使用上Es数据库，本文重点给大家介绍.Net Api 中使用Elasticsearch存储文档的方法，感兴趣的朋友一起看看吧
    2022-01-01
  • ASP.NET Core配置文件的获取和设置

    ASP.NET Core配置文件的获取和设置

    这篇文章介绍了ASP.NET Core配置文件获取和设置的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04
  • .NET Core控制台应用ConsoleApp读取appsettings.json配置文件

    .NET Core控制台应用ConsoleApp读取appsettings.json配置文件

    这篇文章介绍了.NET Core控制台应用ConsoleApp读取appsettings.json配置文件的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-07-07
  • ASP.NET core Web中使用appsettings.json配置文件的方法

    ASP.NET core Web中使用appsettings.json配置文件的方法

    这篇文章主要给大家介绍了在ASP.NET core Web中使用appsettings.json配置文件的方法，文中给出了详细的示例代码，需要的朋友可以参考学习，下面来一起看看吧。
    2017-04-04
  • Asp.Net Core使用Ocelot结合Consul实现服务注册和发现

    Asp.Net Core使用Ocelot结合Consul实现服务注册和发现

    这篇文章介绍了Asp.Net Core使用Ocelot结合Consul实现服务注册和发现的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04
  • Asp.Net URL重写的具体实现

    Asp.Net URL重写的具体实现

    这篇文章主要介绍了Asp.Net URL重写的具体实现，有需要的朋友可以参考一下
    2014-01-01

最新评论