WPF implementation of the landing window effect of gradient fade-practical tips

The example in this article describes the way WPF implements the landing window effect of gradient fading. Share to everyone for your reference. The implementation methods are as follows:

1. Principle of realization

① uses the Uielement.opacitymask property to change the opacity of the object's area. You can make a specific area of an element transparent or partially transparent to achieve a more novel effect.

②opacitymask Properties Accept any brush, you can use the LinearGradientBrush linear gradient brush, through the gradient brush to animate the color points.

2, gradient fade in implementation

The gradient fade effect, which triggers the loaded event implementation through an event trigger, can be implemented using only the front-end XAML language.

① set the OpacityMask property of an object

Copy Code code as follows:

<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>

② set an event trigger for an object

Copy Code code as follows:

<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, the gradual fade out realizes
Gradient fade effect, which requires a backend code implementation because the event trigger event requires a routed event trigger.

① prepare gradient fade animation and brush resources

Copy Code code as follows:

<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>

② The back end is implemented by the Click event of the Bind button

Copy Code code as follows:

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, the Operation effect chart is as follows:

I hope this article will help you with your WPF programming.