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 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.

Windows 8 panels overview

I continue learning Windows 8 programming model and in this post I’ll describe available panels.
Windows 8 provides the following panels for creating UIs:

  • Canvas. Child elements are positioned by relative coordinates.
  • Grid. Consists of columns and rows.
  • StackPanel. Child elements are arranged in a single line which can be either horizontal or vertical.
  • VirtualizingStackPanel. The same class as the StackPanel class but it visualizes only those items which are currently visible.
  • VariableSizedWrapGrid. The similar class to the WrapPanel control which exist in WPF. Elements are positioned in the sequential order and go to the next line if there isn’t enough size.

I’ll explain some panels in detail.
Canvas
This class isn’t different from the WPF class at all. Here is the example with two controls which are situated at different positions.

    <Canvas Background="Black">
        <TextBlock FontSize="22" Canvas.Left="20" Canvas.Top="40">Canvas</TextBlock>
        <Rectangle Canvas.Left="60" Canvas.Top="90" Fill="Green" Height="38" Width="93"  />
    </Canvas>

StackPanel
The obvious difference is that buttons are not stretched by defaults. But in other respects everything is the same.

    <StackPanel Orientation="Vertical" Background="Black">
        <Button>Button 1</Button>
        <Button HorizontalAlignment="Center">Button 2</Button>
        <Button HorizontalAlignment="Stretch">Button 3</Button>
    </StackPanel>

Grid
Almost no difference from its WPF counterpart.

    <Grid Background="Black">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150" />
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>

        <TextBlock FontSize="20" Margin="5,0,0,0" VerticalAlignment="Center" Text="Row 1"/>
        <TextBox Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="5" Margin="0, 0, 5, 0" Text="Column 1" />
        <Button Grid.Row="1">Row 2</Button>
        <Button Grid.Row="1" Grid.Column="1">Column 1</Button>
    </Grid>

VariableSizedWrapGrid
As far as I already said, this class is almost the same as the WPF WrapPanel class. But additionally it has 2 new properties: VariableSizedWrapGrid.ColumnSpan and VariableSizedWrapGrid.RowSpan. The ColumnSpan property is used with the Orientation=Horizontal, and the RowSpan property with the vertical orientation. These properties contain an integer number as a value and if to set it higher than 1, the panel will multiply the space for the element.
Here is the example:

    <VariableSizedWrapGrid Background="Black" Orientation="Horizontal">
        <Button>Button 1</Button>
        <Button VariableSizedWrapGrid.ColumnSpan="2">Button 2</Button>
        <Button>Button 3</Button>
        <Button VariableSizedWrapGrid.ColumnSpan="3" HorizontalAlignment="Stretch">Button 4</Button>
        <Button>Button 5</Button>
    </VariableSizedWrapGrid>

And that’s how it is displayed depending on the available size.
800px

if to narrow to 400px

and 300 px

There are two additional panels: CarouselPanel and WrapGrid. But the CarouselPanel class can’t be used outside the ComboBox class (it is used as the default ItemsPanelTemplate), and the WrapGrid class also should be situated inside a ItemsControl class. Maybe in the release version they will be available for using in any places, but so far we can use only 5 above described panels.

Windows 8 Hello World

I’ve just installed the beta version of Windows 8 to know how it looks before the official release. There are many differences and I’m not accustomed with many of them yet, but I’m sure that much will be changed until the final version, so I’ll not complain.
The most evident change is the new Start Menu button and consequent behavior. There is no that start menu with applications and settings which we can see in Windows 7 now, instead of that it displays this list of large rectangular icons similar to Windows Phone 7:

If you want to return to the habitual desktop, you can either select the Desktop tile among other tiles or use the key combination Alt+Tab.
Here in this post I’ll describe how to create a simple application for new start screen using new Visual Studio 11. The final result consist of one string and looks so:

The full sequence of actions I’ll describe inside the post.
Read more of this post