2. ContextMenu Control
The purpose of the ContextMenu
control is to allow users to long-click on parts of your application to
get a list of options. The control by default shows itself large enough
to be obvious to the user. You can see the ContextMenu control in action with three menu items and a separator in Figure 3.
FIGURE 3 ContextMenu example
The structure of the ContextMenu control consists of a ContextMenu element with a collection of one or more items inside the ContextMenu. There is only a single level of menu items, so no submenus are supported. The two types of items are MenuItem elements and Separator elements:
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Add" />
<toolkit:MenuItem Header="Remove" />
<toolkit:Separator />
<toolkit:MenuItem Header="Cancel" />
</toolkit:ContextMenu>
To add a context menu to a XAML element, you use the ContextMenu attached property to apply it to your design, like so:
<Grid>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Add" />
<toolkit:MenuItem Header="Remove" />
<toolkit:Separator />
<toolkit:MenuItem Header="Cancel" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
...
</Grid>
After the menu is attached to the element, a user touch-hold will cause the menu to be displayed. The individual MenuItem elements can launch code either via an event or via a Command binding:
...
<toolkit:MenuItem Header="Add"
Click="MenuItem_Click" />
<toolkit:MenuItem Header="Remove"
Command="{Binding RemoveCommand}" />
...
3. DatePicker and TimePicker Controls
If you’ve designed desktop or web applications
before, you probably are used to finding a calendar control to allow
users to pick dates. The problem with a calendar control on the phone is
that the interface is not very touch-friendly. Instead, the phone
supports a control for choosing dates: DatePicker. Using the DatePicker is as simple as using the XAML element:
...
<TextBlock>Pick Date</TextBlock>
<toolkit:DatePicker />
...
The DatePicker looks like a simple TextBox
that accepts a date. The difference is that when a user taps the
control, it launches a full-screen date-picking user interface, as shown
in Figure 4.
FIGURE 4 Date-picking user interface
The date-picking user interface allows the user
to pan and flick to pick the date. This interface works really well with
a touch interface. The DatePicker control defaults to DateTime.Now, which is why the current date is shown. You can specify a date using the Value property:
<toolkit:DatePicker Value="04/24/1969" />
The TimePicker works in exactly the same way as the DatePicker but uses the time portion of the DateTime structure:
...
<TextBlock>Pick Time</TextBlock>
<toolkit:TimePicker Value="12:34 PM" />
...
The user interface for picking the time is similar to the DatePicker, but it enables you to specify the time instead, as shown in Figure 5.
FIGURE 5 Time-picking user interface
