Vista like Calendar Widget in XAML using Expression Blend 3

No.of Views	:	555
Bookmarked	:	0 times
Downloads	:
Votes	:	0

By dpatra On 16 Feb 2010 00:02:00

Tag : Silver Light and XAML , How to

Skill Level: Intermediate

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

Introduction

This is a widget we are going to make; which has same functionalities as in Vista. In Vista the sidebar contains this type of widget called Calendar widget. The main functionality of this Widget is to display the Year, Month, Date and Day. The following figure describes about the widget.

Figure 1.1 Calendar Widget’s two views

Steps

To begin with we need the following requirements:
1. Silverlight 3
2. Visual Studio 2008 SP1
3. Expression Blend 3

Creating a Silverlight Project with or without RIA enabled.

1. Create project in Visual Studio and open the solution in Expression Blend 3.
2. The following figure will guide you for that

Image Loading....

Figure 1.2 Create a new Silverlight project

Image Loading....

Figure 1.3 Uncheck the bottom checkbox to create the project without RIA support

Designing the User Control in Expression Blend 3

While designing our main aim is to display the year, month, date and the day one after another. So we need a background picture (Calendar) in any format. For this example I have used PNG format file as it mixes with the background.

Image Loading...

Figure 1.4 Calendar Background.

Now the big task is to displaying the data in right areas. Like the year on the top, day in middle and all. We have used grid to contain the data and fulfill our aim. The following figure describes everything.

Image Loading....

Figure 1.5 Designing the grid.

Now we can keep our respective controls (TextBlocks) into our specific areas. After putting it all together it will look like the following figure.

Image loading...

Figure 1.6 Controls inside the grids

Now add a Calendar Control to our design and transform it to match the background image. It will look the following.

Figure 1.7 Adding Calendar to the grid

The XAML will look like the following after all the design changes above.

{codecitation class="brush: xml; gutter: true;" width="650px"}

{/codecitation}

Animating Fade In and Fade Out

As we are following Vista’s Calendar widget in sidebar. We will also follow the animation it does. In Vista it is FadeIn and FadeOut when you click something. Now we would do this in Expression Blend.

Adding click events to the controls and displaying data.

Now we have a handful of controls in our application. We have yearText, monthText, dateText and dayText to display the calendar properties and we have image control and calendar control.
We have the basic functionality like when we click the BigCalendar the small calendar will be displayed and Vice Versa. The following code will help you doing so.

{codecitation class="brush: csharp; gutter: true;" width="650px"}

namespace VistaCalendar
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
BigCalendarShow();
}

private void BigCalendarShow()
{
calendarMain.Visibility = Visibility.Collapsed;

yearText.Visibility = Visibility.Visible;
monthText.Visibility = Visibility.Visible;
dayText.Visibility = Visibility.Visible;
dateText.Visibility = Visibility.Visible;
imageCalendar.Visibility = Visibility.Visible;

MonthText();
yearText.Text = DateTime.Now.Year.ToString();
dateText.Text = DateTime.Now.Day.ToString();
dayText.Text = DateTime.Now.DayOfWeek.ToString();
imageVisible.Begin();
yearVisible.Begin();
monthVisible.Begin();
dateVisible.Begin();
dayVisible.Begin();

calendarCollapsed.Begin();
}

private void MonthText()
{
switch (DateTime.Now.Month.ToString())
{
case "1":
monthText.Text = "JANUARY";
break;
case "2":
monthText.Text = "FEBRUARY";
break;
case "3":
monthText.Text = "MARCH";
break;
case "4":
monthText.Text = "APRIL";
break;
case "5":
monthText.Text = "MAY";
break;
case "6":
monthText.Text = "JUNE";
break;
case "7":
monthText.Text = "JULY";
break;
case "8":
monthText.Text = "AUGUST";
break;
case "9":
monthText.Text = "SEPTEMBER";
break;
case "10":
monthText.Text = "OCTOBER";
break;
case "11":
monthText.Text = "NOVEMBER";
break;
case "12":
monthText.Text = "DECEMBER";
break;
default:
break;
}
}

private void SmallCalendarShow()
{
calendarMain.Visibility = Visibility.Visible;
calendarMain.VerticalAlignment = VerticalAlignment.Center;
calendarMain.HorizontalAlignment = HorizontalAlignment.Center;

imageCollapsed.Begin();
yearCollapsed.Begin();
monthCollapsed.Begin();
dateCollapsed.Begin();
dayCollapsed.Begin();

calendarVisible.Begin();

yearText.Visibility = Visibility.Collapsed; ;
monthText.Visibility = Visibility.Collapsed;
dayText.Visibility = Visibility.Collapsed;
dateText.Visibility = Visibility.Collapsed;
imageCalendar.Visibility = Visibility.Collapsed;
}

private void calendarMain_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
BigCalendarShow();
}

private void yearText_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
SmallCalendarShow();
}

private void monthText_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
SmallCalendarShow();
}

private void dateText_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
SmallCalendarShow();
}

private void dayText_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
SmallCalendarShow();
}

private void imageCalendar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
SmallCalendarShow();
}

private void calendarMain_DisplayDateChanged(object sender, CalendarDateChangedEventArgs e)
{
BigCalendarShow();
}

private void calendarMain_DisplayModeChanged(object sender, CalendarModeChangedEventArgs e)
{
BigCalendarShow();
}

private void calendarMain_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
{
BigCalendarShow();
}
}
}

{/codecitation}

Now run the application and enjoy Vista Calendar Widget.

Thank you

About the Author

Diptimaya Patra

Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center.

Occupation :Software Engineer
Company : UST Global.
Location : India
Follow me at twitter : http://twitter.com/dpatra

About Author

dpatra

Occupation	-	Not Provided
Company	-	Not Provided
Member Type	-	Expert
Location	-	Not Provided
Joined date	-	13 Jul 2009
Home Page	-	Not Provided
Blog Page	-	Not Provided


Other popularSectionarticles
Analog Clock Widget In Silverlight 3 Analog Clock Widget In Silverlight 3 Published Date : 16/Feb/2010 Silverlight Navigation Application in Silverlight 3 RIA Services Silverlight Navigation Application in Silverlight 3 RIA Services Published Date : 16/Feb/2010 Grid Layout in Silverlight Grid Layout in Silverlight Published Date : 16/Feb/2010 Silverlight Datagrid Paging Silverlight Datagrid Paging Published Date : 16/Feb/2010 How to add Controls Dynamically to Silverlight Article teach about how to add Controls dynamically to silver light page Published Date : 21/Sep/2010

Comments

There is no comments for this articles.

Technologies

Resources

Community

The CodeGain

Vista like Calendar Widget in XAML using Expression Blend 3