We've added 15 HTML and JavaScript controls to Essential Tools for Mobile MVC. These controls run solely on the client side to improve performance and maintain lightness.
The controls include the following:
Button Control (Can be set as a form button, action link, or route link)
Dialog Control
GroupButton Control
Toolbar Control
Menu Control (Available in red, black, gray, green, and white.)
Rating Control
ScrollPanel Control
Tab Control
Toggle Button
List Box
Waiting Pop-up
Header and Footer controls are also available to contain content for your mobile application, such as captions and navigation buttons.
The Toolbar control hosts application functions in an easy-to-access strip. It is similar to the native toolbar found in Windows Phone. It supports text, images, four built-in skins, templates, and data binding. When items in the toolbar are selected, they become highlighted. One added feature is that the toolbar can be disabled—displayed in gray but not operational.
Toolbar Enabled
Toolbar Disabled
Similar in appearance to the native button found in Windows Phone, the Button control will change backgrounds when clicked, and can be disabled, appearing in gray.
Enabled Button
Disabled Button
The ListBox control presents selectable items in a list. Once an item is selected, an action is preformed or another page or list is displayed. This list box has been implemented for Windows Phone and adheres to the Windows Phone style.
ListBox Control
List Box and Child Items
List Box Child Items
The Header control is used to display text in the default style of Windows Phone.
Header Control
The Dialog control displays an alert or confirmation message. It has been molded to the Windows Phone style, and allows the following dialog elements to be modified: title, theme, display position, and dimension. It also prevents access to the page until the dialog is closed.
Windows Phone Dialog Box
The Menu control provides two types of menus: a context menu and an options menu. The options menu expands from the bottom of the screen to reveal items that can be selected from a list. The context menu opens anywhere on the screen to reveal items.
Options Menu
Context Menu
The toggle button switches between two states either by sliding or clicking the button. The default state of the control can be set, and the panel color can be specified.
Toggle Button Turned 'On'
Toggle Button Turned 'Off'
The Tab control allows you to access multiple pages from a single page. These pages can be grouped under categorized tabs, and page content can be displayed by tapping on a tab or swiping to scroll through page content. Swiping past the last tab takes you back to the first tab.
For Windows Phone, the tabs are themed according to the Windows 8 style.
Tab Control
The AutoCompleteTextBox control helps users complete a word or phrase as it is being typed in a text box. With each keystroke, the control searches for a matching sequence of letters and returns a list of suggestions. Two modes are available: server and JSON.
Relevant letters can be highlighted in the suggested words, and other features are available, such as case sensitivity, right-to-left alignment, and suggestion list positioning.
AutoComplete Text Box with Highlighting
AutoFill
Left-to-Right Alignment
The Rating control has been added for Windows Phone render mode. This control lets users rate something by clicking an icon that represents a rating.
Rating Control
