Language: JavaScript and HTML | VB/C#/C++ and XAML

Controls by function (Windows Runtime apps using JavaScript and HTML)

Applies to Windows and Windows Phone

Windows Runtime apps using JavaScript offer controls that perform many functions. You can select the appropriate control for your scenario by comparing controls that offer similar functionality. (For an alphabetical list of controls, see the Controls list.)

See these features in action as part of our App features, start to finish series:  Windows Store app UI, start to finish

App bars and commands

app bar

Provides a toolbar for displaying app-specific commands.


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

Reference: WinJS.UI.AppBar

Quickstart: Adding an app bar

context menu

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


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


Reference: Windows.UI.Popups.PopupMenu

menu (Windows only)

Displays a menu.


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

Reference: Menu

menu command (Windows only)

Represents a command to be displayed in a Menu object.


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

Reference: MenuCommand

navigation bar (Windows only)

Displays navigation commands in a toolbar that the user can show or hide.


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

Reference: WinJS.UI.NavBar

HTML NavBar control sample

navigation bar command (Windows only)

Represents a navigation command in a navigation bar container.


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

Reference: WinJS.UI.NavBarCommand

HTML NavBar control sample

navigation bar container (Windows only)

Contains a group of navigation bar commands in a navigation bar.


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

Reference: WinJS.UI.NavBarContainer

HTML NavBar control sample

popup menu

See the entry for "context menu".

Buttons

back button (Windows only)

Provides backwards navigation in the form of a button.


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

Reference: WinJS.UI.WinJS.UI.BackButton

button

A button control

Represents a button control.


<button>A button</button>

- or -


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

Reference: button, input type=button

Quickstart: Adding a button

push button

See button

reset button

A reset button

Resets data in a form.


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

Reference: button, input type=reset

Quickstart: Adding a button

submit button
A submit button control

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


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


Reference: button, input type=submit

Quickstart: Adding a button

Collection/data controls

flip view

Displays a collection, one item at a time.


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

Reference: WinJS.UI.FlipView

Quickstart: Adding a FlipView

grid view

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


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

Reference: WinJS.UI.ListView

Quickstart: Adding a ListView

jump viewer

See semantic zoom

repeater

Generates HTML from a set of data. Use this control to generate lists of items.


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

Reference: WinJS.UI.Repeater

HTML Repeater control sample

semantic zoom

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


<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

Flyouts

context menu

See "popup menu".

flyout (Windows only)

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


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

Reference: WinJS.UI.Flyout

Quickstart: Adding a flyout

menu (Windows only)

Displays a menu.


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

Reference: WinJS.UI.Menu

menu command (Windows only)

Represents a command to be displayed in a Menu object.


<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

popup menu

Represents a context menu.


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


Reference: Windows.UI.Popups.PopupMenu

Settings flyout (Windows only)

Provides access to app settings.


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


Reference: SettingsFlyout

tooltip (Windows only)

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


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

Reference: WinJS.UI.Tooltip

tooltip, simple

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


<element title="tooltip text" />

Reference: title

Graphics

canvas

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


<canvas />

Reference: canvas

Quickstart: drawing to a canvas

svg

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


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

Reference: svg

Images

img

Displays an image.


<img src="url" />

Reference: img

Layout controls

flex box

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


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

Reference: display

grid

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


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


Reference: display

hub (Windows only)

Creates a hub navigation pattern consisting of sections that can be navigated to. Each section is defined by a hub section.


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

Reference: WinJS.UI.Hub

HTML Hub control sample

hub section (Windows only)

Defines a section of a hub.


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

Reference: WinJS.UI.HubSection

HTML Hub control sample

item container

Defines an item that can be pressed, swiped, and dragged.


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

Reference: WinJS.UI.WinJS.UI.ItemContainer

HTML ItemContainer sample

panning scroll view

See the entry for "scroll view".

pivot (Windows Phone only)

Creates a tab control that displays multiple items.


<div data-win-control='WinJS.UI.Pivot'></div>

Reference: WinJS.UI.Pivot

pivot item (Windows Phone only)

Creates a tab within a tab control.


<div data-win-control='WinJS.UI.PivotItem'></div>

Reference: WinJS.UI.PivotItem

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.


<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.


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

Reference: overflow, ms-content-zooming

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.


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

Reference: WinJS.UI.ViewBox

zoomable scroll view

See the entry for "scroll view".

Media controls

audio

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


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

Reference: audio

media element

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

media player

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

video

Specifies the video content to be played in a document.


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

Reference: video

Navigation

Html control

Displays content from an HTML page.


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

Reference: WinJS.UI.HtmlControl

iframe

An inline floating frame that can display another document.


<iframe src="url" />

Reference: iframe

page control

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

Reference: WinJS.UI.Pages.PageControl

Quickstart: Using single-page navigation

web view

See the entry for "iframe".

Progress controls

progress bar

Progress control styles

Displays a bar that indicates that work is in progress.


<progress />

Reference: progress

Quickstart: Adding progress controls

progress ring (Windows only)

Displays a ring that indicates that work is in progress.


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

Reference: progress

Quickstart: Adding progress controls

Rating controls

rating (Windows only)

A rating control

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


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

Reference: WinJS.UI.Rating

Quickstart: Adding ratings

Selection controls

checkbox

Several checkbox controls

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


<input type="checkbox" />

Reference: input type=checkbox

Quickstart: Adding checkboxes

combo box

See the entry for "select".

date picker (Windows only)
DatePicker light style

Sets a date.


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

Reference: DatePicker

Quickstart: Adding a DatePicker

file upload

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


<input type="file" />

Reference: input type=file

list box

See the entry for "select".

list view

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


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

Reference: WinJS.UI.ListView

Quickstart: Adding a ListView

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.


<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".

search box (Windows only)

Enables the user to perform search queries and select suggestions.


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

Reference: WinJS.UI.SearchBox

SearchBox control sample

select

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


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


Reference: select

slider

Provides a range slider for selecting a numeric value.


<input type="range" />


Reference: input type=range

time picker (Windows only)
TimePicker light style

Lets the user specify a time.

<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.


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

Reference: ToggleSwitch

Text controls

email input box

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


<input type="email" />

Reference: input type=email

multi-line text box

See the entry for "textarea".

number input box

A single line entry control that accepts a numeric value.


<input type="number" />

Reference: input type=number

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.


<input type="password" />

Reference: input type=password

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.


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

Reference: contentEditable

single-line text box

See the entry for "text box".

text box

A single-line text entry control.


<input type="text" />

Reference: input type=text

text area

A multi-line text entry control.


<textarea></textarea>

Reference: textarea

URL input box

A single-line text entry control that accepts URLs.


<input type="url" />

Reference: input type=url

User Help

label

Specifies a label for another element on the page.


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

Reference: label

tooltip (Windows only)

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


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

Reference: WinJS.UI.Tooltip

tooltip, simple

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


<element title="tooltip text" />

Reference: title

Related topics

Controls list
Quickstart: Adding controls
Quickstart: Adding WinJS controls and styles
WinJS API changes for Windows Phone

 

 

Show:
© 2014 Microsoft. All rights reserved.