Posted by: Zeeshan Amjad | August 26, 2009

Creating Torn Paper effect in WPF using C#


Creating torn paper effect is not very difficult in WPF. We have already seen an example of creating non rectangular window in WPF. The main idea of that example is to create one border with rounder corner, set it as a content of main window, set main window as transparent and set its style to none.

For giving torn paper effect we are going to create a polygon instead of simple border and then follow the same rule. i.e. set that polygon as a content of main widow and set main window transparent and set its style to none. One additional thing we have to give is generate the points of polygon randomly to give the torn effect.

We have to specify initially that how many vertical point do we need, how many horizontal points do we need and how deep the cut can be. Just for simplicity we hard corded this stuff along with window height and width, but it can be set programmatically too. Here is a simple code to do this.

  1: int HorizantaRegions = 96;
  2: int VerticalRegions = 48;
  3: int DepthDistance = 12;
  4: Width = 400;
  5: Height = 300;

Now we are going to generate points for each sides and store them in PointCollection class. Once we are done with it we create a Polygon set its fill color and assign these collection of point to it.

Here is a complete code of this program.

  1: using System;
  2: using System.Windows;
  3: using System.Windows.Controls;
  4: using System.Windows.Shapes;
  5: using System.Windows.Media;
  6: 
  7: namespace TornPaper
  8: {
  9:     public class TornWindow : Window
 10:     {
 11:         public TornWindow()
 12:         {
 13:             int HorizantaRegions = 96;
 14:             int VerticalRegions = 48;
 15:             int DepthDistance = 12;
 16:             Width = 400;
 17:             Height = 300;
 18: 
 19:             Background = Brushes.Transparent;
 20:             WindowStyle = WindowStyle.None;
 21:             AllowsTransparency = true;
 22: 
 23:             int iHRegionWidth = (int)Width / HorizantaRegions;
 24:             int iVRegionWidth = (int)Height / VerticalRegions;
 25: 
 26:             Random random = new Random();
 27:             PointCollection pc = new PointCollection();
 28:             int iPoint = 1;
 29: 
 30:             pc.Add(new Point(0, 0));
 31: 
 32:             // top horizontal
 33:             for (int i = 1; i < HorizantaRegions; ++i)
 34:             {
 35:                 int x = (int)pc[iPoint - 1].X + iHRegionWidth;
 36:                 int y = 0 + random.Next(0, DepthDistance);
 37:                 pc.Add(new Point(x, y));
 38:                 ++iPoint;
 39:             }
 40: 
 41:             // right vertical
 42:             for (int i = 1; i < VerticalRegions; ++i)
 43:             {
 44:                 int x = (int)Width - random.Next(0, DepthDistance);
 45:                 int y = (int)pc[iPoint - 1].Y + iVRegionWidth;
 46:                 pc.Add(new Point(x, y));
 47:                 ++iPoint;
 48:             }
 49: 
 50:             // bottom horizontal
 51:             for (int i = 1; i < HorizantaRegions; ++i)
 52:             {
 53:                 int x = (int)pc[iPoint - 1].X - iHRegionWidth;
 54:                 int y = (int)Height - random.Next(0, DepthDistance);
 55:                 pc.Add(new Point(x, y));
 56:                 ++iPoint;
 57:             }
 58: 
 59:             // left vertical
 60:             for (int i = 1; i < VerticalRegions; ++i)
 61:             {
 62:                 int x = 0 + random.Next(0, DepthDistance);
 63:                 int y = (int)pc[iPoint - 1].Y - iVRegionWidth;
 64:                 pc.Add(new Point(x, y));
 65:                 ++iPoint;
 66:             }
 67:             
 68:             Polygon poly = new Polygon();
 69: 
 70:             poly.Fill = Brushes.Blue;
 71:             poly.Points = pc;
 72: 
 73:             Content = poly;
 74:         }
 75:     }
 76: 
 77:     public class TornPaperApplication
 78:     {
 79:         [STAThread]
 80:         public static void Main()
 81:         {
 82:             TornWindow win = new TornWindow();
 83: 
 84:             Application app = new Application();
 85:             app.Run(win);
 86:         }
 87:     }
 88: }
 89: 

The output of this program can be different each time you run the program due to random numbers. Here is the output of the program i got when i ran the program.

TornPaperWpf

Advertisements

Responses

  1. […] View original here:  Creating Torn Paper effect in WPF using C# « Zeeshan Amjad's Blog […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: