Panels are one of the most important elements in WPF and are vital for controlling UI layout. They act as containers for other elements and are responsible for arranging children on the screen. This tutorial looks at the panels provided in WPF and explores their object model.
- [Instructor] Typically when I talk about layout in WPF, I focus on a particular set of elements called panels. These panels derive from this abstract panel class. A panel is a special element which can contain multiple child elements. While all elements support layout, the panels sole reason for existence is to arrange its children at their proper sizes and positions. So specifically a panel does three things. It maintains a collection of child elements. These are of type UI element. It positions those elements, and it sizes those elements.
In this class diagram are the most popular layout panels. When you create a UI with WPF, you'll build it by combining these panels in an arrangement. It's common to have many nested layers of panels in an application screen. It's a good idea to know the purpose of each panel, how it organizes its children. As I said, the six panels shown here are the most common panels. The StackPanel arranges its children in vertical or horizontal stacks, while the WrapPanel stacks its children in multiple rows.
Use the DockPanel to attach elements to the sides of the DockPanel. The Canvas is optimized for absolute positioning of elements. Finally, there are two Grid panels that excel at positioning elements in rows and columns. The main difference between them is how the rows and columns are sized. There are other panels, they're over here in this other class diagram MoreDiagram. The ToolBarPanel is a specialized version of the StackPanel. It works in conjunction with the ToolBar control. When you add ToolBar items to a ToolBar, it's the ToolBar Panel that arranges them on the screen.
If there's not enough room to show all the items in the ToolBar, they overflow into the ToolBarOverFlow Panel. It's the same idea with the Tab Panel. It works in conjunction with the Tab Control element. All the Tab items in the Tab Control are arranged in the visual tree by the Tab Panel. The panels shown in this class diagram are interesting, but you won't use them directly in your UI. They are hidden away inside the ToolBar and Tab Control elements. There's another set of panels you probably won't use directly in most situations. They're over here in this VirtualizingPanels class diagram.
These are the Virtualizing Panels. They add one additional feature to the standard panel. They optimize the process or load and reduce memory footprint of your WPF application. For example, this Virtualizing StackPanel is the default panel for all WPF list controls, like the Combo Box and List Box. Here's a scenario where they help. Imagine you have a data bound list of 300 items in a List Box. Generally, all 300 items are not visible in the List Box. Perhaps they are only showing 12 items.
The Virtualizing Stack Panel only loads a subset of the 300 items into memory. As the user scrolls through the data, the items are just in time loaded into app memory. That closes this overview look of the panel classes. To be an effective WPF developer, you should know the purpose of each panel, how it organizes its children, and what special features and attached properties it offers. The rest of this chapter examines these details.
- Exploring the layout panels
- Working with the grid
- Adding rows and columns
- Creating scrolling content
- Controlling element visibility
- Aligning content
- Making custom layout panels