Parent | Child | Previous | Next
 

Scrolling Panel Layout (Template)

Description

ScrollingPanelLayout is a ready-made UX template that implements a scrollable Panel Layout: multiple Panel Cards arranged as a single long page with Panel Layout Behavior set to Scrolling (optional Scroller).

A common pattern in many web sites is to design a page that has a lot of content on the home page of the site (rather than dividing the content into multiple pages). The content on this page can be scrolled using the mouse wheel or the keyboard. You can now implement this pattern by using multiple Panel Cards inside a Panel Layout and then setting the Panel Layout Behavior property to Scrolling.

Set the Panel layout behavior property to Scrolling.
Set the Panel layout behavior property to Scrolling.

When you set the behavior to scrolling you can also indicate if a scroller should be shown to allow the user to quickly scroll the content of the Panel Layout.

When you set the behavior to scrolling you must set an explicit size for all of the Panels (Panel Cards, Panel Navigators and Panel Layouts) that are contained within the Panel Layout.

Panel Size and Dock Options - Layout Size.
Panel Size and Dock Options - Layout Size.

If any of the Panel Cards in a scrolling Panel Layout contain List or ViewBox controls that are set to Delay render till visible, the List or ViewBox will only render once the containing Panel Card is scrolled into view.

Summary: A new UX component template is available when you create a new UX. This template is called ScrollingPanelLayout and it implements a scrolling Panel Layout

Locate the ScrollingPanelLayout in the UX Component Template dialog. Helper text should read: "A UX component with scrolling Panel Cards inside a Panel Layout. Allows you to build a modern-looking web site with scrolling content on the web site home page."
Locate the ScrollingPanelLayout in the UX Component Template dialog. Helper text should read: "A UX component with scrolling Panel Cards inside a Panel Layout. Allows you to build a modern-looking web site with scrolling content on the web site home page."

Click here to download the component.

See Also