Blog


3D Animations Using Pure CSS3

What determined me to write this post and a few others was this page (works in Chrome and Safari only). Amazing what you can do by using only CSS. So, let’s take a look under the hood – the css for that effect looks like this:

#movieposters li { display:inline; float:left;
	-webkit-perspective: 500; -webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }
#movieposters li:hover { -webkit-perspective: 5000; }
	
#movieposters li img { border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);
	-moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;
	-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }
#movieposters li:hover img { -webkit-transform: rotateY(0deg); }

Kind of messy. But if we strip out the borders and shadows and arrange the code a bit, you’ll see it’s actually not that complicated.

#movieposters li { 
	display:inline; float:left;
	-webkit-perspective: 500; 
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; 
	-webkit-transition-duration: 0.5s; 
}

#movieposters li:hover { 
	-webkit-perspective: 5000; 
}
	
#movieposters li img { 
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform; 
	-webkit-transition-duration: 0.5s; 
}
#movieposters li:hover img { 
	-webkit-transform: rotateY(0deg); 
}

As you can see what’s being done are basically two transitions:

  • a perspective transition on the list item from a value of 500 to a value of 5000 on hover with a duration of 0.5s
  • and a rotate transform transition on the image inside the list item, with the same duration, from 30 degrees to 0 degrees

You can play with the values and see what other nice effects you can obtain. Maybe even leave a comment with a link to the nice effect that you’ve obtained.

Making it work in Firefox

Now what really intrigued me was the fact that it didn´t work in Firefox. Why? After doing a couple of searches on Google the answer became obvious, -webkit- commands are for webkit-based browsers while Firefox requires commands prefixed with -moz-. I guess I should’ve known that already…

So I’ve added new lines for each command and replaced the -webkit- with -moz- thinking that it will work. It did, except for the fact that it had no animation. Couple of searches later and still no answer, so in the true spirit of a developer I typed in stackoverflow.com and asked my question. A couple of hours later I had my first answer and fortunately it held the solution to my problem (check it out here if you want). The transition-property had to be a -moz- property as well. Simple properties like transform or perspective don’t work like they do in webkit so I had to use -moz-transform and -moz-perspective instead.

So here’s the complete CSS code that I’ve ended using:

#movieposters li { 
	display:inline; float:left;
	-webkit-perspective: 500; 
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; 
	-webkit-transition-duration: 0.5s; 
	-moz-transition-duration: 0.5s; 
	-moz-perspective: 500; 
	-moz-transform-style: preserve-3d;
	-moz-transition-property: -moz-perspective; 
}

#movieposters li:hover { 
	-webkit-perspective: 5000; 
	-moz-perspective: 5000; 
}
		
#movieposters li img { 
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform; 
	-webkit-transition-duration: 0.5s; 
	-moz-transition-duration: 0.5s; 
	-moz-transform: rotateY(30deg);
	-moz-transition-property: -moz-transform; 				
	width: 210px;
}

#movieposters li:hover img { 
	-webkit-transform: rotateY(0deg); 
	-moz-transform: rotateY(0deg);
}

Also, you can check out a demo here: 3D CSS Animation




CSS3 Textured / Noisy Gradient Background

Textured gradient backgrounds are made by using gradients and noise images. For CSS gradients you can use a generator like this one. For noise images, again, you can use this noise generator.

The trick for making textured backgrounds lays in combining the CSS background properties. Instead of using only gradients as a background or only images, why not combine them like this:

background-image: url('../images/noise.png'), -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background-image: url('../images/noise.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background-image: url('../images/noise.png'), -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background-image: url('../images/noise.png'), -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background-image: url('../images/noise.png'), -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background-image: url('../images/noise.png'), linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */

Yea, it’s possible. Just use the background-image property as usual, add a semicolon and then a gradient. Use the noise generator to generate the image and the gradient generator for creating your desired gradient.

You can also check out a demo here: Textured / Noisy Gradient Background Demo




CSS3 Custom Fonts

CSS3 allows the use of custom fonts trough the @font-face rule. They are really easy to add and the syntax looks like this:

@font-face {
	font-family: someFont;
	src: url('path/font.ttf');
}

This declares a font for use within your web page. An example would be:

@font-face {
    font-family: CODEBold;
    src: url('../fonts/CODEBold.otf');
}

Now to apply the custom font to your text you can use the font-family property:

<h1 style="font-family: CODEBold;">Start Debugging</h1>

A great source for custom fonts would be dafont.com
Check out a demo here: Custom Fonts Demo




Metro TimeBlock

Metro TimeBlock is a time display control that I’ve made which should allow you to display time in any color and with any background you want. Size is also adjustable and you can choose to display either the current time or a time of your own.

Metro TimeBlock

Properties of the control:

Time – takes in any DateTime object. The control will display the Time you provide within that DateTime object. Leave blank if you want to display the current time.

Spacer – this is the string to display between the hours and minutes and between the minutes and seconds. Use spacers like “:” or ” “.

Size – you can choose from Small, Normal, Medium, MediumLarge, Large, ExtraLarge, ExtraExtraLarge and Huge. Chose to do this instead of allowing FontSize because this way I can also control the way the background blocks look.

Foreground – tells the control what color to use to display the time.

Fill – sets the background color of the control (the square-like blocks).

That’s about it. If you got any problems with it / need help, leave a comment below. The download link is also below and it contains both the control and a couple of samples.

Download for Windows Phone




How to install Windows 8 using a USB drive

To get you started you will need an ISO image of Windows 8 and also the Windows 7 USB / DVD Donwload Tool which will help you put that image on the USB stick. You can download both of them by clicking their respective images below.

Windows 8 Developer Preview 64bitWindows USB Tool

Install the Windows 7 USb Tool after download finishes. Don’t worry about the name of the program which says Windows 7, it works just fine with Windows 8 as well.

Windows Format WindowNow that you have all the needed files insert your USB drive into the PC, right click it and select format. Most tutorial’s I’ve seen say to format it to FAT32 otherwise it will not work – tho when I use the tool to copy the windows files to the USB drive, the tool formats my drive to NTFS. Strange, but whatever.

Quick format it as FAT32 and don’t forget to backup your data!

Now that you’ve formatted the USB drive open up the Windows 7 USb Tool, hit Browse and select the ISO image you’ve just downloaded.

Windows USB Tool Choose an ISO File

Click Next and on the next screen asking you to select the media type choose USB device. As you can see you are also given the option of writing the image directly to a DVD. For this how-to we will stick with the USB.

Windows USb Tool Choose Media Type

Choose the USB device on which you want the tool to put the install files and hit Begin copying.

Windows USB Tool Choose USb Drive

The tool will now start copying the windows install files to your USB drives.

Windows USB Tool Copying Files

Once the entire process is complete and if you got no errors during it restart your computer, bring up your boot menu (F12 in my case – during POST) and select the USB drive. If your USB drive doesn’t show up in that list, go into your BIOS and make sure that Legacy USB Support is Enabled.

Notes:

you can not make a bootable USB drive with 64bit Windows on it if you are currently running a 32bit operating system. You need to have a 64bit operating system in order to make a bootable USB drive with 64bit windows on it.

– the USB drive has to be large enough. 4 GB will do for the simple 32bit and 64bit versions but for the 64bit containing the developer tools you will need a 8 GB drive – because the size of the ISO alone is 4.7 GB.

– make sure you backup the data you got on that USB drive before formatting it. Otherwise it-s lost. And also, carefully choose the partition on which you install the OS, not to overwrite your good Windows install by mistake – because in this case also, all data will be lost.

And one last thing: Published from a fresh copy of Windows 8. So you know for sure that it works.




Metro and WinRT Webinar on February 2nd

Are you a Silverlight / WPF developer? Want to start developing for Windows 8 as well?  If that’s the case, this upcoming SilverlightShow webinar is guaranteed to give you a jump start. The webinar will teach you how to use your Silverlight / WPF experience to build amazing Windows 8 apps by presenting the similarities between Silverlight / WPF and XAML based Metro apps. This will be done by looking at a working Metro app containing most of the things you were used to in Silverlight / WPF.

Also, as usual, SilverlightShow is giving away 6 eBooks:

Good luck!

Presenter: Gill Cleer
Webinar registration page: Metro and WinRT for the Silverlight/WPF Developer
More details about the webinar: SilverlightShow




Extension Method: Hex To Color

Below you have an extension method that can help you convert any hex color code to a Color object.

public static Color ToColor(this string hexColor)
{
   return Color.FromArgb(
      Convert.ToByte(hexColor.ToString().Substring(1, 2), 16),
      Convert.ToByte(hexColor.ToString().Substring(3, 2), 16),
      Convert.ToByte(hexColor.ToString().Substring(5, 2), 16),
      Convert.ToByte(hexColor.ToString().Substring(7, 2), 16));
}

The method above can only convert 8 characters ARGB color codes.
In order to convert simple RGB codes too we will check for the length of the string (9 = ARGB and 7 = RGB) and in case it’s 7 we will add the alpha to our string as FF ( 255 – opaque) and only then return the color.

public static Color ToColor(this string hexColor)
{
   string tempHexColor = string.Empty;
   if (hexColor.Length == 7)
      tempHexColor = "#FF" + hexColor.Substring(1,6);
   return Color.FromArgb(
      Convert.ToByte(tempHexColor.Substring(1, 2), 16),
      Convert.ToByte(tempHexColor.Substring(3, 2), 16),
      Convert.ToByte(tempHexColor.Substring(5, 2), 16),
      Convert.ToByte(tempHexColor.Substring(7, 2), 16));
}

We should also do something in case the hex color code is not actually a hex color code. So add another if statement after the one we added already and check again for the length of the string; if it’s not equal to 9 then it’s not good so feel free to return any color you want (I will return transparent). The final method looks like this:

public static Color ToColor(this string hexColor)
{
   string tempHexColor = string.Empty;
   if (tempHexColor.Length == 7)
      tempHexColor = "#FF" + hexColor.Substring(1,6);
   if (tempHexColor.Length != 9)
      tempHexColor = "#00000000";
   return Color.FromArgb(
      Convert.ToByte(tempHexColor.Substring(1, 2), 16),
      Convert.ToByte(tempHexColor.Substring(3, 2), 16),
      Convert.ToByte(tempHexColor.Substring(5, 2), 16),
      Convert.ToByte(tempHexColor.Substring(7, 2), 16));
}

How to use it:

string myHexString = "#78196DFD";
Color myColor = new Color();
mycolor = myHexString.ToColor();



Windows Phone 7: Getting the current GPS location from the device

Getting the current GPS location on a Windows Phone device is rather easy. In order to start you will need to add a reference to System.Device in your project and then a using statement inside the class that you want to get the geo-location.

using System.Device.Location;

Next we would need to declare an object of type GeoCoordinateWatcher. For better access I will declare it as a class member and not as a local variable inside some method.

GeoCoordinateWatcher geoWatcher = null;

Next to do is: create an instance of GeoCoordinateWatcher, create an event handler for the position changed event and then start reading the data. So, to create an instance of GeoCoordinateWatcher go to the class constructor and copy the following code:

geoWatcher = new GeoCoordinateWatcher();

This will create a GeoCoordinateWatcher object in the variable we previously declared. In case the location you need has to have a certain accuracy, the class provides you with an overload for the contructor which takes your desired accuracy as a parameter.

geoWatcher = new GeoCoordinateWatcher(GeoPositionAccuracy.High);

Next create an event handler for the PositionChanged event. You can do this by typing geoWatcher.PositionChanged += and then press the TAB key twice; this will automatically create the event handler for you. After creating the event handler, all you need to do is use geoWatcher.Start() to start reading coordinates. Now your code should look like this:

GeoCoordinateWatcher geoWatcher = null;
public MainPage()
{
   InitializeComponent();
   geoWatcher = new GeoCoordinateWatcher(GeoPositionAccuracy.High);
   geoWatcher.PositionChanged += new EventHandler<GeoPositionChangedEventArgs<GeoCoordinate>>(geoWatcher_PositionChanged);
   geoWatcher.Start();
}

void geoWatcher_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e)
{
   throw new NotImplementedException();
}

Next we want to get the coordinates for our location. That is really simple. You can get them in a GeoCoordinate object by accesing e.Position.Location in the event handler, or if you want to get them as individual values you can save e.Position.Location.Latitude, e.Position.Location.Longitude and e.Position.Location.Altitude in three double variables. Example below:

void geoWatcher_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e)
{
   GeoCoordinate currentLocation = e.Position.Location;
   double currentAltitude = e.Position.Location.Altitude;
   double currentLongitude = e.Position.Location.Longitude;
   double currnetLatitude = e.Position.Location.Latitude;
}

That’s it. Now if you want to get rid of the object and stop reading the current location after reading the first set of values you can simply add the following lines of code to the event handler. Otherwise you can create a method for it and call it whenever you wish.

geoWatcher.Stop();
geoWatcher.Dispose();
geoWatcher = null;

In order to test the code I just wrote I will add three textboxes to my application in which I will write the data I read in them. You can do the same. Anyways that’s it. If you got any questions leave a comment and I’ll answer them asap.

You can get the project from here:Download for Windows Phone




Windows 8 Demo from CES 2012

  • January 15, 2012
  • CES, Metro, ...

This is the demo Microsoft made at CES this year demonstrating some of the new features of the upcoming Windows 8. One of the features that caught my attention was the Windows Store which they say it will open in late February. A new build of Windows 8 is also said to come in late February.

Also, in the video there’s a small presentation of a HTML5 app called Cut the Rope – really nice app in my opinion. Can’t wait to try it out myself.




How To: Create your own code snippets

Okay, so what I will do here is explain you how to create your own code snippets to use in Visual Studio 2010 without using any add-ins related to snippet designing. A post on snippet designers / explorers and how you can use them to build better snippets faster will come sometime next week I believe, but this time I can’t promise.

PART 1: CREATING A SIMPLE CODE SNIPPET

So let’s get started. Open up your Visual Studio and go to File – New File (or Ctrl + N) and create a new XML file. Don’t worry about the file’s name at this point as it is not that important. An XML file with a line of code will automatically be generated for you. So, the first thing we need to do in this brand new file is to add the CodeSnippets namespace and a CodeSnippet element to it right after the first line; to do so copy-paste the code below:

<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
   <CodeSnippet Format="1.0.0">
   </CodeSnippet>
</CodeSnippets>

Now we can really start work on our snippet. First thing we need to do is set up the header of our snippet. The header can contain various information like the Title, Description, Author,  Keywords in case you want to make your snippet available online, a Shortcut for your snipped and also a HelpUrl where people can go and ask for help in case something doesn’t work as expected. I suggest you always add a title and a description to your snippets even if they are not mandatory.

Here’s an example of a header containing all possible elements:

<Header>
   <Title>MessageBox</Title>
   <Description>Opens up a message box displaying "Hello World!".</Description>
   <Author>StartDebugging.net</Author>
   <Keywords>
      <Keyword>messagebox</Keyword>
      <Keyword>helloworld</Keyword>
   </Keywords>
   <Shortcut>hellobox</Shortcut>
   <HelpUrl>http://startdebugging.net</HelpUrl>
</Header>

Now that the header is set up, we can start writing the code. First thing here is creating the actual Snippet element right after the end of the Header element. Your code should look like this now:

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
   <CodeSnippet Format="1.0.0">
      <Header>
         ...
      </Header>
      <Snippet>
      </Snippet>
   </CodeSnippet>
</CodeSnippets>

The code which we want the snipped to insert must be added in the Code element of the Snippet between <![CDATA[ and ]]> brackets. In this example, as you’ve probably figured out from the description, our code snippet will simply display a message box containing the text “Hello World!”.  Bellow you can see how the Code element of the snippet looks like after adding the code.

<Snippet>
   <Code Language="CSharp">
      <![CDATA[MessageBox.Show("Hello World!");]]>
   </Code>
</Snippet>

As you can see above, my Code element has a property named Language which is set to CSharp. Make sure that you set that language accordingly. You can write code snippets for VB, CSharp, VJSharp and XML.

Also, another element which you can add to the Snippet is References. Unfortunately this is not supported for C# so you will have to add them manually in our case. Otherwise, here’s how you can add a reference:

<Snippet>
   <References>
      <Reference>
         <Assembly>System.Windows.Forms.dll</Assembly>
      </Reference>
   </References>
   <Code Language="VB">
      ...
   </Code>
</Snippet>

So here’s the entire code of the snippet:

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
   <CodeSnippet Format="1.0.0">
      <Header>
         <Title>MessageBox</Title>
         <Description>Opens up a message box displaying "Hello World!".</Description>
         <Author>StartDebugging.net</Author>
         <Keywords>
            <Keyword>messagebox</Keyword>
            <Keyword>helloworld</Keyword>
         </Keywords>
         <Shortcut>hellobox</Shortcut>
         <HelpUrl>http://startdebugging.net</HelpUrl>
      </Header>
      <Snippet>
         <Code Language="CSharp">
            <![CDATA[MessageBox.Show("Hello World");]]>
         </Code>
      </Snippet>
   </CodeSnippet>
</CodeSnippets>

Now that we’re done writing the snippet it’s time to save it. So File – Save as to the following path:

Drive:\...\Documents\Visual Studio Version\Code Snippets\Language\

which in our case is

Drive:\...\Documents\Visual Studio 2010\Code Snippets\Visual C#\

using the .snippet file extension – for example messagebox.snippet.

Now that you’ve saved it, it’s time to add it to your Visual Studio 2010. So go to Tools – Code Snippets Manager (or Ctrl + K, Ctrl + B), click on Import  and open the snippet we previously saved. After opening it you will be asked to which languages to add it, in our case simply check Visual C#.

Create a new project or open an already existing one (C# project) and go somewhere where you can write some C# code. Now, inserting a snippet can be done two ways: one – hit Ctrl + K, Ctrl + X, select Visual C# (or any other language for that matter) and then select the snippet you want to insert (ours is called MessageBox – we set this name using the Title tag); – second way is by typing the shortcut (ours is called hellobox – we set this name using the Shortcut tag in the header) and pressing double TAB. And there you go, your snippet is inserted.

PART 2: USING LITERALS

Now that you know how to create, save and use a code snippet it’s time to learn how to create a little bit more complex ones – and here I’m referring to literals.

Since I couldn’t think of a better definition for literals, here’s the one I found on msdn:

The Literal element is used to identify a replacement for a piece of code that is entirely contained within the snippet, but will likely be customized after it is inserted into the code.

So let’s say you have a code snippet in which you use a variable name 10 times. You insert that code snippet into your code and you decide that the variable name must be changed so you go ahead and replace the old variable name with the new variable name in all 10 cases. What literals allow you to do is define a piece of code inside your snippet which you can use several times, and after you insert that snippet into your code if you change that defined piece of code in one place, then it will change in all the other places where you used it. You can think of them as variables if you want.

So, let’s put them in practice. Let’s create a code snippet for inserting dependency properties in our silverlight projects. The code for registering a dependency property with a property changed event handler is the one below:

public bool IsSelected
{
   get { return (bool)GetValue(IsSelectedProperty); }
   set { SetValue(IsSelectedProperty, value); }
}
public static readonly DependencyProperty IsSelectedProperty = DependencyProperty.Register("IsSelected", typeof(Boolean), typeof(Page), new PropertyMetadata(OnIsSelectedPropertyChanged));
private static void OnIsSelectedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
   Page control = d as Page;
}

As you can see, the property name is used several times as well as the property type, so what we’re gonna do is define a literal for each of them + one literal for the class name. They look like this:

<Snippet>
   <Declarations>
      <Literal>
         <ID>PropertyName</ID>
         <Default>PropertyName</Default>
         <ToolTip>The name of the dependency property.</ToolTip>
      </Literal>
      <Literal>
         <ID>PropertyType</ID>
         <Default>PropertyType</Default>
         <ToolTip>The type of the dependency property.</ToolTip>
      </Literal>
      <Literal>
         <ID>ClassName</ID>
         <Default>ClassName</Default>
         <ToolTip>The name of the owner class.</ToolTip>
      </Literal>
   </Declarations>
</Snippet>

As you can see, each of my literals has three fields: ID – used to identify replaceable portions of code, Default – representing the default value of the literal when the snippet is inserted and ToolTip which is a small description of he literal which shows up at mouse over.

Having these literals set up what we need to next is replace the already defined names and types in our code with literals. This is done by using $ID$ instead of the predefined value (ex: $PropertyName$, $PropertyType$, $ClassName$).

This is how your code should look like inside the snippet after adding the literals:

<Code Language="CSharp">
   <![CDATA[// Defines a DependencyProperty named $PropertyName$ of type $PropertyType$ for the $ClassName$ class.
   public $PropertyType$ $PropertyName$
   {
      get { return ($PropertyType$)GetValue($PropertyName$Property); }
      set { SetValue($PropertyName$Property, value); }
   }
   public static readonly DependencyProperty $PropertyName$Property = DependencyProperty.Register("$PropertyName$", typeof($PropertyType$), typeof($ClassName$), new PropertyMetadata(On$PropertyName$PropertyChanged));
   private static void On$PropertyName$PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
   {
      $ClassName$ control = d as $ClassName$;
   }]]>
</Code>

And here is the complete code:

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
   <CodeSnippet Format="1.0.0">
      <Header>
         <Title>sldp</Title>
         <Description>Defines a dependency property to use in Silverlight.</Description>
         <Author>StartDebugging.net</Author>
         <Keywords>
            <Keyword>silverlight</Keyword>
            <Keyword>dependencyproperty</Keyword>
         </Keywords>
         <Shortcut>sldp</Shortcut>
         <HelpUrl>http://startdebugging.net</HelpUrl>
      </Header>
      <Snippet>
         <Declarations>
            <Literal>
               <ID>PropertyName</ID>
               <Default>PropertyName</Default>
               <ToolTip>The name of the dependency property.</ToolTip>
            </Literal>
            <Literal>
               <ID>PropertyType</ID>
               <Default>PropertyType</Default>
               <ToolTip>The type of the dependency property.</ToolTip>
            </Literal>
            <Literal>
               <ID>ClassName</ID>
               <Default>ClassName</Default>
               <ToolTip>The name of the owner class.</ToolTip>
            </Literal>
         </Declarations>
         <Code Language="CSharp">
            <![CDATA[// Defines a DependencyProperty named $PropertyName$ of type $PropertyType$ for the $ClassName$ class.
            public $PropertyType$ $PropertyName$
            {
               get { return ($PropertyType$)GetValue($PropertyName$Property); }
               set { SetValue($PropertyName$Property, value); }
            }
            public static readonly DependencyProperty $PropertyName$Property = DependencyProperty.Register("$PropertyName$", typeof($PropertyType$), typeof($ClassName$), new PropertyMetadata(On$PropertyName$PropertyChanged));
            private static void On$PropertyName$PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
            {
               $ClassName$ control = d as $ClassName$;
            }]]>
         </Code>
      </Snippet>
   </CodeSnippet>
</CodeSnippets>