Explore the broad world of the WPF control. This video looks at the types of classes that encompass the control family, starting with an overview of the base classes that define the features found in all UI elements. Next is a quick look at panels, decorators, shapes, pages and adorners.
- [Teacher] You probably have a good notion of what defines a control in a UI application. After all, the concept of controls has been around for decades. It's a concept that flows across operating systems and programming languages. Here is an example of a screen from Windows 95. It has interactive text entry controls, tab items across the top, and buttons across the bottom of the form. Here is an older example from the mid 1980s. This screenshot is from the Apple Mac computer. See how many controls you can see on this screen.
I see buttons and sliders, and I'll bet you can use the mouse to move the number tiles in that puzzle application. Now look at a modern era webpage using Bootstrap and written in HTML5. It looks better than those old application pages, but you can still see its interactive control-based interface. There's text input, list boxes and dropdowns, and buttons here, too. The focus of this course is to understand how this concept of controls fit into the WPF ecosystem. So let's start with an overview of the concept.
In older systems and other technologies, a control is defined as anything the user can see or interact with. It's more nuanced than that in WPF. Unlike other UI frameworks, don't assume that anything you can interact with on the screen is a control. To really understand where controls fit into WPF, it helps to understand the WPF architecture. This webpage on the Microsoft Developer Network has a detailed analysis of the class structures that are important. I think you should look at this webpage when you get some time.
I'll summarize the important parts for you in the next couple of slides. We'll start with a look at the base classes for all WPF elements. At the very top of the object hierarchy, you'll find the Object class, followed by the DispatcherObject and the DependencyObject classes. These are important classes, but they are not the focus of the course. Instead, we'll start our discussion of the class model with the next class down the inheritance chain: the Visual class. This is the class that is responsible for providing the drawing services necessary to render a tree of visual objects.
This is the entry point for the WPF composition system, where the visual bits are turned into the DirectX bits necessary to render the scene to the computer screen. Next comes the UIElement class. It adds support for WPF's essentials, such as layout, input, focus, and event handling. It's here that the raw input information from the operating system, like mouse messages, are transformed to useful events like mousemove and mouseenter. The FrameworkElement class is the final stop in the core WPF inheritance tree.
It implements some of the members defined in the UIElement class. For example, UIElement sets the foundation for the layout system. FrameworkElement provides concrete members like margin and alignment. It provides a way to start animations defined in XAML storyboards. It also adds support for data binding, a powerful technique that automatically shuttles data from a data source to a data target. Another core feature is styles. This provides a way to group element properties into a style and easily apply that style to many elements.
This is one of the essential base classes in WPF; over 140 elements derive directly or indirectly from it. At this level, we are finally at a place where we'll find classes that are useful in our XAML file. This is a small sample of the base classes that inherit from FrameworkElement. I picked some general categories. This course explores these categories in more depth in later chapters. The six that we'll look at in this video are the Shape, Panel, Decorator, Adorner, Page, and Control classes. The Shape class is the base class for various shape elements.
The sampling from the WPF library is the Ellipse, Rectangle, Line, and Polygon. You use these classes to draw geometric shapes. Combine these shapes to build icons, logos, and other complex designs. There are a few interesting properties defined in the Shape class. Here you'll find the Fill property, for setting the color or image used within the shape. There are various Stroke properties, too, for setting the size and color of the shape outline. The Panel class provides the base class for all layout containers.
Panels can contain one or more children elements. A panel is responsible for arranging the children on the screen. Here are some of the panels that ship with the WPF framework. I won't cover the layout panels in this course, but don't fret; you can find a lot of details in my WPF Layout course. The Decorator classes are simple elements. They serve as containers for a single child element. Their purpose is to provide additional decorative UI for the child element. For example, a StackPanel is used to arrange elements in a horizontal or vertical stack.
Panels don't have a built-in border. Instead, place the StackPanel inside a border decorator. The decorator draws the border around the contained element. Adorners are specialized elements that are not commonly found in business application interfaces. You might never need one in your application, but they are part of the WPF framework that serves a special need when building designer tools. They are fastened to another element and rendered in a special layer. Here is an example from Visual Studio. When you select an element in the Visual Studio designer, a number of adorners appear.
They are the little rectangles drawn in the corners of the rectangle, and the diamond shapes and dotted lines drawn the upper left corner. Because the adorners live in a special adorner layer, they don't impact the layout of the rest of the user interface. They are interactive; drag the corner adorners to adjust the size of the rectangle, drag the diamonds to change the corner radius of the rectangle. The Page class provides the base class for custom pages in an application. You might be surprised that the page is a FrameworkElement, but that's the truth. Pages are elements that contain other elements.
They are similar to the Window and UserControl classes. Their main purpose is to help build a navigateable UI, one where the user can move through multiple pages of content. These are typically created as a single window and multiple pages. The pages are loaded into a frame on the window. The page provides navigation features like back and forward. I'll use pages in the course, but I don't detail how their navigation system works. Now we get to the Control class, the base class for the controls. They are another of the specialized FrameworkElements.
They excel at gathering user input, they can accept focus of the UI, they are interactive in that the user can engage with the control and input data. But here, it's important to note that other FrameworkElements can also be interactive. So what can a control do that other FrameworkElements can't? Well you can use the Tab key to move to a control. You can specify the alignment of the content within the boundaries of the control. If there's text within the control, you can specify the formatting of that text content by changing the font properties.
And most controls support built-in borders. One of the most powerful features enabled via the Control base class is the control template. Essentially, a control template is the way to define the visual representation of the control. This feature is unique to controls. Other FrameworkElements like Shapes and Panels don't support templates. Another way to think of the concept: all WPF controls have fully replaceable UI. So let's think how this works in practice. When you are wearing the control library developer hat, meaning you are responsible for creating WPF controls, you think about the behavior, properties, and events that are part of the control.
You ask questions like, what should this interactive thing do? How should it behave? What attributes and properties does it need? What channels of interaction does it support? Does it work with mouse input? Does it need a keyboard? Then you create the control. You also provide a default UI. After all, the control needs to have some appearance. Also, most consumers will use the control as is. They'll change the properties on the control, but they won't go any farther. As a consumer of the controls, you pick the control based on the desired behavior it will have in your application interface.
For example, a button signals the start of an action. You select a TextBox when you need to gather string data from the user. You choose the slider to gather a fixed range of numeric data from the user. You put the control in the application UI. Next, you set some properties and wire up event handlers. It works as expected using the default UI template created by the control developer. But with the power of template, you can leave the properties of event handlers untouched.
Create a replacement template and assign it to the control. This template can be simple or complex. It's composed of other FrameworkElements. The wonderful part is that even though the control looks different, it has the same behavior and uses the same control events. To summarize the message in this video, in WPF, controls are one type of UI element. Unlike other UI frameworks, don't assume that anything you can interact with on the screen is a control. It's more nuanced than that in WPF. In reality, you build the application UI from a rich set of FrameworkElements.
Some of these are optimized for arranging elements on the screen, others are good at drawing geometric shapes onto the screen. The controls themselves are a subset of this library of elements. The elements themselves inherit useful features from the base classes. Features like data binding, styles, control templates, and events are part of this feature set. As this course unfolds, I'll dig into the features introduced in these base classes. Then I'll explore the element categories that include shapes, decorators, and controls.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family