Surface Garage: ModeSelector sample control
From the Surface Garage
Surface Garage is a community of Microsoft employees that are passionate about Microsoft Surface, Samsung SUR40, computer vision, and natural user interface (NUI) technologies. Last year TechCrunch reporter Devin Coldewey visited the Surface Garage wrote a great article that gives a little more background on the group: "Microsoft’s Surface Garage: A Cross-Department Development Team, With Pizza And Beer." One of the group's goals is to contribute helpful code samples and demos to the greater Surface development community. This work is done by enthusiastic employees in their off-hours. The nature of these projects creates code which is outside the scope of a standard product release; but, as samples they can be valuable to the community.
Overview of the ModeSelector sample control
Since the release of the Microsoft Surface 2.0 Software Development Kit (SDK), there have been numerous requests for a ModeSelector, or "drop down style," control for choosing between multiple items. This control was out of scope for release for the SDK, but the Bing for Microsoft Surface application happens to contain such a control.
The Surface Garage team used the ModeSelector control in the Bing for Microsoft Surface application to create a new sample control. This sample code will help developers create a control designed for touch that can select options in a scrollable drop down list.
The ModeSelector sample control in its expanded form
Usage
This sample instantiates the control via XAML, then populates the ItemSource dynamically in the code behind. If you’re familiar with listbox style controls, you’ll find this one has similar properties and events. The instantiation is contained in the following:
<controls:ModeSelector
x:Name="_ModeSelector" x:FieldModifier="private"
Grid.Row="1" HorizontalAlignment="Left"
Style="{StaticResource SelectorStyle}"
Width="292" MinWidth="242" MaxWidth="292"
SelectedIndex="0" MaxHeight="200"
HorizontalContentAlignment="Left"
Height="50" IsEnabled="True"/>
You'll find the "SelectorStyle" resourse in the Dictionary1.xaml resourse dictionary. It defines the look and builds the control layout.
The control itself is simply populated with:
_ModeSelector.ItemsSource = new string[]
{
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5",
"Option 6"
};
The SelectionChanged event is fired when a selection is made. The following line subscribes to it:
_ModeSelector.SelectionChanged += ModeSelectorSelectionChanged;
The ModeSelector contains a ListBox control internally, which can be queried to find the resulting selected value. This is shown in the code snippet below:
void ModeSelectorSelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBox source = e.OriginalSource as ListBox;
if (source != null)
{
_Results.Text = source.SelectedItem + " Selected";
}
}
Requirements
The ModeSelector sample control requires the Microsoft Blend 4 SDK to be installed. The Microsoft Surface 2.0 SDK and Runtime can be downloaded from the Microsoft Surface Design and Development Center. The ModeSelector sample control attached to this post is provided as-is, and is not supported in any way -- please use it at your own risk. You can download the sample control in the attached ModeSelector.zip file found at the very end of this post.
Feedback
This sample control should make it easier to place a ModeSelector control into an application, hook up a SelectionChanged event, and handle it to find out which event a user has selected.
The Surface Garage team would appreciate feedback on the usefulness of this sample control for developers. Feedback will help frame future contributions from Surface Garage. Options include releasing more samples in an agile format similar to this one, which puts more work on the developer to figure out how to put things together. Or, they can do a slower contribution cadence with more polished source code, but fewer posts. Since the Surface Garage is really looking to help they Surface development community, they'd really like to know what you think. Please post your thoughts and comments below.