Illustrated WPF phần 4 docx

CHAPTER 5 ■ LAYOUT

138

The UniformGrid

The UniformGrid is an extremely simple and limited version of a grid. The following are some of the

important things to know about the UniformGrid:

• All the cells of a UniformGrid are always the same size as all the other cells,

regardless of whether the UniformGrid changes size or shape.

• Each cell contains a single element.

• Elements are added to the cells in the order in which they are listed in listing.

• You create the cells by specifying the number of rows and columns in the

UniformGrid element.

The following code creates a UniformGrid with two rows and two columns. It then populates

each cell with a button.

Set the Row Count Set the Column Count

↓ ↓

<UniformGrid Rows="2" Columns="2">

<Button>Button 1</Button>

<Button>Button 2</Button>

<Button>Button 3</Button>

<Button>Button 4</Button>

</UniformGrid>

This markup produces the UniformGrid shown in Figure 5-34.

Figure 5-34. All the cells is a UniformGrid are always the same size as all the other cells, regardless of how

the size or shape of the UniformGrid changes.

CHAPTER 5 ■ LAYOUT

139

Summary

In this chapter, you saw how to use the major layout panels and learned their characteristics:

• The StackPanel stacks its elements vertically or horizontally.

• The WrapPanel places its elements in rows or columns and wraps to a new row or

column when the line reaches the end of the panel.

• The DockPanel allows its elements to select a side on which to adhere.

• The Grid comprises cells formed from rows and columns. This is the most

powerful of the panels we covered.

• The Canvas allows you to associate elements with one of its corners.

• The UniformGrid produces a simple grid with cells that are all the same size.

210

C H A P T E R 6

■ ■ ■

141

Content and Controls

Liberating Content

Source Code Conventions

The Image Element

The ContentControls

The Window Class

The HeaderedContentControls

ItemsControl Elements

Summary

CHAPTER 6 ■ CONTENT AND CONTROLS

142

Liberating Content

WPF is a UI framework that excels in displaying visual content. In previous frameworks, different UI

controls were specialized for particular purposes, and their visual presentations were more or less fixed.

For example, a Label in the Windows Forms framework was a piece of static text. A Button was usually

labeled with text but could also paint its background with an image.

But why should the content of your button be limited to either text or an image? Why shouldn’t

you be allowed to have video on your button—or an animation? Or why should it be so difficult to

include images or individually colored backgrounds in the items of a list box?

In answer to these questions, the designers of WPF said—“it shouldn’t.” They decided to let the

programmers and designers choose what the content of a button or list box item should be. They

factored out the hard-coded restrictions so that you can include whatever kind of content might make

sense in your application.

To create controls of this form, they created two major branches in the class hierarchy tree,

from which the controls would derive. They are the following:

• The ContentControl class contains a property called Content that can hold a single

element of whatever type of UI content is available in WPF.

• The ItemsControl class contains a property called Items, which is an ordered

collection of whatever type of UI content is available in WPF.

The controls derived from these classes give you unprecedented freedom of design. An

abridged version of the derivation hierarchy is shown in Figure 6-1. In this chapter, I’ll cover the classes

shown in the white boxes in the figure. The one class I’ll cover that isn’t derived from ContentControl or

ItemsControl is Image.

Also, as a point of terminology, in WPF the term control has a more restricted meaning than in

previous frameworks. In WPF, a control is a user interface element with which the user can interact.

Previously, any UI element on the screen was called a control.