Create a Snowfall Effect in Windows Phone 7

Introduction

Here we will explore how to create a snowfall effect in Windows Phone 7. In this article we are going to display the snowfall effect by creating a Windows Phone user control; whenever we run the application, we will see some snow flakes moving from upwards to downwards as well. Further in details we have to take a user control inside that we will create the design of a flake which will be like as snow flakes. Windows Phone 7 is the application tool for developing the phone application and further we can use them easily. Snowfall effects, as you know, are small snow flakes that move slowly downwards. In this article we also see how to use a Windows Phone user control inside the Windows Phone 7; it's also an interesting task. It's also a better functionality to implement the snowfall effect through programming scenario. Further to see such type of task you have to follow the steps given below.

Step 1: In this step we have to take a new Windows Phone application:

Go to New-->Project
Select template Silverlight for Windows Phone
Choose a Windows Phone application

Step 2: In this step you have to use a Windows Phone user control; let us see from where you have to add it and see the figures given below.

Go to solution explorer
Right click on the Windows Phone 7 application
Add new project
Select the Windows Phone User Control
Click OK

Select new item

Choose the third item named Windows Phone User Control and click OK.

Step 3: Now you will see the design of the usercontrol page; let us see the page given below:

Step 4: In this step you will see the code for the WindowPhoneControl1.xaml.cs file

Step 5: In this step we will have to see the MainPage.xaml file code.

Code:

<phone:PhoneApplicationPage
x:Class="snowfall1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" FontFamily="Comic Sans MS" FontSize="36" Foreground="#FFE6A7B4" />
<TextBlock x:Name="PageTitle" Text="wp7 snowfall" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Comic Sans MS" Foreground="#FFB7FFD0" />
</StackPanel>
<Border Grid.Row="1" BorderThickness="{StaticResource PhoneBorderThickness}" BorderBrush="{StaticResource PhoneBorderBrush}">
<Canvas x:Name="ContentCanvas" Background="{StaticResource PhoneAccentBrush}"
ManipulationDelta="OnManipulationDelta">
<Canvas.Clip>
<RectangleGeometry Rect="0, 0, 474, 611"/>
</Canvas.Clip>
</Canvas>
</Border>
</Grid>
</phone:PhoneApplicationPage>

Step 6: In this step we will see the code for the MainPage.xaml.cs file which is given below.

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Threading;
namespace snowfall1
{
public partial class MainPage : PhoneApplicationPage
{
private readonly Random random = new Random();
private readonly DispatcherTimer timer = new DispatcherTimer
{
Interval = TimeSpan.FromMilliseconds(50)
};

private Point currentTransform = new Point(0, 0);

public MainPage()
{
InitializeComponent();
Loaded += OnLoaded;
timer.Tick += OnTimerTicker;
}

private void OnLoaded(object sender, RoutedEventArgs e)
{
CreateInitialSnowflakes();

timer.Start();
}
private void CreateInitialSnowflakes()
{
for (int i = 0; i < 25; i++)
{
var left = random.NextDouble() * ContentCanvas.ActualWidth;
var top = random.NextDouble() * ContentCanvas.ActualHeight;
var size = random.Next(10, 50);
CreateSnowflake(left, top, size);
}
}

private void CreateSnowflake(double left, double top, double size)
{
var snowflake = new WindowsPhoneControl1
{
Width = size,
Height = size
};
Canvas.SetLeft(snowflake, left);
Canvas.SetTop(snowflake, top);
ContentCanvas.Children.Add(snowflake);
}

private void OnTimerTicker(object sender, EventArgs e)
{
var snowflakes = ContentCanvas.Children.OfType<WindowsPhoneControl1>().ToList();
foreach (var snowflake in snowflakes)
{
snowflake.UpdatePosition(currentTransform);

if (snowflake.IsOutOfBounds(ActualWidth, ActualHeight))
{
ContentCanvas.Children.Remove(snowflake);
AddNewSnowflake();
}
currentTransform.X = currentTransform.X * 0.999d;
currentTransform.Y = currentTransform.Y * 0.999d;
}
}
private void AddNewSnowflake()
{
var left = random.NextDouble() * ContentCanvas.ActualWidth;
var size = random.Next(10, 50);
CreateSnowflake(left, 0, size);
}

protected void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
currentTransform = e.CumulativeManipulation.Translation;
}
}
}

Step 7: In this step we will see the design of the MainPage.xaml page which is shown in the figure given below.

Step 8: In this step we will see the output window, which is shown below.

Output : In this output we will see the that flakes are moving like a snowfall from upwards to downwards.