Logo
HOW TO
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
 
 
Windows Phone

Silverlight for Windows Phone 7 Toolkit (part 2) - ContextMenu , DatePicker, TimePicker, ListPicker & ToggleSwitch Control

12/16/2011 4:32:19 PM

3. ContextMenu Control

The ContextMenu control provides a user interaction unique to Windows Phone 7 with the tap-and-hold gesture. Figure 3 shows the test page within text hints on functionality, as well as results after tap-and-hold actions.

Figure 3. ContextMenu control test page

The ContextMenu control is bindable to ICommand objects, so it can work quite nicely with GalaSoft's MVVM support for Commanding allowing context menu items to invoke methods on the data bound ViewModel class.

4. DatePicker and TimePicker Controls

The DatePicker and TimePicker controls make it easy for users to pick date and time within a Windows Phone 7 application. Figure 4 shows the controls in action.

Figure 4. DatePicker & TimePicker controls in action

You can attach an event hander to the Click event and assign commands to the Command property. Here is example XAML for ICommand support:

<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem
Header="Always-on item"
Command="{Binding AlwaysCommand}"/>
<toolkit:MenuItem
Header="Intermittent item"
Command="{Binding IntermittentCommand}"/>
<toolkit:MenuItem
Header="Always-on item with param"

Command="{Binding AlwaysCommand}"
CommandParameter="param1"/>
<toolkit:MenuItem
Header="Intermittent item with param"
Command="{Binding IntermittentCommand}"
CommandParameter="param2"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

The controls are dependent on having the correct application bar icons in a folder named Toolkit.Content. The icons are ApplicationBar.Cancel.png and ApplicationBar.Check.png and their build action must be set to Content.

5. ListPicker Control

The ListPicker control provides a full-page, touch-friendly drop-down scrollable list to select an item. Figure 5 shows the example.

Figure 5. ListPicker control in action

The ListPicker control can display a set of inline strings like this:

<toolkit:ListPicker Header="background">
<sys:String>dark</sys:String>
<sys:String>light</sys:String>
<sys:String>dazzle</sys:String>
</toolkit:ListPicker>

The ListPicker control also has ItemSource and ItemTemplate attributes to support data binding and full customization of how items are displayed. Here is example XAML:

<toolkit:ListPicker ItemsSource="{Binding}" Header="accent color"
FullModeHeader="ACCENTS" CacheMode="BitmapCache">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding}" Width="24" Height="24"/>
<TextBlock Text="{Binding}" Margin="12 0 0 0"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="16 21 0 20">
<Rectangle Fill="{Binding}" Width="43" Height="43"/>
<TextBlock Text="{Binding}" Margin="16 0 0 0" FontSize="43"
FontFamily="{StaticResource PhoneFontFamilyLight}"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate
</toolkit:ListPicker>


6. ToggleSwitch Control

The ToggleSwitch control configures a boolean value as On or Off. It can take a simple Header attribute for a text value to display across the top above the switch and current status as shown in the first two ToggleSwitch controls in Figure 6.

Figure 6. The ToggleSwitch control

The last ToggleSwitch control is much more customized than the first two. It includes a ToggleSwitch.HeaderTemplate to adjust the Font for the header. The ToggleSwitch.ContentTemplate customizes the ToggleSwitch status info on the left with additional detail. Simply embed a <ContentControl Content="{Binding}"/>ToggleSwitch.ContentTemplate to have the On/Off status display correctly, as in the following: control inside of the

<toolkit:ToggleSwitch Header="5:45 AM">
<toolkit:ToggleSwitch.HeaderTemplate>
<DataTemplate>
<ContentControl FontSize="{StaticResource PhoneFontSizeLarge}"
Foreground="{StaticResource PhoneForegroundBrush}" Content="{Binding}"/>
</DataTemplate>
</toolkit:ToggleSwitch.HeaderTemplate>
<toolkit:ToggleSwitch.ContentTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Alarm: " FontSize="{StaticResource PhoneFontSizeSmall}"/>
<ContentControl HorizontalAlignment="Left"


FontSize="{StaticResource PhoneFontSizeSmall}" Content="{Binding}"/>
</StackPanel>
<TextBlock Text="every schoolday"
FontSize="{StaticResource PhoneFontSizeSmall}"
Foreground="{StaticResource PhoneSubtleBrush}"/>
</StackPanel>
</DataTemplate>
</toolkit:ToggleSwitch.ContentTemplate>
</toolkit:ToggleSwitch>

Other -----------------
- Windows Phone 7 : Using Media Player to Shuffle Songs in Your Media Library
- Windows Phone 7 : Picking a Photo from Your Media Library
- The Model-View-ViewModel Architecture (part 2) - GalaSoft MVVM Light Toolkit
- The Model-View-ViewModel Architecture (part 1) - MVVM Overview
- Developing for Windows Phone and Xbox Live : Graphics Performance
- Developing for Windows Phone and Xbox Live : General Performance
- Windows Phone 7 : Media Management - Taking a Photo from Your Phone Camera
- Windows Phone 7 : Sensors - Indicating the User's Position via Coordinates
- Developing for Windows Phone and Xbox Live : Custom Avatar Animations (part 3)
- Developing for Windows Phone and Xbox Live : Custom Avatar Animations (part 2) - Creating the Content Processor
 
 
REVIEW
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox
 
VIDEO TUTORIAL
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
 
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Popular keywords
HOW TO Swimlane in Visio Visio sort key Pen and Touch Creating groups in Windows Server Raid in Windows Server Exchange 2010 maintenance Exchange server mail enabled groups Debugging Tools Collaborating
Top 10
- Microsoft Excel : How to Use the VLookUp Function
- Fix and Tweak Graphics and Video (part 3) : How to Fix : My Screen Is Sluggish - Adjust Hardware Acceleration
- Fix and Tweak Graphics and Video (part 2) : How to Fix : Text on My Screen Is Too Small
- Fix and Tweak Graphics and Video (part 1) : How to Fix : Adjust the Resolution
- Windows Phone 8 Apps : Camera (part 4) - Adjusting Video Settings, Using the Video Light
- Windows Phone 8 Apps : Camera (part 3) - Using the Front Camera, Activating Video Mode
- Windows Phone 8 Apps : Camera (part 2) - Controlling the Camera’s Flash, Changing the Camera’s Behavior with Lenses
- Windows Phone 8 Apps : Camera (part 1) - Adjusting Photo Settings
- MDT's Client Wizard : Package Properties
- MDT's Client Wizard : Driver Properties
 
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro