Positioning information on paper/screen is known as layout. This tutorial examines the concept of layout for applications screens.
- [Instructor] Positioning information on paper or screen is known as layout. Paper layout is a well understood problem. We've had centuries to distill the lessons learned into a set of elemental rules that guide the print industry. Think about the kinds of print layout you see everyday. Books know how to arrange the written word on pages to make the content readable and interesting. Magazines are full of text too, but they take a different approach to layout, putting text in columns, and splashing full color images across the pages. Advertising billboards are optimized for catching your eye so you'll read the message.
The layout must work on a big screen, and sell you on the product as you move past the sign. Even a concert poster is a study in good layout. Communicating the event details, yet adding graphics that evoke a mood or tell a story. Computer and mobile applications need a good layout too. The computer screen has similarities to print media, so some of the time-tested layout principles apply here. But there are big differences too. Users interact with the application interface in ways they never do with print media. They touch the screen with their fingers, or use a mouse and keyboard, activating part of the UI, interacting with the controls on the screen.
User interfaces in modern UIs are complex. We've got big monitors and dual monitors. The app screens can be packed with information, and application screens are not just for consumption. The user often needs to interact with the app, so the UI needs to contain interaction points, what most UI frameworks call controls. Now that you've got information and controls, you have to arrange the UI in a manner that helps the user with their workflow. A good layout engine should support any layout choice. When a developer or designer dreams up a UI, the layout engine should help make it a reality.
It also needs to support familiar UI metaphors. For example, it should support tabbed content, menus, and dockable areas. Here's some ideas from Visual Studio for UI layout. Across the top are menus and toolbars. On the left and right sides are dockable tool windows that can be collapsed to take up less room, or re-expanded to show the full tool window. There are tabs across the top that allow the user to quickly navigate through the work document, and the documents themselves are rich and varied, showing text and graphics in equal measure.
A good layout engine needs to adapt to changes when the user changes the screen resolution, or screen DPI. It should also work well on small or large screen sizes, and transform intelligently when the user changes the window size. UI elements should be resilient to changes in font sizes. Users don't want to see truncated text just because they bumped the font size to see the content in a larger context. These are some of the factors that make for a good layout. To summarize, layout is a vital part of making a useful application interface.
WPF has a robust layout system that attempts to meet the goals of a good layout engine. There are many parts of the layout system. Some will be familiar to you if you've worked in other UI frameworks. A crucial part of the system, the essence, the backbone, is the panel classes. Understanding how they work is vital to success in WPF. Check out the rest of the course to learn more about panels and the rest of the layout system.
- Exploring the layout panels
- Working with the grid
- Adding rows and columns
- Creating scrolling content
- Controlling element visibility
- Aligning content
- Making custom layout panels