Windows 8 calendar control

As far as I see, lot of people search how to add the calendar or datepicker control to their windows 8 applications. Though there is a control which is called WinJS.UI.DatePicker, it is actually not a date picker, it is just 3 comboboxes in one row. But because of the fact that Windows Store apps can be written by using HTML, CSS and Javascript, you can use any HTML controls which was designed for web sites in the internet. Here is a link to a short review of 21 free HTML datepickers.

In this post I will show how to use the most popular JQuery UI Datepicker. You should build your Windows Store app by using Javascript, because for obvious reasons it won’t work with XAML and C# (though you can try to use this control for C# apps, but I’m not sure that it will work).
Here is the screenshot of the app running on the simulator:

win8-calendar

At first, it is necessary to download 3 files. Though it is possible for internet web sites to refer to javascript libraries without downloading them, windows store applications can’t do this, they can use only offline javascript files.
1. jQuery 1.8.3 (the latest stable version at the moment of writing this post, but you can use any other version)
2. jQuery UI
3. jQuery UI style sheet

The first thing that you should do is to modify the jQuery 1.8.3 library. You should add 1 line at the beginning of the file and 1 line at the end:

MSApp.execUnsafeLocalFunction(function () {
// the original file
});

Like this:

win8-jquery-modified

Then add these 3 files to appropriate folders of the project:

winstore_datepicker_sample_solution_explorer

Add links to these files to the head section and add an input element with javascript code to the body section. The whole file looks so:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DatePicker Sample</title>

    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
    <script src="/js/jquery-1.8.3.js"></script>
    <script src="/js/jquery-ui.js"></script>
    <link href="/css/jquery-ui.css" rel="stylesheet" />

<!-- These links are not necessary in my application, but they can be useful in other applications -->
<!--<link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>-->
</head>
<body>
    <h1>DatePicker Sample</h1>
    <p>Date: <input type="text" id="datepicker" /></p>

    <script type="text/javascript">
        $("#datepicker").datepicker();
    </script>
</body>
</html>

The source code of the sample application: WinStoreDatepickerSample.zip

Silverlight and WP7 chart with data point labels

Recently I found the question on stackoverflow in which one user asked how to add labels to data points on WPF/Silverlight/Windows Phone Toolkit charts. Whereas almost every javascript chart can do this, this functionality is absent in Silverlight charts and none of developers cares.

So I wrote a simple class which extended the LinearSeries class and now line charts can be displayed like this:

silverlight_chart_datapointlabels

wp7_chart_datapointlabels

I added labels only for line charts, but if someone needs them for column charts, I can try to implement it as well.
In the current implementation I created the class which inherits the LineSeries class. It has the following properties:
DisplayLabels – You should set it to true explicitly so that labels are displayed. It is false by default.
LabelBindingPath – Optional. You can specify a custom property of your model which will be displayed instead of the value from the Y-axis.
LabelStyle – Optional. You can change foreground, font weight, font size and other properties of labels.

The example of usage:

<chart:Chart Width="600" Height="300">
    <local:ExtendedLineSeries
        ItemsSource="{Binding Items}"
        DependentValuePath="ItemValue"
        IndependentValuePath="Title" 
        DisplayLabels="True"
        LabelBindingPath="ItemValue" />
</chart:Chart>

The complete source code of the class:

public class ExtendedLineSeries : LineSeries
{
    private Canvas _labelsCanvas;
    private Dictionary<DataPoint, TextBlock> _currentLabels = new Dictionary<DataPoint, TextBlock>();

    /// <summary>
    /// Gets or sets a value indicating whether labels should be displayed. 
    /// </summary>
    public bool DisplayLabels { get; set; }

    /// <summary>
    /// Gets or sets the binding path of the label.
    /// </summary>
    public string LabelBindingPath { get; set; }

    /// <summary>
    /// Gets or sets the style of each label.
    /// </summary>
    public Style LabelStyle { get; set; }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        // get a canvas to which the labels will be added
        this._labelsCanvas = (Canvas)this.GetTemplateChild("PlotArea");
        // clear the clip property so that labels are visible even if they exceed the bounds of the chart
        this.Clip = null;
    }

    protected override void UpdateDataPoint(DataPoint dataPoint)
    {
        base.UpdateDataPoint(dataPoint);

        // after the data point is created and added to the chart, we can add a label near it
        if (this.DisplayLabels && dataPoint.Visibility == System.Windows.Visibility.Visible)
        {
            Deployment.Current.Dispatcher.BeginInvoke(() => this.CreateLabel(dataPoint));
        }
    }

    private void CreateLabel(DataPoint dataPoint)
    {
        // this method is also called with the SizeChanged event, so I create the label only one time
        TextBlock label;
        if (this._currentLabels.ContainsKey(dataPoint))
        {
            label = this._currentLabels[dataPoint];
        }
        else
        {
            label = new TextBlock();
            this._labelsCanvas.Children.Add(label);
            this._currentLabels.Add(dataPoint, label);

            label.Style = this.LabelStyle;

            // bind the label text to the specified path, or to dataPoint.DependantValue by default
            Binding binding = this.LabelBindingPath != null
                        ? new Binding(this.LabelBindingPath) { Source = dataPoint.DataContext }
                        : new Binding("DependentValue") { Source = dataPoint };
            BindingOperations.SetBinding(label, TextBlock.TextProperty, binding);
        }

        // calculate a position of the label
        double coordinateY = Canvas.GetTop(dataPoint) - label.ActualHeight; // position the label above the data point
        double coordinateX = Canvas.GetLeft(dataPoint) + dataPoint.ActualHeight / 2 - label.ActualWidth / 2; // center horizontally
        Canvas.SetTop(label, coordinateY);
        Canvas.SetLeft(label, coordinateX);
    }
}

In this code I made an override of the UpdateDataPoint method and each time a DataPoint is updated I update its label.
The code work with Silverlight as well as with Windows Phone 7. For WP7 I used the recompiled library which I published in one of my previous posts.

Source code of the sample application: ChartPointLabelsSample.zip