Adding controls and content (HTML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Every app needs controls, such as buttons, check boxes, and drop-down lists. Windows Runtime apps using JavaScript provide enhanced support for existing HTML controls and additional controls and functionality through the free Windows Library for JavaScript toolkit.

The topics in this section describe how to use and style these controls.

In this section

Topic Description

Add WinJS controls and styles

Describes the basics of creating and using WinJS controls.

Style controls

Learn how to style controls and how take advantage of the styling features that the WinJS provides.

Add item containers

Learn how to add an ItemContainer object to your Windows app using JavaScript.

Add HTML controls and handling events

Describes how to create HTML controls and handle their events.

How to set event handlers declaratively

Learn how to set event handlers declaratively (in your HTML markup) for HTML and WinJS controls.

Controls list

Provides an alphabetical list of the common Windows apps using JavaScript controls.

Controls by function

Lists controls by function.

Add List View, Semantic Zoom, and FlipView

Most applications manipulate and display sets of data, such as a gallery of images or a set of email messages. WinJS provides several controls that make it easy to display, present, and manipulate data. The topics in this section describe these data and presentation controls: FlipView, ListView, and SemanticZoom.

Display and editing text

Describes how to display and edit text.

Display images, graphics, and thumbnails

Contains topics that get you started with displaying images and thumbnails.

Display popups

Contains topics that get you started with displaying flyouts, menus, and message dialogs.

Add buttons

Use a button control to commit a command, like submitting or resetting a form. Buttons offer a simple way to trigger a command.

Add app bars and commands

Most apps provide commands for users to invoke. The topics in this section describe app bars, tool bars and context menus, which can be used to provide commands to users.

Add selection controls

Selection controls let users select between multiple options.

Add ratings

Contains topics that describe how to use the WinJS Rating control to let users provide rating information.

Add Page controls

A PageControl is a modular unit of HTML, CSS, and JavaScript that can be navigated to or used as a custom WinJS control.

Add progress controls

Describes how to create and use progress controls, a control that graphically represents ongoing activity or the progress of a task.

Add tooltips

A tooltip is a short description that is linked to another control or object. Tooltips help users understand unknown or unfamiliar objects that aren't described directly in the UI. They display automatically when the user presses and holds or hovers the mouse pointer over a control. The tooltip disappears when the user moves his or her finger or the mouse pointer. The contents of the tooltip can be text or an image but is not interactive.

Create custom controls

While Windows 8 provides a variety of controls for you to choose from, you might need to create your own. One way to create a custom control is to create a PageControl. For info and examples, please see Quickstart: Adding Page controls.

Use graphics with canvas, SVG, and CSS3

This section contains information on using graphics in your Windows app using JavaScript.