Dec 18

Written by:
12/18/2010 3:08 PM 

I am working on a Windows Phone application, and I realized I needed a dynamic Icon control. Windows Phone applications consist mostly of lists ,and those lists look better when they have an icon on the left-hand side. I did not want the icon to be the same icon over and over, so I decided that the icon should show the Year and the Month of the particular item in the list.

I decided to create a stand-alone Silverlight project to create the control. My final deliverable is a simple View Model (MVVM) control ,that I can insert into a Data Template, and just bind the CalendarDate (DateTime), and it works.

The Calendar Control ViewModel

The first step was to create a ViewModel for the Calendar Control. This consists of simple Properties. The only unique thing about this class, is that it contains this in the constructor:

        public CalendarIconControlModel()
        {
            // Wire-up a method to run whenever
            // The Date is set
            PropertyChanged += 
                new PropertyChangedEventHandler(
                    CalendarIconControlModel_PropertyChanged
                    );
        }

 

That calls this method:

 

        #region SetCalendar
        private void SetCalendar()
        {
            // Set CalendarYear
            CalendarYear = CalendarDate.Year.ToString();
            // Set CalendarMonth
            switch (CalendarDate.Month)
            {
                case 1:
                    CalendarMonth = "JAN";
                    break;
                case 2:
                    CalendarMonth = "FEB";
                    break;
                case 3:
                    CalendarMonth = "MAR";
                    break;
                case 4:
                    CalendarMonth = "APR";
                    break;
                case 5:
                    CalendarMonth = "MAY";
                    break;
                case 6:
                    CalendarMonth = "JUN";
                    break;
                case 7:
                    CalendarMonth = "JLY";
                    break;
                case 8:
                    CalendarMonth = "AUG";
                    break;
                case 9:
                    CalendarMonth = "SEP";
                    break;
                case 10:
                    CalendarMonth = "OCT";
                    break;
                case 11:
                    CalendarMonth = "NOV";
                    break;
                case 12:
                    CalendarMonth = "DEC";
                    break;
                default:
                    CalendarMonth = "";
                    break;
            }
        } 
        #endregion

 

That method sets the CalendarYear and CalendarMonth properties.

The Calendar Control View

The View is very simple. The CalendarMonth, and CalendarYear properties are simply bound to TextBlocks.

The interesting part ,is how I created the graphics. First, I created a Border.

I set it’s CornerRadius to 10, and added a DropShadowEffect.

I drew a Rectangle on top that has a Gradiant brush Fill.

I set it’s CornerRadius to 10.

I then draw another Rectangle below the first one.

I then select both of the Rectangles and Unite them into a single Path.

The MainViewModel

The MainPage that consumes it, has a very simple ViewModel. However, note that it contains a collection of the ViewModel of the Calendar Control.

It creates sample data in it’s constructor:

 

    public MainPageModel()
    {
        colCalendarIconControlModel.Add(new CalendarIconControlModel() 
        { CalendarDate = new DateTime(2010, 1, 1) });
        colCalendarIconControlModel.Add(new CalendarIconControlModel() 
        { CalendarDate = new DateTime(2011, 5, 12) });
        colCalendarIconControlModel.Add(new CalendarIconControlModel()
        { CalendarDate = new DateTime(2012, 11, 19) });
    }

The Main View

The View for the MainPage is created by simply dragging the colCalendarIconControlModel collection onto the design surface, so it can create a ListBox and bind the data.

Using Microsoft Expression Blend, we then edit the template…

If we select the Assets, we can drag the CalendarIconControl onto the template.

We bind the control to the instance of the colCalendarIconControlModel because that instance is the class CalendarIconControlModel and that class is the ViewModel for the CalendarIconControl.

And that’s it!

Download

You can download the sample code at this link:

http://silverlight.adefwebserver.com/files/CalendarIcon.zip