WinJS.UI Namespace

Provides controls and objects that manipulate data.

The WinJS.UI namespace has these types of members:

  • Enumerations
  • Objects
  • Interfaces
  • Functions

Enumerations

Enumeration Description

AppBarIcon enumeration

Specifies the icon associated with an AppBarCommand object.

CountResult enumeration

Indicates whether the IListDataAdapter was able to provide a count.

CountError enumeration

Indicates that the IListDataAdapter was unable to provide a count.

DataSourceStatus enumeration

Describes the status of an IListDataSource.

EditError enumeration

Specifies the type of error that occurred during an edit operation on a IListDataSource or an IListDataAdapter.

FetchError enumeration

Specifies the type of error encountered when retrieving items from an IListDataAdapter.

GroupHeaderTapBehavior enumeration

Specifies how group headers in a ListView respond to the tap interaction.

HeaderPosition enumeration

Specifies the position of group headers relative to their items in a ListView.

ListViewAnimationType enumeration

Specifies that type of animation for which a contentanimating event was raised.

ObjectType enumeration

Describes the type of object in a ListView.

Orientation enumeration

Specifies the orientation of a control.

PageNavigationAnimation enumeration

Specifies what animation type is used for new pages entering and exiting the viewport.

SelectionMode enumeration

Specifies the selection mode of a ListView.

SwipeBehavior enumeration

Specifies whether elements are selected when the user performs a swipe interaction.

TapBehavior enumeration

Specifies how items in a ListView respond to the tap interaction.

 

Objects

Object Description

AppBar object

The application toolbar used to display commands (AppBarCommand) that are relevant to the user's context, typically the current page or the current selection.

AppBarCommand object

A command to be displayed in an app bar (AppBar).

AutoSuggestBox object

Enables the user to perform search queries and select suggestions.

BackButton object

A dedicated button that enables traversal backward through the navigation stack history.

CellSpanningLayout object

Represents a layout for the ListView in which items are arranged in a grid and items can span multiple grid cells.

Command object

Represents a command.

ContentDialog object

Shows critical information that requires attention or explicit action from the user and temporarily blocks interactions with other elements in the app.

DatePicker object

Allows users to pick a date value.

DOMEventMixin object

Adds event-related methods to the control.

FlipView object

Displays a collection, such as a set of photos, one item at a time.

Flyout object

Displays a lightweight popup that is used to temporarily show UI related to what the user is currently doing. It can be used to reveal a hidden control, show more details about an item, or ask the user to confirm an action. You should only show a flyout in response to a user tap or click. Unlike a MessageDialog, a flyout is always dismissed when the user taps or clicks outside of it.

GridLayout object

Represents a grid layout for the ListView in which items are arranged in a horizontal grid.

Hub object

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

HubSection object

Defines a section of a Hub.

HtmlControl object

Enables you to include an HTML page dynamically. As part of the constructor, you must include an option that indicates the URI of the page.

ItemContainer object

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

Layout object

This object supports the WinJS infrastructure and is not intended to be used directly from your code.

ListLayout object

Represents a layout for the ListView in which items are arranged in a vertical list.

ListView object

Displays data items in a customizable list or grid.

Menu object

Displays a lightweight popup that is used to temporarily show menu commands related to what the user is currently doing. You should only show a menu in response to a user tap or click. Unlike a MessageDialog, a menu is always dismissed when the user taps or clicks outside of it.

MenuCommand object

A command to be displayed in a Menu object.

NavBar object

An app bar dedicated to navigation commands, typically located at the top of the display.

NavBarCommand object

A command to be displayed in a NavBarContainer of a navigation app bar (top app bar).

NavBarContainer object

Container for a group of NavBarCommand objects in a NavBar.

Pivot object

Creates a tab control that displays multiple items.

PivotItem object

Creates an item within a Pivot control.

Rating object

Lets the user rate something by clicking an icon that represents a rating. The Rating control can display three types of ratings: an average rating, a tentative rating, and the user's rating.

Repeater object

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

SearchBox object

Enables the user to perform search queries and select suggestions.

SemanticZoom object

Enables the user to zoom between two different views supplied by two child controls. One child control supplies the zoomed-out view and the other provides the zoomed-in view.

SettingsFlyout object

Provides users with fast, in-context access to settings that affect the current Windows Store app.

SplitView object

Splits an area into two parts: a pane that can appear from an edge and a content area that fills the available space.

SplitViewCommand object

A command to be displayed in a SplitView object.

SplitViewPaneToggle object

Displays a button which is used for opening and closing a SplitView's pane.

StorageDataSource object

A type of IListDataSource that provides read-access to an object that implements the IStorageQueryResultBase interface. A StorageDataSource enables you to query and bind to items in the data source.

TabContainer object

Prevents a DOM sub-tree from receiving tab navigations and focus.

TimePicker object

Allows users to select time values.

ToggleSwitch object

A control that lets the user switch an option between two states: on (checked is set to true) and off (checked is set to false).

Toolbar object

Displays a set of commands. A ToolBar can appear in any location, including in a Flyout or an AppBar.

Tooltip object

Displays a tooltip that can contain images and formatting.

ViewBox object

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.

VirtualizedDataSource object

Serves as the base class for a custom IListDataSource.

 

Interfaces

Interface Description

IFetchResult interface

Contains items that were requested from an IListDataAdapter and provides some information about those items.

IItem interface

Represents an item in a list.

IItemPromise interface

Provides a mechanism for retrieving IItem objects asynchronously.

ILayout object

This API is no longer supported. Starting with the Windows Library for JavaScript 2.0 Preview, use the ILayout2 interface.

ILayout2 interface

Represents a layout for the ListView.

ILayoutSite interface

This API is no longer supported. Starting with the Windows Library for JavaScript 2.0 Preview, use the ILayoutSite2 interface.

ILayoutSite2 object

Represents a rendering site for an ILayout2.

IListBinding interface

Retrieves items from a IListDataSource, enumerates the contents of a IListDataSource, and can optionally register for change notifications.

IListDataAdapter interface

Accesses data for an IListDataSource.

IListDataNotificationHandler interface

Notifies clients when an IListDataAdapter object's data changes.

IListDataSource interface

Provides access to a data source and enables you to bind, change, add, remove, and move items in that data source.

IListNotificationHandler interface

Used by an IListBinding to provide change notifications when items in a IListDataSource change.

ISelection interface

Represents a selection of ListView items.

ISelectionRange object

Represents a range of indexes or keys in an ISelection.

IZoomableView interface

Supports semantic zoom functionality by exposing a control as either the zoomed in or the zoomed out view of the SemanticZoom control.

 

Functions

Function Description

computeDataSourceGroups function

Returns a new IListDataSource that adds group information to the items of another IListDataSource.

disableAnimations function

Disables all Animations Library and ListView animations. Calling this function does not guarantee that the animations will be disabled, as the determination is made based on several factors.

enableAnimations function

Enables all Animation Library and ListView animations. Calling this function does not guarantee that the animations will be enabled, as the determination is made based on several factors.

eventHandler function

Marks a event handler function as being compatible with declarative processing.

executeAnimation function

Asynchronously executes a collection of CSS animations on a collection of elements. This is the underlying animation mechanism used by the Animations Library. Apps are encouraged to use the Animations Library to conform with the standard look and feel of the rest of the system, rather than calling this function directly.

executeTransition function

Asynchronously executes a collection of CSS transitions on a collection of elements. This is the underlying animation mechanism used by the Animations Library. Apps are encouraged to use the Animations Library to conform with the standard look and feel of the rest of the system, rather than calling this function directly.

getItemsFromRanges method

Retrieves the items in the specified index range.

isAnimationEnabled function

Determines whether the Animations Library and ListView animations will be performed if called.

processAll function

Applies declarative control binding to all elements, starting at the specified root element.

process function

Applies declarative control binding to the specified element.

scopedSelect function

Walks the DOM tree from the given element to the root of the document. Whenever a selector scope is encountered, this method performs a lookup within that scope for the specified selector string. The first matching element is returned.

setOptions function

Adds the set of declaratively specified options (properties and events) to the specified control. If name of the options property begins with "on", the property value is a function and the control supports addEventListener.

 

Requirements

Minimum WinJS version

WinJS 1.0

Namespace

WinJS.UI

See also

Quickstart: Adding WinJS controls