A sparkline is a very small line chart, typically drawn without axes or coordinates.

Though this chart is not included by default to the Silverlight Toolkit library, it is very easy to implement such chart by styling the built-in Line chart. Here is an example which I’ve implemented:

At first I’ve changed the default control template of the Chart control, I’ve removed all paddings, the chart title, and reduced the minimum height and width of the chart. Also I’ve changed the DataPoint template (made them invisible) and the Polyline template (reduced its thickness). Here is the XAML code:

<UserControl.Resources>
    <Style x:Key="ChartWithoutPaddings" TargetType="chart:Chart">
        <Setter Property="Padding" Value="0" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="ChartAreaStyle">
            <Setter.Value>
                <Style TargetType="Panel">
                    <Setter Property="MinWidth" Value="100" />
                    <Setter Property="MinHeight" Value="20" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="PlotAreaStyle">
            <Setter.Value>
                <Style TargetType="Grid">
                    <Setter Property="Background" Value="Transparent" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chart:Chart">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                            <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                        </chartingprimitives:EdgePanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="EmptyDataPoint" TargetType="Control">
        <Setter Property="Background" Value="Black" />
        <Setter Property="Template" Value="{x:Null}" />
    </Style>

    <Style x:Key="OnePixelLine" TargetType="Polyline">
        <Setter Property="StrokeThickness" Value="1" />
    </Style>
</UserControl.Resources>

This code is almost all that you need to create a sparkline chart. All that is left is to remove axes. It wasn’t a trivial thing, so I used some kind of a hack: I set their width (for Y axis) and height (for X axis) to zero.

<chart:Chart Style="{StaticResource ChartWithoutPaddings}">
    <chart:LineSeries ItemsSource="{Binding FirstIndexItems}" IndependentValuePath="Number" DependentValuePath="Value" 
                        DataPointStyle="{StaticResource EmptyDataPoint}" 
                        PolylineStyle="{StaticResource OnePixelLine}"  />
    <chart:Chart.Axes>
        <chart:LinearAxis Orientation="X" Height="0" Opacity="0" />
        <chart:LinearAxis Orientation="Y" Width="0" Opacity="0" />
    </chart:Chart.Axes>
</chart:Chart>

Links
Source code: SparklineChartSample.zip
Showcase: SparklineChartSampleTestPage.html

You can post your email in comments bellow or send me a request to my email vortexwolf@gmail.com and I will send you an invitation to this website.

It could be better to create a shareable link, but I would rather send invitations in person.

The proposal remains valid as long as you see this post. If I don’t have invitations, I will delete the post.

When you click the Submit App link, you will see the following page:

If you click the square with the number 1, you will see the App Info page:

All that you need to fill out is the App Alias field (i.e. the name of your application) and the Category combobox. That’s all, you can go to the second step:

If you click the square with the number 2, you will see a page with the Browse link where you should upload your xap file:

After that the page will become much longer and will contain several sections. The first section displays information about your xap file:

In the second section you can write a description of your application that will be displayed to end users:

And finally, you should upload a square 300×300 icon and at least 1 screenshot of your application:

Then your application will be submitted and it takes 3 days until it is reviewed and either approved or rejected.

After the application is approved and is visible on the marketplace, you can update your application in a similar way. The update process is almost the same and you will need to wait 3 days as well.

In this example I will show how to display a loading indicator while the image is loading and an error message if the image loading has failed.

You shouldn’t use the Source property in the XAML markup, instead you should set the Source property in the code-behind.

The XAML markup looks so:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <TextBlock x:Name="loadingView" Visibility="Collapsed" Text="Loading..." VerticalAlignment="Center" HorizontalAlignment="Center" />
    <TextBlock x:Name="errorView" Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center" />
    <Image x:Name="imageView" Visibility="Collapsed" />
</Grid>

The code-behind:

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();

        var bitmap = new BitmapImage(new Uri("http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png"));
        bitmap.ImageFailed += (s, e) => this.ShowError("Error while loading the image.");
        bitmap.ImageOpened += (s, e) => this.ShowImage();

        this.ShowLoading();
        this.imageView.Source = bitmap;
    }

    private void ShowLoading()
    {
        this.loadingView.Visibility = Visibility.Visible;
        this.imageView.Visibility = Visibility.Collapsed;
        this.errorView.Visibility = Visibility.Collapsed;
    }

    private void ShowError(string message)
    {
        this.loadingView.Visibility = Visibility.Collapsed;
        this.imageView.Visibility = Visibility.Collapsed;
        this.errorView.Visibility = Visibility.Visible;

        this.errorView.Text = message;
    }

    private void ShowImage()
    {
        this.loadingView.Visibility = Visibility.Collapsed;
        this.imageView.Visibility = Visibility.Visible;
        this.errorView.Visibility = Visibility.Collapsed;
    }
}

At first I create the BitmapImage instance, after the creation of this object I subscribe to its events ImageFailed and ImageOpened. Then I display the loading indicator (the ShowLoading method). And as soon as the line ‘this.imageView.Source = bitmap’ is called, the image loading process starts. After some time either ShowError or ShowImage will be called.

The sample application you can download here: https://dl.dropbox.com/u/8047386/WordPress/PhoneImageLoadingSample.zip

The source code is situated on my github account. I’ve already created an Android application for this web site and published it on Google Play, so it wasn’t so difficult to reimplement the application for Windows Phone. It is definitely much easier than to develop it from scratch.

The Windows Phone project is situated here.

So far the application looks like this:

At the moment the application has the following functionality:
1. Downloads and parses JSON files.
2. Displays the loading indicator during loading, displays the error message if an error has occured.
3. Loads and displays list images (thumbnails) asyncronously.
4. Opens full images in the WebBrowser.
5. Converts HTML posts to RichTextBox controls (the parser isn’t ideal, but it works at least for this website).
6. Makes HTTP POST requests.

By the way, the application is already published in the marketplace and available here: http://www.windowsphone.com/en-us/store/app/2ch-browser/3f63fa2c-4b35-4b8a-b3c0-51b54b460d70

The certification process was without problems, but I had to wait 5 days.

At first, I added some code to the XAML view so that it displays the ProgressBar and its description:

<StackPanel Visibility="{Binding IsLoading, Converter={StaticResource BooleanToVisibilityConverter}}"
            VerticalAlignment="Center">
    <TextBlock Text="{Binding ProgressDescription}" HorizontalAlignment="Center" Style="{StaticResource PhoneTextNormalStyle}" />
    <ProgressBar Value="{Binding ProgressValue}" Maximum="1" IsIndeterminate="False" Height="50" />
</StackPanel>

After that I’ve tried to find some event of the HttpWebRequest class which can report progress, but I haven’t found it, so I implemented my own ProgressStream class which looks like a common stream but has the OnProgressChanged callback.

public class ProgressStream : Stream
{
    private readonly Stream _stream;
    private long _length;

    public ProgressStream(Stream stream, long length)
    {
        this._stream = stream;
        this._length = length;
    }

    public override bool CanRead
    {
        get { return this._stream.CanRead; }
    }

    public override bool CanSeek
    {
        get { return this._stream.CanSeek; }
    }

    public override bool CanWrite
    {
        get { return this._stream.CanWrite; }
    }

    public override void Flush()
    {
        this._stream.Flush();
    }

    public override long Length
    {
        get { return this._length; }
    }

    public override long Position
    {
        get
        {
            return this._stream.Position;
        }
        set
        {
            this._stream.Position = value;
        }
    }

    public override int Read(byte[] buffer, int offset, int count)
    {
        int readCount = this._stream.Read(buffer, offset, count);
        this.ReportProgress();

        return readCount;
    }

    public override long Seek(long offset, SeekOrigin origin)
    {
        long seekCount = this._stream.Seek(offset, origin);
        this.ReportProgress();

        return seekCount;
    }

    public override void SetLength(long value)
    {
        this._length = value;
    }

    public override void Write(byte[] buffer, int offset, int count)
    {
        this._stream.Write(buffer, offset, count);
        this.ReportProgress();
    }

    public Action<double> OnProgressChanged { get; set; }

    private void ReportProgress()
    {
        if (this.OnProgressChanged != null)
        {
            var percent = this.Position / (double)this.Length;
            // System.Threading.Thread.Sleep(500); // for test purposes
            this.OnProgressChanged(percent);
        }
    }
}

After that I changed the HttpGetTask class so that it uses the new ProgressStream class if it is possible. It is necessary to check the presence of the Content-Length header, because without this header and with unknown length it is impossible to calculate the progress.

public class HttpGetTask<T>
{
    //...
    
    private void OnGetResponseCompleted(IAsyncResult ar)
    {
        //...
        
        Stream stream;
        if (this.OnProgressChanged != null && response.Headers.AllKeys.Any(key => key == "Content-Length"))
        {
            var progressStream = new ProgressStream(response.GetResponseStream(), response.ContentLength);
            progressStream.OnProgressChanged = v => this.InvokeInUiThread(() => this.OnProgressChanged(v));
            stream = progressStream;
        }
        else
        {
            stream = response.GetResponseStream();
        }

        //...
    }

    //...
    
    public Action<double> OnProgressChanged { get; set; }
}

Then you should update the view model. I added the OnProgressChanged method which updates the ProgressDescription and ProgressValue properties.
Also I changed the url of the sample data, because the website geonames.org which I used earlier doesn’t send the Content-Length header (it sends the Transfer-Encoding header with value ‘chunked’ and unknown length), so I downloaded a JSON response and uploaded it on my dropbox account here.
The ViewModel looks so:

public class MainViewModel : INotifyPropertyChanged
{
    public MainViewModel()
    {
        Cities = new ObservableCollection<CityViewModel>();

        string url = "https://dl.dropbox.com/u/8047386/WordPress/testcities.json";
        
        var task = new HttpGetTask<CitiesList>(url, this.OnPostExecute);
        task.OnPreExecute = this.OnPreExecute;
        task.OnError = this.OnError;
        task.OnProgressChanged = this.OnProgressChanged;

        task.Execute();
    }
    
    //...

    private void OnProgressChanged(double value)
    {
        this.ProgressValue = value;
        this.ProgressDescription = string.Format("Loading {0:F0}%", value * 100);
    }

    //...
        
    private double _progressValue;

    public double ProgressValue
    {
        get { return _progressValue; }
        set
        {
            _progressValue = value;
            RaisePropertyChanged("ProgressValue");
        }
    }

    private string _progressDescription;

    public string ProgressDescription
    {
        get { return _progressDescription; }
        set
        {
            _progressDescription = value;
            RaisePropertyChanged("ProgressDescription");
        }
    }
}

Though the loading indicator is difficult to reproduce on the Windows Phone Emulator because it downloads the file very fast, it will be certainly displayed if the phone has a slow internet connection.
I didn’t add all code to the post, but as usual you can download the full project here:
PhoneJsonProgressBar.zip

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:

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:

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

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

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

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
Show case: ChartPointLabelsSampleTestPage.html

Though I post in this blog more about Windows development, I have lot of experience with web development as well, so it’s been easy for me to pass this exam.
Before taking this exam, I learned some new features of HTML5:

1. CSS Grid and Flexbox layouts. Yyou don’t need to use difficult floats and absolute positioning any more, everything is as easy as using StackPanel and Grid controls in XAML.
2. Javascript web workers which run in a real background thread. But I don’t know where they can be useful, it is good only for service calls which are already aynchronous and ajax calls don’t require any background javascript threads.
3. New HTML tags like <nab>, <aside> and others, which must be useful for search engines, but they don’t seem to be different from ordinary <div>.
4. Storage API where you can store data instead of cookies. For example, you can save comments which users type and if they accidentally close the browser and don’t post anything, you can restore entered text after they visited the site once again, which is very convenient.

I will not post examples of questions, because you can find them on the famous free website examcollection. Although they have correct questions, sometimes they have incorrect answers, so you should know the subject, certification of which you are going to pass.

Now I can pass other exams and receive MCSD title.
There are 2 of them related to web development:

• MCSD: Web Applications
• MCSD: Windows Store Apps using HTML5

And 1 related to Windows development:

• MCSD: Windows Store Apps Using C#

As you can see, 2 certifications are almost the same. So what they promised became true: you can develop Windows applications by using HTML and Javascript instead of C# and XAML.
I wouldn’t say that it is bad, because actually Javascript is an easy language, and it is much easier to perform UI manipulations by using CSS and Javascript instead of XAML. If you tried to design custom controls, you know how horrible XAML is, it is much more inferior in comparison with CSS. On the other hand C# is much better than Javascript.
So I hope that there will be a way to use HTML and C# together while developing Windows store apps, as it is already possible with web sites and ASP.Net MVC.

It is very easy to implement in Javascript, just 4 lines:

var html = element.html();
html = html.replace(new RegExp("<span class=\"highlighted\">(.*?)<\/span>", "i"), "$1"); // clear the previous highlight
html = html.replace(new RegExp("(" + query + ")", "i"), "<span class=\"highlighted\">$1</span>"); // highlight the current search query
element.html(html);

But it is slightly more difficult in Silverlight. However the approach is the same:
1. Get the text value.
2. Replace some places in the text by a span with some user-defined style.
3. Parse the result text and display it.

I have created a new project by using the Windows Phone Databound Application template in Visual Studio, so that I don’t need to create base mark-up and add default data, Visual Studio creates everything by itself.

At first, we need to write methods which replace values of ListBox by formatted values. The corresponding javascript code is `html.replace(new Regexp(…))`. The C# code looks so:

public void Search()
{
    this.ClearHighlights();

    if(string.IsNullOrEmpty(SearchQuery))
    {
        return;
    }

    this.AddHighlights();
}

private void ClearHighlights()
{
    var highlightRegex = new Regex("<Run Foreground='Yellow'>(.*?)</Run>");
    foreach (var item in this.Items)
    {
        item.LineOne = highlightRegex.Replace(item.LineOne, "$1");
        item.LineTwo = highlightRegex.Replace(item.LineTwo, "$1");
    }
}

private void AddHighlights()
{
    var searchRegex = new Regex(string.Format("({0})", this.SearchQuery), RegexOptions.IgnoreCase);
    foreach (var item in this.Items)
    {
        item.LineOne = searchRegex.Replace(item.LineOne, "<Run Foreground='Yellow'>$1</Run>");
        item.LineTwo = searchRegex.Replace(item.LineTwo, "<Run Foreground='Yellow'>$1</Run>");
    }
}

The `LineOne` and `LineTwo` properties contain some strings which are displayed in each item of the ListBox.

Finally, we need to write a binding which correctly displays a text with the `Run` tags. The corresponding javascript code is `elem.html(html)`. I used attached property for this task:

public static class TextBlockProperties
{
    public static string GetStyledText(DependencyObject obj)
    {
        return (string)obj.GetValue(StyledTextProperty);
    }

    public static void SetStyledText(DependencyObject obj, string value)
    {
        obj.SetValue(StyledTextProperty, value);
    }

    public static readonly DependencyProperty StyledTextProperty =
        DependencyProperty.RegisterAttached("StyledText", typeof(string), typeof(TextBlock), new PropertyMetadata(null, StyledText_Changed));


    private static void StyledText_Changed(DependencyObject d, DependencyPropertyChangedEventArgs args)
    {
        var tb = (TextBlock) d;
        var text = (string) args.NewValue;

        if(string.IsNullOrEmpty(text) || !Regex.IsMatch(text, "<Run.*?>.*?</Run>"))
        {
            tb.Text = text;
            return;
        }

        var formattedTextBlockXaml = "<TextBlock xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>" + text + "</TextBlock>";
        var formattedTextBlock = (TextBlock) XamlReader.Load(formattedTextBlockXaml);

        // detach parsed inlines from the view tree
        var inlines = formattedTextBlock.Inlines.ToList();
        formattedTextBlock.Inlines.Clear();

        // add inlines to the specified text block
        tb.Inlines.Clear();
        foreach (var inline in inlines)
        {
            tb.Inlines.Add(inline);
        }
    }
}

So now all that you need is to use the StyledText property instead of Text:

<TextBlock ext:TextBlockProperties.StyledText="{Binding LineOne}" />

In my example I used the yellow color for highlighting, but you can change any property of the `Run` class, like FontWeight (Bold), FontStyle (Italic) and others, the list of properties you can find here: Run Class.

The sample application which I used in order to make the 2 screenshots above you can download here: Wp7ListSearchSample.zip