DEV Community

Cover image for Add some snow in your WPF apps
Marplex
Marplex

Posted on

Add some snow in your WPF apps

I always loved how Telegram changes its style during Christmas and winter. And I wanted it too on some of WPF apps that I maintain.

So I started building WpfSnowfall, a WPF snowfall user control. It is super simple to use and fully customizable, it even comes with different types of snowflakes (what a feature)!

You can use it to add some detail and quality on your apps, adding a touch of snow during winter times.

Now, show me the code!

1) Import WpfSnowfall from NuGet

dotnet add package WpfSnowfall --version 1.0.0
Enter fullscreen mode Exit fullscreen mode

2) Profit

<sf:Snowfall
    EmissionRate="5"
    Fill="White"
    ScaleFactor="1.1"
    OpacityFactor="1"
    ParticleSpeed="1" />
Enter fullscreen mode Exit fullscreen mode

That's it! You can configure the snowflake color, opacity, speed, size and amount.


Behind the scenes

Under the hood, snowflakes are rendered as vectors. They are animated separately using the good old Storyboard and animations from System.Windows.Media.Animation.

Basically, here's the simple version of the entire user control:

//Initial snowflake transform
RotateTransform rotateTransform = new(rotateAmount);
ScaleTransform scaleTransform = new(scale, scale);
TranslateTransform translateTransform = new(initialX, initialY);

//Spawn snowflake
var flake = Snowflake.Generate();
flake.RenderTransform = new TransformGroup
{
    Children = new TransformCollection { rotateTransform, scaleTransform, translateTransform }
};

Children.Add(flake);

//Create transform animations
var xAnimation = GenerateAnimation(xAmount, duration, flake, "RenderTransform.Children[2].X");
var yAnimation = GenerateAnimation(yAmount, duration, flake, "RenderTransform.Children[2].Y");
var rotateAnimation = GenerateAnimation(rotateAmount, duration, flake, "RenderTransform.Children[0].Angle");

//Start the animations
Storyboard story = new();
story.Children.Add(xAnimation);
story.Children.Add(yAnimation);
story.Children.Add(rotateAnimation);
flake.Loaded += (sender, args) => story.Begin();

//Remove snowflake when animation stops
story.Completed += (sender, e) => Children.Remove(flake);
Enter fullscreen mode Exit fullscreen mode

WpfSnowfall is available on GitHub and licensed under the MIT license, so do whatever you want (or leave a star 😀)!

Top comments (0)