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

Advertisements

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