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程序设计有所帮助。