微客导航 » 文章资讯 » WPF实现渐变淡入淡出的登陆窗口效果

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

2024-04-06 22:27:02 348

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

1、实现原理

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

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

2、渐变淡入实现

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

①设置对象的OpacityMask属性

<Grid.OpacityMask>

   <LinearGradientBrushStartPoint="0.5,1"EndPoint="0.5,0">

       <GradientStopColor="#00000000"Offset="0"/>

       <GradientStopColor="#00000000"Offset="1"/>

       <GradientStopColor="#00000000"Offset="1"/>

   </LinearGradientBrush>

</Grid.OpacityMask>

②设置对象的事件触发器

<Grid.Triggers>

   <EventTriggerRoutedEvent="Loaded">

       <EventTrigger.Actions>

           <BeginStoryboard>

               <Storyboard>

                   <DoubleAnimationFrom="1"To="0"Duration="0:0:1.5"Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"/>

                   <DoubleAnimationFrom="1"To="0"Duration="0:0:1"BeginTime="0:0:0.5"Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Offset"/>

                   <ColorAnimationTo="#FF000000"Duration="0"Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Color"/>

               </Storyboard>

           </BeginStoryboard>

       </EventTrigger.Actions>

   </EventTrigger>

</Grid.Triggers>

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

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

<Window.Resources>

   <Storyboardx:Key="ClosedStoryboard"Storyboard.TargetName="LoginGrid">

       <DoubleAnimationFrom="1"To="0"Duration="0:0:2"Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"/>

       <DoubleAnimationFrom="1"To="0"Duration="0:0:1.5"BeginTime="0:0:0.5"Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Offset"/>

       <ColorAnimationTo="#00000000"Duration="0"Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Color"/>

   </Storyboard>

   <LinearGradientBrushx:Key="ClosedBrush"StartPoint="0.5,0"EndPoint="0.5,1">

       <GradientStopColor="#FF000000"Offset="0"/>

       <GradientStopColor="#FF000000"Offset="1"/>

       <GradientStopColor="#FF000000"Offset="1"/>

   </LinearGradientBrush>

</Window.Resources>

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

privatevoidbtnCancel_Click(objectsender,RoutedEventArgse)

{

   this.IsEnabled=false;

LoginGrid.OpacityMask=this.Resources["ClosedBrush"]asLinearGradientBrush; Storyboardstd=this.Resources["ClosedStoryboard"]asStoryboard; std.Completed+=delegate{this.Close();};

std.Begin(); }

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐