INotifyPropertyChanged, WinRT and Shortcuts

INotifyPropertyChanged interface is the key to data binding in many UI Microsoft frameworks, such as Windows Forms, WPF and Silverlight.  All controls in all those frameworks listen to this interface in the classes these controls are bound to and refresh the UI based on those changes.  This interface lives in System.ComponentModel, and you can read more about it here.

In WinRT, Windows 8 runtime this interface moved to a different namespace – Windows.UI.Xaml.Data.  You can see details of here.

As this interface is important, and I want to rely on it in new features I am going to add to my WinRT database project, I wanted to make it easier for people to create classes that implement it and easily add properties to those classes.  So, I wanted to publish this knowledge as well as walk through some of the Visual Studio features that allow  developers create item templates and snippets.  I am planning to use both in this quick post.

Let’s start by creating a class template.  We start by creating a class and make it look like we want it to.  It is really easy, and here is the entire code.

using System;
using Windows.UI.Xaml.Data;

namespace Application1
{
    public class NotifyPropertyChangedClass : INotifyPropertyChanged
    {

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

 

Now, we need to create a class template.  This step is just as easy.  Select Export Template from File menu in Visual Studio:

image

 

Click Next

image

We are selecting our class here, then clicking next.

image

We will skip the references (uncheck all), then click Next.

image

On this last screen I am going to give my new template name and description, I can optionally add icon and preview image, select to automatically import the template, then click Finish.

No, to test this template, I am just right-click on property, select Add New item, then search for notify property changed.

image

Just change the class name and click Add.  Voila – new class that looks just like my template has been added.

Now the snippets.  I am going to use “propfull” snippet as a base.  This snippet adds a property with backing field.  First, I need to see where those snippets are installed.  I can see that by going to Tools –> Code Snippets Manager, then selecting your language, C# in my case.

image

I just expand Visual C# tree node, then I can see the Location.  I am going to that location, find file calld propfull,snippet, then copy it to any folder.  I then rename it propnpc.snippet, where ncp stands for Notify Property Changed.  You can use any name you like.  Then I edit this file in Visual Studio. 

image

I edit Title, description and shortcut, as well as author.  The last part is edit the actual snippet code (in light grey at the bottom of the screenshot).  I simply add the call to OnPropertyChanged method I established when I created a class template before.  Here is the code:

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>propnpc</Title>
            <Shortcut>propnpc</Shortcut>
            <Description>Code snippet for property and backing field that calls property changed</Description>
            <Author>Sergey Barskiy</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
                <Literal>
                    <ID>type</ID>
                    <ToolTip>Property type</ToolTip>
                    <Default>int</Default>
                </Literal>
                <Literal>
                    <ID>property</ID>
                    <ToolTip>Property name</ToolTip>
                    <Default>MyProperty</Default>
                </Literal>
                <Literal>
                    <ID>field</ID>
                    <ToolTip>The variable backing this property</ToolTip>
                    <Default>myVar</Default>
                </Literal>
            </Declarations>
            <Code Language="csharp"><![CDATA[private $type$ $field$;

    public $type$ $property$
    {
        get { return $field$;}
        set { $field$ = value; OnPropertyChanged("$property$"); }
    }
    $end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

The last step is to copy the new snippet back to the original folder.  I could also establish new folder for custom template, but I do not feel like dealing with that.  Now, just type propnpc and hit Tab in your newly added class, and you end up with the following:

image

Just keep changing data, and hitting Tab to advance to the next expansion area, and you will end up with:

image

You are done.  You can also take this a step further, and create a base abstract class that implement INotifyPropertyChanged, then have all your classes inherit for it.

Enjoy.

Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *