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. CHAPTER 6 ■ CONTENT AND CONTROLS 143 Figure 6-1. An abridged derivation hierarchy of the major content controls Source Code Conventions As described at the beginning of the previous chapter, the XAML samples shown throughout this chapter show only the content part of the Window element. In this chapter, I’ll be showing more C# code in addition to the XAML, so rather than repeat the boilerplate C# code, I’ll show only the nonboilerplate code. To compile the code, place it inside the boilerplate code, as shown in Figure 6-2. This is a convention that I’ll use throughout the rest of the book. Figure 6-2. The C# code throughout the chapter will contain only the nonboilerplate code of the Window1 class. CHAPTER 6 ■ CONTENT AND CONTROLS 144 The Image Element The Image element (the only element I’ll cover in this chapter that doesn’t derive from ContentControl or ItemsControl) simply displays an image. Notice that it’s called an element, rather than a control, because there’s nothing for the user to interact with. Some of the important things to know about the Image element are the following: • There are two types of image an Image element can display. They are represented by the following two classes: − BitmapImage: This class handles images with the following file extensions— .jpg, .bmp, .png, .tiff, .wdp, and .ico. − DrawingImage: This class handles graphic images that are represented by objects of classes derived from the Drawing class, which I’ll cover in Chapter 18. • Using XAML, you can assign a picture to an Image element by assigning the picture’s relative directory to the Source property, as shown in the following markup. In the example, the picture SweetieSleeping.jpg has the following characteristics: − The file must have been added to the project, with a Build Action type of Resource. Make sure you don’t set it to Compiled Resource. We’ll cover resources in detail in Chapter 11, but for now you just need to know that “compiled resources” are much more difficult to access. − This picture is in a subdirectory called Pictures. If the picture had been located in the same directory as the source files, the specification would not have included the Pictures/ part of the string. Specify the location of the picture. ↓ <Image Source="Pictures/SweetieSleeping.jpg"/> CHAPTER 6 ■ CONTENT AND CONTROLS 145 The following markup assumes that the file SweetieSleeping.jpg has been included as a project resource. It produces the window shown in Figure 6-3. <Grid> <Image Source="SweetieSleeping.jpg"/> </Grid> Figure 6-3. The Image element displays an image. Displaying an Image Using Code Creating the Image element in markup is pretty simple, as you just saw in the previous section. Coding it by hand in C# is a bit more involved. The first things you need to understand are the relationships of the various class objects associated with an image. Figure 6-4 shows the relationship of these objects and an ordered description of the process. An object of the Image class doesn’t actually contain the image. Instead, its Source property refers to an object derived from the ImageSource class. In the case of bitmap images, it’s the BitmapImage class. The BitmapImage object doesn’t contain the image either. Instead, it has a reference to a Uri object, which specifies where the actual image is located. Figure 6-4. Creating an Image object requires the creation of supporting objects. CHAPTER 6 ■ CONTENT AND CONTROLS 146 When creating an Image object in C# code, you must create these three objects separately and connect them, as shown in the following code. The four lines following the InitializeComponent call perform that task. And, of course, you must also create the Grid containing the image and connect it to the Window. public Window1() { InitializeComponent(); Create the Uri for the location. ↓ Uri uri = new Uri( "Pictures/SweetieSleeping.jpg", UriKind.Relative); BitmapImage bitmap = new BitmapImage( uri ); Image image = new Image(); image.Source = bitmap; Grid grid = new Grid(); Create Grid grid.Children.Add( image ); Add Image to Grid Grid.SetRow( image, 0 ); Place Image in Row Grid.SetColumn( image, 0 ); Place Image in Column Content = grid; Add Grid to Window } The following is the markup for the program. (Image2 is the name of the namespace, which Visual Studio creates automatically if you create a solution named Image2.) <Window x:Class="Image2.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> </Window> CHAPTER 6 ■ CONTENT AND CONTROLS 147 The ContentControls The ContentControls allow other WPF elements, controls, and panels as their content. • The ContentControls allow only a single element of content (except the HeaderedContentControls, which I’ll cover later in the chapter). • The item of content is assigned to the Content property, which takes an item of type object. Figure 6-5 shows a depiction of the Content property on the left, and the inheritance hierarchy of the ContentControl on the right. Figure 6-5. The ContentControl inheritance hierarchy How the content is rendered depends on several factors: • If the object assigned to the Content property is derived from UIElement, then WPF knows how to render it and renders it normally. • If the object is not derived from UIElement, there are two possibilities: − If the object is a data object that has an associated data template, then the template is used to render it. I’ll describe data templates in Chapter 15. [...]... by now that WPF uses properties extensively The WPF classes have been specifically designed to use properties rather than methods, when possible, because properties are declarative, making them ideal for XAML’s declarative syntax But beyond just the preference for properties, WPF has produced a whole new way of using properties and a set of services to support that method Before looking at WPF s new... operations on the text in the ComboBox When the IsEditable property is set to True, the appearance of the ComboBox changes so that it looks like a text box Figure 6- 24 shows the difference in appearance between the two states Figure 6- 24 When the IsEditable property is True, the ComboBox looks like a text box When IsEditable is true, the behavior of the text box depends on another property, named IsReadOnly... 6- 14 You control which set of buttons is shown and which image is shown by using the MessageBoxButton and MessageBoxImage enumerations, also listed in the figure The following is an example of the syntax of the four-parameter form: MessageBox.Show( "My Message", "Simple Caption", MessageBoxButton.OKCancel, MessageBoxImage.Information ); // Message and Caption // Button Group // Image Figure 6- 14 There... an integrated set of services, called the WPF property system, whose job it is to keep track of all the factors and determine the values of these properties when they’re called for • The syntax for using dependency properties in your code or markup is the same as that for using properties that are not dependency properties As a matter of fact, most of the WPF properties you’ve seen since the beginning... dependency properties The diagram on the left shows a CLR property with a backing field The diagram on the right illustrates the concept of a WPF dependency property The dotted box labeled InstanceDP represents the instance of the dependency property, which is managed by the WPF property system The box is dotted because a dependency property isn’t really a memory location at all It’s far more, as you’ll soon...CHAPTER 6 ■ CONTENT AND CONTROLS − If the object doesn’t have a template, then WPF calls the object’s ToString method, which by default prints out the name of the class of which the object is an instantiation The Label Control The Label is a simple element used primarily to statically... following is the markup for the ScrollViewer containing the Buttons: Button 1 Button 20 Button 300 Button 40 00 Button 50000 Button 600000 The following is the markup for the ScrollViewer containing the Image: First Item Second Item Third Item . 3</Button> <Button>Button 4& lt;/Button> </UniformGrid> This markup produces the UniformGrid shown in Figure 5- 34. Figure 5- 34. All the cells is a UniformGrid are always. 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,. 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