Playing with CalendarControl from Mindscape: Part 1

Since WinRT has been introduced in //build/ 2011 with the Windows 8 Developer Preview, many companies such as Telerik, Syncfusion, and Infragistics that have been providing .NET controls and development tools jump on the bandwagon and start providing controls for WinRT.

I have written about Chart controls from Telerik in the previous posts. However, I also look around to see how other companies have been doing. And I see one interesting control which is a calendar control from Mindscape.

The CalendarControl can be used as a date picker or to display data for individual days or months. You can visualize the days of each month using a “Month view” or months in a year using a “Year view.”



Today, I will just show you simplest thing you can do with the CalendarControl. I will create an app that allows a user to tap a date and set the app background to Bing image of the day of the selected date.

Let’s start!

  1. First, you have to download the MetroElements Trial version. (Note: As far as I know the trial version occasionally shows a message dialog which tells you that you are using the trial version :-). I think it is also built in debug mode, so you can’t just submit your app with the trial version to the store.)
  2. Next step, we install the controls by running the msi file.image
  3. After that, we can start Visual Studio and create a blank Windows Store app project. image
  4. Next, we add Metro Elements reference to the project. image
  5. We can add XAML code directly or just drag the CalendarControl from the Toolbox, and let Visual Studio handle the namespace adding for us.image

Here is the XAML code:

<Page xmlns:MetroElements="using:Mindscape.MetroElements" 
    <Grid x:Name="mainGrid" Background="Crimson">
        <MetroElements:CalendarControl x:Name="calendar"/>

This should be all for the XAML side. Let’s look at C# code-behind.

public sealed partial class MainPage : Page
    string bingUrlPrefix = "";

    public MainPage()
    protected override void OnNavigatedTo(NavigationEventArgs e)
        calendar.SelectedDateChanged += calendar_SelectedDateChanged;

    async void calendar_SelectedDateChanged(object sender, EventArgs e)
        var calendarControl = sender as CalendarControl;
        var selectedDate = calendar.SelectedDate;

        var dateDiff = DateTime.Now - selectedDate;
        var day = dateDiff.Days;
        // we can't get a future photo or a photo older than 11 days
        if (day >= 0 && day <= 11)
            using (var client = new HttpClient())
                var fullBingUrl = string.Format("{0}{1}", bingUrlPrefix, day);
                var xmlString = await client.GetStringAsync(new Uri(fullBingUrl));

                var doc = XDocument.Parse(xmlString);

                var imageUrlElement = doc

                if (imageUrlElement != null)
                    var imageUrl = imageUrlElement.Value;
                    var medResolutionUrl = imageUrl + "_1366x768.jpg"; 
                    var imageBrush = new ImageBrush();
                    imageBrush.ImageSource = new BitmapImage(new Uri("" + medResolutionUrl));
                    mainGrid.Background = imageBrush;

The code is pretty straightforward here. We create an event handler, calendar_SelectedDateChanged, which will handle the CalendarControl.SelectedDateChanged event.

In the event handler, we get the selected date and make sure we can get bing image from that day (Note: we can’t get a future photo or photo older than 11 days from the URL that we used in the code here).

Basically, to get a bing image, we have to get XML which contains the file name (in <url> tag) or prefix (in <urlBase> tag). The app gets 1366×768 version of the photo by using “1366×768.jpg” suffix. After we get the image, we create an ImageBrush and set it as our main grid’s background.

Let’s see how it works in action:

This is just the simplest way to use the CalendarControl. You can actually customize your calendar and display any kind of data you want. In the next post, I will show you how you can customize the CalendarControl to look something similar to this.image

Enjoy coding!


Leave a Reply

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

You are commenting using your 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