WPF UI components customized for the application

The user interface (UI) controls in the Windows application are customized Windows Presentation Foundation (WPF) controls specifically designed for finger touch access and can be skinned for day or nighttime use. To keep the same user experience, you can reuse these WPF controls in your tasks and project extensions. This topic explains how to use these WPF controls and minimize your development tasks.

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 can 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 message text and caption:

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

A message box with message text, caption, button, and warning icon:

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

For more details, see 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 the 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 the4 page and bind it to the 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 the following seven languages:

• English
• Chinese
• Spanish
• Russian
• Hebrew
• French
• German

You can switch the layout from the language key on the last row of the keyboard. The keyboard LayoutID can be set to Alpha, 101, Number, or NumPad_Modified for a different layout: full keyboard, alpha only, numeric only, or simplified numeric layout, respectively.

Buttons

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

FlatButtonStyle—Flat button with different background and foreground colors for daytime and nighttime skins (for example, the Select All button on the layer visibility dialog box):

FlatButtonStyle is defined in application skin resources and can be used as follows:

<Button Style="{DynamicResource FlatButtonStyle}">

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

• NavigationButtonStyle—General-purpose button that appears in the navigation pane and has different background and foreground colors for daytime and nighttime skins (for example, the Back button on the navigation bar):

• PositiveConfirmButtonStyle—Green button used for positive confirmation (for example, the Ok button on the navigation bar):

• NegativeConfirmButtonStyle—Red button used for negative confirmation (for example, the Cancel button on the navigation bar):

• HighlightButtonStyle—Blue button used to bring a slight emphasis to a button (for example, the Download Project button from the project list page):

The following 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

In addition to the controls described herein, 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 the controls in your task or project extension. These controls change their look and feel automatically if you change to a different skin on the application settings page.

• CheckBox

• Slider

• Combobox

• TextBox

• Scrollbar