Silverlight sparkline chart

According to Wikipedia

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:

silverlight_sparkline_sample

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

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

Windows Phone 7 charts. Silverlight Toolkit.

Earlier I thought that WP7 Toolkit had chart controls. But it was surprising for me that charts weren’t ported to the WP7 library and if you want to use them, you have to use the Silverlight 3 toolkit with the S3 controls library as it is described in this post. The thing that I don’t like is that I have to add an extra library and also there is the annoying warning message that the library isn’t compatible with WP7. So I created the WP7 library, downloaded the source code of the toolkit and rewrote some code so that it didn’t use the extra reference.

Now you can use this library, which is more suitable for WP7: System.Windows.Controls.DataVisualization.Toolkit.dll.
For some reason the size of this library is 400kb, slightly larger than the silverlight library, I think it is because I haven’t removed *.xaml files.

As it was already said, the xaml code is the same as in WPF and Silverlight versions:

<charting:Chart>
	<charting:PieSeries Title="Test items" ItemsSource="{Binding Items}" DependentValuePath="ItemValue" IndependentValuePath="Title" />
</charting:Chart>

I’m going to examine some other chart libraries for Windows Phone 7 and I will write about their advantages and disadvantages in future posts.

The source code of the tooolkit charts and the sample application you can download here: WP7ToolkitCharts.zip

Updated BindableTabControl post

It is an update to this post.

In that post I implemented the extended TabControl which supported data binding, however it had one inconvenience that it didn’t allow to access and customize its TabItems. Personally me, I have never used TabItems, but it happened that one guy needed to change the Visibility property of specific items, here is his comment. So he added some code to my class and send it to me.

If you use the control from the original post, XAML code will look like this:

<local:ExtendedTabControl 
    ItemsSource="{Binding}" 
    ItemTemplate="{StaticResource ExampleHeaderTemplate}" 
    ContentTemplate="{StaticResource ExampleContentTemplate}" />

Now you can use the third property TabItemTemplate and write your code so:

<local:ExtendedTabControl ItemsSource="{Binding}">
	<local:ExtendedTabControl.TabItemTemplate>
		<DataTemplate>
			<controls:TabItem Visibility="{Binding Visibility}" HeaderTemplate="{StaticResource ExampleHeaderTemplate}" ContentTemplate="{StaticResource ExampleContentTemplate}" />
		</DataTemplate>
	</local:ExtendedTabControl.TabItemTemplate>
</local:ExtendedTabControl>

The first code is enough in most cases, but if you want to use some properties of the TabItem class like Visibility, Style, Template, it is preferable to use the second code.

The source code of the updated control is available here.

Windows 8 Items controls

In addition to the single-item controls, Windows 8 as well as WPF provides controls for multiple child items by using classes derived from the ItemsControl class.

Common items controls in Windows 8 are:
ListBox – A list of selectable items (the same as the WPF counterpart).
ComboBox – A selection control that combines a non-editable text box and a drop-down containing a list box (the same as the WPF counterpart).
FlipView – Displays one item at a time and allows to traverse its items by using either pop-up arrows or the “flip” gesture.
ListView – Displays a list of items, similar to the ListBox control, but with a difference that it can be used with the JumpViewer control (I’ll try to describe it some time later).
GridView – A specialized ListView which displays items in a form of grid. The same can be achieved by using the ListView control and the wrap panel inside its ItemsPanelTemplate.

Here are sample screenshots of above described controls:

Windows 8 ItemsControls: Listbox, ComboBox, FlipView, ListView

Windows 8 ItemsControl: GridView

The following items controls are not available in Windows 8:
DataGrid
TabControl
TreeView
Menu
ContextMenu

I hope some of them will be available after the final release in the form of Toolkit, like it was with Silverlight.

Windows 8 controls

Today I’ll compare built-in controls in Windows 8 and their counterparts in WPF and Silverlight. I’ll describe all the control classes except the ItemsControl classes and panels.

You can see the most often used controls of Windows 8 in the following illustration:

The following controls are supported by both WPF/Silverlight and Windows 8 technologies:
Border
Button
ContentControl
ContentPresenter
Frame
HyperlinkButton
Image
MediaElement
PasswordBox
ProgressBar
RadioButton
RepeatButton
ScrollViewer
Slider
TextBlock
TextBox
ToggleButton
ToolTip
ViewBox
WebBrowser

The following controls are not available in Windows 8:
Calendar
DatePicker
Expander
GridSplitter
GroupBox
Label
RichTextBox
TabItem

The following controls exists only in Windows 8:
ProgressRing – displays an indeterminate circular animation, switched by the property IsActive;
RichTextBlock – the read-only version of the RichTextBox;
ToggleSwitch – looks the same as the CheckBox control with the custom template.

Also the following controls are different at some point in Windows 8:
TextBlock – can contain the same tags as the RichTextBlock has such as Italic, Underline, LineBreak, etc;
TextBox – has the clear button on the right which removes all the text;
PasswordBox – has the reveal button on the right which displays the password as a decoded text.

That’s all the differences which I’ve noticed so far, next time I’ll describe the ItemsControl classes.