Create a Snowfall Effect in Windows Phone 7

Here we will explore how to 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_1fig.jpg

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

Step_2_1fig.jpg

Select new item

Step_2_2fig.jpg

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

Step_2_3fig.jpg

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

step_4fig.jpg

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

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace snowfall1
{
    public partial class WindowsPhoneControl1 : UserControl
    {
        public WindowsPhoneControl1()
        {
            InitializeComponent();
        }
        public void UpdatePosition(Point currentTransform)
        {
            var top = Canvas.GetTop(this);
            var left = Canvas.GetLeft(this);
            Canvas.SetTop(this, top + 5.0d + (currentTransform.Y * 0.1d));
            Canvas.SetLeft(this, left + (currentTransform.X * 0.1d));
        }
        public bool IsOutOfBounds(double width, double height)
        {
            var left = Canvas.GetLeft(this);
            var top = Canvas.GetTop(this);
            if (left < -ActualWidth)
                return true;
            if (left > width + ActualWidth)
                return true;
            if (top > height - ActualHeight)
                return true;
            return false;
        }
    }
}

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">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <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_8fig.jpg

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.

Step_9fig.jpg