WPF UI components

The UI controls in the Windows application are customized WPF controls specifically designed for finger touch access and can be skinned for day- or nighttime use. To keep the same user experience, you might want to reuse these WPF controls in your tasks or project extensions. This section explains how to use these WPF controls.

Message box

A WPF-style message box is defined in ESRI.ArcGIS.Mobile.Client.Windows.MessageBox.

public static MessageBoxResult ShowDialog(Window owner, 
    string messageBoxText, 
    string caption, 
    MessageBoxButton button, 
    MessageBoxImage image);

image is an enum type for specifying the icon displayed in the message box; it could be None, Error, Hand, Stop, Question, Exclamation, Warning, Information, or Asterisk. The ShowDialog function has several overloads, which only need one or more arguments. See the following examples:

A message box with caption and message text

ESRI.ArcGIS.Mobile.Client.Windows.MessageBox.ShowDialog("No Feature Selected !", "Warning");

A message box with caption, message text, and a warning icon

ESRI.ArcGIS.Mobile.Client.Windows.MessageBox.ShowDialog("No Feature Selected !", "Warning", MessageBoxImage.Warning);

For more details, refer to the assembly class reference.

Virtual keyboard

The Windows application provides a virtual on-screen keyboard for input. It can be put on a page and bound to a UI control on that page. To use the virtual keyboard on a page, you first need to add a reference to VirtualKeyboard in the page:

<MobileClient:MobileApplicationPage
x:Class = "ESRI.ArcGIS.Mobile.Client.Pages.DownloadProjectPage"
xmlns:MobileClient="clr-namespace:ESRI.ArcGIS.Mobile.Client" 
xmlns:VKey="clr-namespace:ESRI.ArcGIS.Mobile.WPF.VirtualKeyboard"
...
>

To use the keyboard with a text box, add a TextBox control on this page:

<!-- a textbox for input with virtual keyboard-->
<TextBox x:Name="_textbox"> use virtual keyboard to input</TextBox>

Then add the virtual keyboard control to this page and bind it to this text box:

<!-- Keyboard -->
<VKey:VirtualKeyboard  
    VerticalAlignment="Bottom"
    HorizontalAlignment="Center"
    x:Uid="_vKeyboard" x:Name="_vKeyboard"
    Focusable="False"
    KeyboardXML="VirtualKeyboard\keyboard.xml"
    LayoutID="101"
    InputControl="{Binding ElementName=_textbox}"
    RenderTransformOrigin="0.5,1"
    Visibility="Visible"
    Height="300" 
    Width="800"
    >
</VKey:VirtualKeyboard>

The Windows application ships with keyboard layouts for seven languages: English, Chinese, Spanish, Russian, Hebrew, French, and German. You can switch the layout from the language key on the last row of the keyboard. The keyboard LayoutID could be set to Alpha, 101, Number, or NumPad_Modified for a different layout: full keyboard, alpha only, numeric only, or simplified numeric layout, respectively.

Refer to the SettingsExtension and GeocodingTask samples for more details.

Buttons

There are several button styles defined in the framework that can be reused in your task or extension.

FlatButtonStyle: A flat button with different background/foreground color for daytime and nighttime skins (for example, the Select All button on the layer visibility dialog box)

Need alt text
Need alt text

FlatButtonStyle is defined in application skin resources and could be used as shown below:

<Button Style="{DynamicResource FlatButtonStyle}">

For buttons on the navigation bar, there are the following four styles:

Below is an example of how to specify a navigation button's style:

PageNavigationCommand viewMapButton = new PageNavigationCommand(
    // a positive button in green, other options are Default, Negative, Highlighted
    PageNavigationCommandType.Positive,   
    "View Map",
    param => this.viewMapCommandExecute(),
    param => this.CanExecuteViewMapCommand
    );

Other UI controls

Besides the controls explained above, there are several other controls that have only one style. This defined style overrides the system default style, which means the application will use the defined style automatically when you use them in your task or project extension. These controls will change their look and feel automatically if you change to a different skin on the application settings page.


9/20/2011