Input Scope Sample Overview
,To provide you with an opportunity to explore the various SIP layouts, I have created a sample view that allows you to switch the InputScope for a TextBox at runtime. The sample is located in the ControlExampleView page and the ControlExampleViewModel class in the downloadable sample code.
The viewmodel exposes a list of InputScopeNameValues, shown in the following excerpt, which is consumed in the view via a data binding to a Windows Phone Toolkit ListPicker control. For more information on the Windows Phone Toolkit and the controls contained therein, see Chapter 9, “Enriching the User Experience with the Windows Phone Toolkit Controls.”
readonly IEnumerable<InputScopeNameValue> inputScopeNameValues
= EnumUtility.CreateEnumValueList<InputScopeNameValue>()
.OrderBy(nameValue => nameValue.ToString());
public IEnumerable<InputScopeNameValue> InputScopeNameValues
{
get
{
return inputScopeNameValues;
}
}
The System.Enum.GetNames method present in the .NET Desktop FCL is notably absent from the Windows Phone SDK. To retrieve the enum values as a list of strings, we retrieve its field values, using a custom class called EnumUtility (see Listing 6.1).
The CreateEnumValueList<TEnum> method uses reflection to extract the names of each enum value.
LISTING 6.1. EnumUtility Class
public static class EnumUtility
{
public static IEnumerable<TEnum> CreateEnumValueList<TEnum>()
{
Type enumType = typeof(TEnum);
IEnumerable<FieldInfo> fieldInfos
= enumType.GetFields().Where(x => enumType.Equals(x.FieldType));
return fieldInfos.Select(
fieldInfo => (TEnum)Enum.Parse(enumType, fieldInfo.Name, true)).ToList();
}
}
The viewmodel tracks the InputScopeNameValue that is selected by the user using a ListPicker control.
InputScopeNameValue inputScopeNameValue = InputScopeNameValue.Default;
public InputScopeNameValue InputScopeNameValue
{
get
{
return inputScopeNameValue;
}
set
{
Assign(ref inputScopeNameValue, value);
}
}
The view binds to the viewmodel properties in its TextBox and ListPicker controls, as shown:
<TextBlock Text="Single-line TextBox"
Style="{StaticResource LabelTextStyle}" />
<TextBox InputScope="{Binding InputScopeNameValue,
Converter={StaticResource InputScopeValueConverter}}" />
<toolkit:ListPicker Header="InputScope"
ItemsSource="{Binding InputScopeNameValues}"
SelectedItem="{Binding InputScopeNameValue, Mode=TwoWay}">
</toolkit:ListPicker>
Changing the ListPicker’s selected item updates the viewmodel’s InputScopeNameValue property. This, in turn, causes the TextBox.InputScope property to be updated.
A custom IValueConverter is used to convert the InputScopeNameValue property, which is an enum value, to an actual InputScope, which is a DependencyObject (see Listing 6.2).
LISTING 6.2. InputScopeValueConverter Class
public class InputScopeValueConverter : IValueConverter
{
public object Convert(
object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null)
{
return null;
}
string scopeString = value.ToString();
InputScope inputScope = new InputScope();
var enumValue = (InputScopeNameValue)Enum.Parse(
typeof(InputScopeNameValue), scopeString, true);
inputScope.Names.Add(new InputScopeName { NameValue = enumValue });
return inputScope;
}
public object ConvertBack(
object value, Type targetType, object parameter, CultureInfo culture)
{
InputScope inputScope = value as InputScope;
if (inputScope == null)
{
return null;
}
if (inputScope.Names.Count > 0)
{
InputScopeName scopeName = inputScope.Names[0] as InputScopeName;
if (scopeName != null)
{
return scopeName.NameValue;
}
}
return null;
}
}
The InputScopeValueConverter is defined as a resource in the view, as shown:
<phone:PhoneApplicationPage.Resources>
<Examples:InputScopeValueConverter x:Key="InputScopeValueConverter" />
</phone:PhoneApplicationPage.Resources>
The view is initially presented with the Default InputScope selected. This is equivalent to leaving the TextBox.InputScope property unset.
Figure 6.7 depicts the view with a single-line and a multiline TextBox each with its InputScope property bound to the InputScopeNameValue viewmodel property.
When either TextBox is selected, the SIP is displayed. See Figure 6.8, which shows the SIP displayed with the Default InputScope.
The Silverlight Toolkit ListPicker control is used to select the active InputScope (see Figure 6.9).
When an item is selected, the viewmodel’s InputScopeNameValue property is updated, which causes the InputScope of both TextBox controls to be updated. In Figure 6.10, you see that by selecting the TelephoneNumber option, the SIP switches to a set of digits.
