Choose a Control:
Possible Use Cases:
By default, SplitView pane is partially visible in its closed state and it’s an overlay in its opened state.
This scenario shows how to create a SplitView with the '.win-splitview-button' div that sits at the top left corner of the SplitView and toggles the state of the pane when clicked. The first element of SplitView will be part of the pane and the rest will be part of the content area.
Developers can set the position of the pane relative to the content. By default, SplitView has a left aligned pane. This scenario shows how to create a right aligned pane.
This scenario shows how to change the display modes of the pane for its closed and opened states. You will often want to take advantage of this to adapt your app to various screen sizes.
This sample chooses to reconfigure the SplitView for different screen sizes as follows:
- Large screen option: Pane is partially visible in its closed state. In its opened state it is side by side with the content, taking up space in the layout of the control.
- Medium screen option: Pane is partially visible in its closed state. In its opened state it overlays the content, not taking up space in the layout of the control.
- Small screen option: Pane is completely hidden in its closed state. In its opened state it overlays the content, not taking up space in the layout of the control.
This FlipView is created using a simple JSON array as a data source and a simple template to create the items.
The following buttons can be used to change the orientation of the FlipView and set the spacing between items.
Create a Content Dialog, specify its title, primaryCommandText, secondaryCommandText, and provide some content.
This scenario shows how to prevent dialog from being implicitly dismissed. Dialog implicit dismissal includes pressing a hardware back button (such as on Phones) and the Escape key on keyboards.
The default colors of the ContentDialog are set by either the ui-dark.css or ui-light.css style sheets, depending on which style sheet is loaded.
You may customize the colors of the ContentDialog by overriding the appropriate CSS rules.
- Single: Used for scenarios where users choose one item from a group of mutually exclusive choices.
- Extended: Familair to keyboarding power users who may have used it to select items in File Explorer, Word, and Excel. In touch-only and mouse-only scenarios it behaves exactly like single selection. But if you use Shift and Ctrl along with the arrow keys or mouse you can select multiple items.
- Multi: Used for scenarios where users choose one or more items from a group of choices that are not mutually exclusive.
- Read Only: Used to disable selection.
In this scenario we demonstrate how to enable end-user reordering of the Listview using the "itemsReorderable" property.
The property is a boolean option to the Listview. When it is set to 'true' the listview becomes reorderable. The listview handles all the UX and datasource moves. Making a user-orderable list, is as simple as a single line of code!
This scenario demonstrates how to load more data into your ListView by registering an event handler for the footervisibilitychanged event. When the footer is visible, the event handler loads more data into the ListView.
This scenario demonstrates how to use interactive and data-bound content placed inside of header and footer elements of a ListView.
This example shows how to create a ListView control in markup using WinJS.UI.ListLayout. The ListView control’s data source is a WinJS.Binding.List, and the ListView uses a WinJS.Binding.Template object to render its items.
This example shows the ListView in ListLayout with groups. In addition to scenario 1, we create a grouped BindingList, set groupHeaderTemplate, groupDataSource, and specify groupHeaderPosition of the layout to 'top'.
This example shows how to create a ListView control in markup using WinJS.UI.GridLayout. The ListView control’s data source is a WinJS.Binding.List, and the ListView uses a WinJS.Binding.Template object to render its items.
This example shows the ListView in GridLayout with groups. In addition to scenario 1, we create a grouped BindingList, set groupHeaderTemplate, groupDataSource, and specify groupHeaderPosition of the layout to 'left'.
The sample demonstrates how to implement the minimum set of functions of the custom layout interface for a ListView control. The sample uses a list of status items that have two distinct sizes.
This scenario demonstrates how to style alternating items in the ListView by using the win-container-even and win-container-odd classes that are automatically applied to the items.
This scenario demonstrates the ListView's support for header and footer elements. Simply assign an HTMLElement to either the header or footer property of the ListView control.
The Rating control shows the average rating of an item until the user provides his or her own rating.
The user can clear his or her previous rating by dragging to the left of the control using mouse/touch, pressing "0" key or left arrow key. If your scenario doesn't want to allow that, you could disable it.
This section shows how you can style the rating control.
This example shows how to add rating controls to items in the ListView.
Developers can add commands to the ToolBar declaratively. In this scenario, ToolBar has four primary commands and two secondary commands.
Developers can specify the grouping and drop out order of commands to the overflow area (that does not follow the visual RTL order) for when screen space is limited. The control drops out from the highest to the lowest value. By default, the commands drop out from right to left. But the default value for priority is undefined.
Developers can create multiple ToolBars and show them at once.
Developers can use WinJS.Binding.List to populate a ToolBar with commands via the ToolBar's data property.
The default colors of the ToolBar are set by either the ui-dark.css or ui-light.css style sheets, depending on which style sheet is loaded.
You may customize the colors of the ToolBar by overriding the appropriate CSS rules. In this example, the background color of the ToolBar is set to be transparent and the background color of the overflow area of the ToolBar is customized to match the background image behind it.