Controls list (Windows Store apps using JavaScript and HTML)

Windows Store apps using JavaScript have access to an extensive library of controls that support user interface (UI) development. Some of these controls have a visual representation; others function as the container for other controls or content, such as images and media.

This topic provides an alphabetical list of the common Windows Store apps using JavaScript controls.

A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

A

a

Designates the start or destination of a hypertext link.

HTML

Copy

<a href="url">Your text</a>

Reference: a

app bar

Provides a toolbar for displaying app-specific commands.

HTML

Copy

<div data-win-control="WinJS.UI.AppBar"></div>

Reference: WinJS.UI.AppBar

Quickstart: Adding an app bar

audio

Specifies the sound or audio content, such as music or effects, to be played in a document.

HTML

Copy

<audio>
    <source src="uri" type="audioType" />
</audio>

Reference: audio

B

button

Represents a button control.

HTML

Copy

<button>A button</button>

- or -

HTML

Copy

<input type="button" value="A button" />

Reference: button, input type=button

Quickstart: Adding a button

C

canvas

Provides an object that is used for drawing, rendering, and manipulating images and graphics on a document.

HTML

Copy

<canvas />

Reference: canvas

Quickstart: drawing to a canvas

checkbox

Represents a check box that a user can select and clear.

HTML

Copy

<input type="checkbox" />

Reference: input type=checkbox

Quickstart: Adding checkboxes

combo box

See the entry for "select".

context menu

Provides a lightweight menu that gives users access to actions (like clipboard commands) on text or UI objects in Windows Store apps.

JavaScript

Copy

var menu = new Windows.UI.Popups.PopupMenu();

JavaScript

Copy

var menu = new Windows.UI.Popups.PopupMenu();

Reference: Windows.UI.Popups.PopupMenu

D

date picker

Sets a date.

HTML

Copy

<div data-win-control="WinJS.UI.DatePicker"></div>

Reference: DatePicker

Quickstart: Adding a DatePicker

drop-down list

See the entry for "select".

E

email input box

A single line entry control that accepts one or more email addresses.

HTML

Copy

<input type="email" />

Reference: input type=email

F

file upload

Creates a file upload object with a text box and a browse button.

HTML

Copy

<input type="file" />

Reference: input type=file

flex box

Defines a layout in that takes the available space into account when defining box dimensions, which enables relative sizes and positioning.

HTML

Copy

<div style="display: -ms-box;">
    <!-- Child elements -->
</div>

Reference: display

flip view

Displays a collection, one item at a time.

HTML

Copy

<div data-win-control="WinJS.UI.FlipView"></div>

Reference: WinJS.UI.FlipView

Quickstart: Adding a FlipView

flyout

Displays a message that requires user interaction. (Unlike a dialog, a flyout does not create a separate window, and does not block other user interaction.)

HTML

Copy

<div data-win-control="WinJS.UI.Flyout"></div>

Reference: WinJS.UI.Flyout

Quickstart: Adding a flyout

G

grid

A CSS layout that defines a flexible grid area that consists of columns and rows.

XAML

Copy

<div style="{display: -ms-grid}">
    <!-- Child elements -->
</div>

Reference: display

grid view

A ListView that has a grid layout. See the entry for "list view" for more information.

HTML

Copy

<div data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>

Reference: WinJS.UI.ListView

Quickstart: Adding a ListView

H

hyperlink

See the entry for "a".

Html control

Displays content from an HTML page.

HTML

Copy

<div data-win-control="WinJS.UI.HtmlControl"></div>

Reference: WinJS.UI.HtmlControl

I

iframe

An inline floating frame that can display another document.

HTML

Copy

<iframe src="url" />

Reference: iframe

img

Displays an image.

HTML

Copy

<img src="url" />

Reference: img

J

jump view

See the entry for "semantic zoom".

L

label

Specifies a label for another element on the page.

HTML

Copy

<label for="otherControl">Label text</label>
<input type="text" id="otherControl" />

Reference: label

list box

See the entry for "select".

list view

Displays a collection of data in a list or grid layout.

HTML

Copy

<div data-win-control="WinJS.UI.ListView"></div>

Reference: WinJS.UI.ListView

Quickstart: Adding a ListView

M

media element

See the entries for "audio" and "video."

media player

See the entries for "audio" and "video."

menu

Displays a menu.

HTML

Copy

<div data-win-control="WinJS.UI.Menu"></div>

Reference: WinJS.UI.Menu

menu command

Represents a command to be displayed in a Menu object.

HTML

Copy

<button data-win-control="WinJS.UI.MenuCommand" />

Reference: WinJS.UI.MenuCommand

message dialog

Displays a message that requires an immediate user response.

Reference: Windows.UI.Popups.MessageDialog

Quickstart: Adding a message dialog

multi-line text box

See the entry for "textarea".

N

number input box

A single line entry control that accepts a numeric value.

HTML

Copy

<input type="number" />

Reference: input type=number

P

page control

Represents a custom control or a page in an a navigation app.

Reference: WinJS.UI.Pages.PageControl

Quickstart: Using single-page navigation

panning scroll view

See the entry for "scroll view".

password input box

A single-line text entry control similar to the text input control, except that text is not displayed as the user enters it.

HTML

Copy

<input type="password" />

Reference: input type=password

popup menu

See the entry for "context menu".

progress bar

Displays a bar that indicates that work is in progress.

HTML

Copy

<progress />

Reference: progress

Quickstart: Adding progress controls

progress ring

Displays a ring that indicates that work is in progress.

HTML

Copy

<progress class="win-ring" style="width: 20px; height: 20px" />

Reference: progress

Quickstart: Adding progress controls

push button

See the entry for "button".

R

radio button

A type of selection control that limits a user's selection to a single value within a set of values. To do this, you must link together each button in a set of radio buttons by assigning each button the same name.

HTML

Copy

<input type="radio" id="redRadio" name="colorRadio" /><label for="redRadio">Red</label>   
<input type="radio" id="greedRadio" name="colorRadio" /><label for="greedRadio">Green</label>
<input type="radio" id="blueRadio" name="colorRadio" /><label for="blueRadio">Blue</label>

Reference: input type=radio

range

See the entry for "slider".

rating

Enables the user to rate something or view its existing rating.

HTML

Copy

<div data-win-control="WinJS.UI.Rating"></div>

Reference: WinJS.UI.Rating

Quickstart: Adding ratings

reset button

Resets data in a form.

HTML

Copy

<button type="reset">Reset</button>

Reference: button, input type=reset

Quickstart: Adding a button

rich edit box/rich text box

A control that provides text input functionality that resembles a text input box but can handle content that contains child elements. To create a rich text box, you set the contentEditable property of the elements that you want to edit.

HTML

Copy

<div contentEditable="true">
    <!-- Elements to edit. -->
</div>

Reference: contentEditable

S

scroll bar

A container that enables you to scroll through its contents. You add this scrolling functionality by adding the setting the overflow style of an element to scroll or auto.

HTML

Copy

<div style="overflow:scroll;">
    <!-- Contents -->
</div>

Reference: overflow

scroll view

Displays a view of content a user can zoom in and out of, and provides additional features, such as snap points, that enhance that experience.

HTML

Copy

<div style=overflow:scroll;-ms-content-zooming:zoom>>
    <!-- Contents to edit. -->
</div>

Reference: overflow, ms-content-zooming

select

Represents a list box, combo box, or drop-down list.

HTML

Copy

<select>
    <option>Apple</option>
    <option>Banana</option>
    <option>Grape</option>
    <option>Orange</option>
    <option>Pear</option>
    <option>Watermelon</option>
</select>

Reference: select

semantic zoom

Enables the user to zoom between two views of a collection of items.

HTML

Copy

<div data-win-control="WinJS.UI.SemanticZoom">

  <!-- Control that provides the zoomed-in view. -->
  <div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div>

  <!-- Control that provides the zoomed-out view. -->
  <div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div>

</div>

Reference: WinJS.UI.SemanticZoom

settings flyout

Provides access to app settings.

HTML

Copy

<div data-win-control="WinJS.UI.SettingsFlyout"></div>

Reference: SettingsFlyout

single-line text box

See the entry for "text box".

slider

Provides a range slider for selecting a numeric value.

HTML

Copy

<input type="range" />

Reference: input type=range

submit button

Creates a button that, when clicked, submits the form.

HTML

Copy

<button type="submit">Submit</button>

Reference: button, input type=submit

Quickstart: Adding a button

svg

Defines an SVG document or document fragment that can render vector graphics.

HTML

Copy

<svg xmlns="http://www.w3.org/2000/svg"></svg>

Reference: svg

T

text box

A single-line text entry control.

HTML

Copy

<input type="text" />

Reference: input type=text

text area

A multi-line text entry control.

HTML

Copy

<textarea></textarea>

Reference: textarea

time picker

Lets the user specify a time.

HTML

Copy

<div data-win-control="WinJS.UI.TimePicker"></div>

Reference: WinJS.UI.TimePicker

Quickstart: Adding a TimePicker

toggle switch

Represents a switch that can be toggled between two states.

HTML

Copy

<div data-win-control="WinJS.UI.ToggleSwitch"></div>

Reference: ToggleSwitch

tooltip

Displays a rich tooltip that can support rich content (such as images and formatted text) to show more information about something.

HTML

Copy

<div data-win-control="WinJS.UI.ToolTip"></div>

Reference: WinJS.UI.Tooltip

tooltip, simple

Displays a simple, text-only tooltip for an element.

HTML

Copy

<element title="tooltip text" />

Reference: title

U

URL input box

A single-line text entry control that accepts URLs.

HTML

Copy

<input type="url" />

Reference: input type=url

V

video

Specifies the video content to be played in a document.

HTML

Copy

<video controls="controls">
   <source src="url" type="videoType" />
</video> 

Reference: video

viewbox

Scales a single child element to fill the available space without resizing it. This control reacts to changes in the size of the container as well as changes in size of the child element. For example, a media query may result in a change in aspect ratio.

HTML

Copy

<div data-win-control="WinJS.UI.ViewBox"></div>

Reference: WinJS.UI.ViewBox

W

web view

See the entry for "iframe".

Z

zoomable scroll view

See the entry for "scroll view".

Build date: 11/29/2012