Illustrated WPF phần 9 pot

CHAPTER 16 ■ TREES, TABS, AND OTHER CONTROLS 381 The DatePicker Control The DatePicker control allows the user to enter a date either by typing the text in a text box or by using the DatePicker’s built-in Calendar control. Like the Calendar control, the DatePicker control is included in WPF 4.0. Figure 16-16 shows screenshots of the DatePicker control. Figure 16-16. The DatePicker control allows the user two ways to enter a date. The following is the markup for the DatePicker control shown in Figure 16-16: <StackPanel> <DatePicker Name="datePicker" HorizontalAlignment="Left" Width="110"/> <TextBlock Text="Selected Date" FontWeight="Bold" Margin="5,5,5,2"/> <TextBlock Margin="20,0" Text="{Binding ElementName=datePicker, Path=SelectedDate}" /> </StackPanel> Most of DatePicker’s important properties are for interacting with its built-in Calendar control and behave the same way. These properties include DisplayDateStart, DisplayDateEnd, BlackoutDates, and SelectedDate. For example, Figure 16-17 shows a DatePicker with the DisplayDateStart and DisplayDateEnd properties set. Figure 16-17. The DatePicker control uses many of the same properties as the Calendar control. CHAPTER 16 ■ TREES, TABS, AND OTHER CONTROLS 382 The DataGrid Control The DataGrid control, introduced in WPF 4.0, displays a two-dimensional grid of data, as shown in Figure 16-18. Although the screenshots in the figure show a very plain grid, the DataGrid gives you extensive control over many aspects of its appearance. Figure 16-18. By default, the user can sort a DataGrid on any column. The DataGrid is a powerful control, with a large number of features. The following are some of the most important: • Sorting: You can programmatically sort the rows on a particular column. The user can sort on a column by clicking its header. • Column headers: You can display just column headers, just row headers, or both. • Rearrange columns: You can rearrange the columns programmatically, or the user can rearrange them by dragging the headers left or right. • Specialized cell types: The grid supplies specialized column types for text, Buttons, CheckBoxes, ComboBoxes, and Hyperlinks. • Customized appearance: You can attach Styles and Templates to the DataGrid, as well as to most of its components. This gives you a large number of options for customizing the grid’s appearance. CHAPTER 16 ■ TREES, TABS, AND OTHER CONTROLS 383 Because of the DataGrid’s large number of features, an exhaustive description is beyond the scope of this text. Using the DataGrid, however, is fairly simple, once you have the basics. The three basic things you need to do when creating a DataGrid are the following: • Create the column descriptions. • Attach the data. • Customize the various parts of the grid with Styles, Templates, and Brushes. Figure 16-19 illustrates the structure of the DataGrid and the four properties for defining the columns and attaching the data. Figure 16-19. The DataGrid requires column definitions and data. The sample program defines four columns and attaches a List of Person objects to the ItemsSource property. If the AutoGenerateColumns property is set to True (which is the default value), then WPF inspects the data and creates columns automatically based on the data. When you use this method, however, you don’t have control of the appearance of the data in the grid. Although automatically generating the columns can be useful as an initial pass, or for a quick prototype, generally you’ll want to create a set of column definitions that specify how to display the data in the column. To do this, set AutoGenerateColumns to False, and define each column in the DataGrid’s Columns property, as shown in the following markup. This markup defines two text columns. The first is bound to a property called FirstName, and the second is bound to a property called LastName. <DataGrid Name="dg" AutoGenerateColumns="False"> ← Explicitly turn off autogeneration. <DataGrid.Columns> <DataGridTextColumn Binding="{Binding FirstName}" Header="First Name"/> <DataGridTextColumn Binding="{Binding LastName}" Header="Last Name"/> ↑ ↑ ↑ Use the correct type of colum. Bind to the data field. Set the text of the header. There are four predefined DataGrid column types: DataGridTextColumn, DataGridCheckBoxColumn, DataGridHyperlinkColumn, and DataGridComboBoxColumn. There is also the DataGridTemplateColumn, which allows you to specify your own column types. Since the DataGrid is derived from ItemsControl (through several intermediate classes), you can attach data to a DataGrid using either its Items property or its ItemsSource property. CHAPTER 16 ■ TREES, TABS, AND OTHER CONTROLS 384 The following is the markup that produces the DataGrid shown in Figure 16-18. Notice the Width attributes in the last two column definitions. The first one is set to SizeToHeader, and the last one is set to *. The Width property of a DataGrid column can have a numerical value as you’ve seen with Widths throughout the text. Beyond that, however, it can have several other interesting values, which are the following: • Auto: This is the standard automatic sizing mode, which determines the size necessary to fit all the content. • SizeToCells: This determines the size necessary to display the content of the data cells, regardless of the size of the header. • SizeToHeader: This determines the size necessary to display the header, regardless of the size of the content of the data cells. • *: “Star” sizing specifies that this column should take up the remaining width of the DataGrid or split the remaining width among the other “star-sized” columns. <StackPanel> <DataGrid Name="dg" AutoGenerateColumns="False" Margin="10"> <DataGrid.Columns> <DataGridTextColumn Binding="{Binding FirstName}" Header="First Name"/> <DataGridTextColumn Binding="{Binding LastName}" Header="Last Name"/> <DataGridCheckBoxColumn Binding="{Binding HasRoadster}" Header="Has Roadster" Width="SizeToHeader"/> ← Width <DataGridTextColumn Binding="{Binding Age}" Header="Age" Width="*"/> ← Width </DataGrid.Columns> </DataGrid> </StackPanel> CHAPTER 16 ■ TREES, TABS, AND OTHER CONTROLS 385 Figure 16-20 illustrates the structure of the example program. The DataGrid defines four columns, and the data is taken from a List<> of Person objects. Figure 16-20. The structure of the example program The following is the code-behind for the program. The Person class, with four properties, is declared at the top of the file. The Window class, declared at the bottom, creates a List of four Person objects and assigns the List to the DataGrid’s ItemsSource property. class Person { public string FirstName { get; set; } public string LastName { get; set; } public int Age { get; set; } public bool HasRoadster { get; set; } public Person(string fName, string lName, int age, bool hasRoadster) { FirstName = fName; LastName = lName; Age = age; HasRoadster = hasRoadster; } } public partial class Window1 : Window { List<Person> _people = new List<Person>(); public Window1() { InitializeComponent(); _people.Add(new Person("Sherlock", "Holmes", 54, false)); _people.Add(new Person("Jane", "Marple", 60, false)); _people.Add(new Person("Nancy", "Drew", 16, true)); _people.Add(new Person("Charlie", "Chan", 50, false)); dg.ItemsSource = _people; } } CHAPTER 16 ■ TREES, TABS, AND OTHER CONTROLS 386 Figure 16-21 illustrates additional properties of the DataGrid control that allow you to customize its appearance. You can use Brushes, Styles, and Templates to control the appearances of most of the DataGrid’s parts. Figure 16-21. Some of the important properties available for formatting the DataGrid control Figure 16-22 illustrates properties of the DataGrid associated with rows or cells the user selects. Figure 16-22. Properties of the DataGrid control that deal with selected rows and items CHAPTER 16 ■ TREES, TABS, AND OTHER CONTROLS 387 Summary In this chapter, I covered controls that didn’t fit into categories earlier in the text and also three controls introduced in WPF 4.0. • The TreeView control is ideal for representing hierarchical collections. It consists of a set of nodes, where each node can have subnodes, down to arbitrary depth. • The TabControl is a panel that acts like a file folder, where every tab contains a different set of content. • The Calendar control presents the visual display of a calendar, and the user can select dates on the calendar. You can programmatically restrict the calendar to show only ranges of dates or to include “blackout” dates, which the user can’t select. Calendar is new with WPF 4.0. • The DatePicker control presents a text box for the user to enter a date. At the right of the text box is an icon that can display the Calendar control, from which the user can select a date. DatePicker is new with WPF 4.0. • The DataGrid control is a powerful grid control for displaying data. DataGrid is new with WPF 4.0. C H A P T E R 17 ■ ■ ■ 389 Text and Documents Text in WPF An Overview of Flow Documents The Components of a Flow Document The Content of a Flow Document The TextBlock Element CHAPTER 17 ■ TEXT AND DOCUMENTS 390 Text in WPF WPF allows programmers to design programs with amazing graphic content with unprecedented ease. Text, however, still plays an important part in most programs and can even be the dominant component of some. Programs can use different amounts of text and use it in very different ways. In this chapter, you’ll learn some of the ways WPF provides for presenting text. Generally, programs use small amounts of text to label parts of the UI so the user knows what controls and elements are used for. This is text about the program and is often implemented using the Label element you saw in Chapter 6. In this case, the text is just an incidental part of the program. Sometimes, however, the text isn’t about the program; instead, the purpose of the program is to present the text. For example, you might want to build an application that allows the user to access a set of documentation. WPF supplies the following ways of presenting this type of text: • Fixed documents: These are documents where the text is laid out in a fixed format. The user can page through the document, but regardless of the size of the window, the pagination and formatting of the document remain unchanged. This is similar to an Adobe PDF file. I won’t be covering this type of document. • Flow documents: These documents behave in a manner similar to HTML pages. When the user changes the size of the window, the hosting program (the browser in the case of HTML) readjusts the layout of the text to fit the new size and shape of the window. • TextBlock elements: These are advanced versions of the TextBox element that allow you to format the text. Fixed documents and flow documents are generally used for large amounts of text that span multiple pages. The TextBlock element is used for small amounts of text that need to be formatted. [...]... It allows extensive formatting capabilities, as well as allowing bitmap effects 410 C H A P T E R 18 ■■■ Graphics in WPF Graphics in WPF Transforms BitmapEffects Brushes Shapes Geometries Drawings 411 CHAPTER 18 ■ GRAPHICS IN WPF Graphics in WPF As you’ve seen throughout this text, WPF is a much more graphics-oriented framework than any previous Windows development framework So far, I’ve covered graphics... text or UIElement objects 396 CHAPTER 17 ■ TEXT AND DOCUMENTS For example, Figure 17 -9 shows the markup for a simple flow document application The figure on the right shows the structure of the application Notice the following about the markup: • The FlowDocument contains two Paragraph objects • Each Paragraph object contains Inline-derived objects containing text Figure 17 -9 A simple flow document and... the topics I’ll be covering in this chapter and how they fit into the scheme of WPF Figure 18-1 The major areas of graphics in WPF The first two topics I’ll cover are Transforms and BitmapEffects These topics are applicable to all elements derived from the UIElement and FrameworkElement classes, which includes most of WPF s visual elements As you can see in Figure 18-2, these classes define properties... assign it to the LayoutTransform property, the transformation is performed when WPF is calculating the layout of the element If you assign it to the RenderTransform property, WPF delays applying the transform until the rendering phase of the display I’ll address this in more detail shortly 413 CHAPTER 18 ■ GRAPHICS IN WPF The RotateTransform The RotateTransform rotates the element at a specified angle... Stand up sit down.Fight, fight, fight! Figure 17- 19 shows the window produced by this markup Figure 17- 19 Four TextBlocks with simple formatting 408 CHAPTER 17 ■ TEXT AND DOCUMENTS Besides this simple formatting, the TextBlock is capable of far more than I can cover in this chapter,... Button 1 Button 2 Figure 17-20 A window with three TextBlocks showing more advanced features 4 09 CHAPTER 17 ■ TEXT AND DOCUMENTS Summary WPF provides several ways of presenting formatted text In this chapter, I covered the FlowDocument element its associated elements as well as the TextBlock element Flow documents allow... Inline-derived objects containing text Figure 17 -9 A simple flow document and its structure Figure 17-10 shows a screenshot of the program shown in Figure 17 -9 Figure 17-10 The FlowDocumentReader hosting element lays out the content of the FlowDocument 397 CHAPTER 17 ■ TEXT AND DOCUMENTS Creating a flow document consists, essentially, of mixing, matching, and embedding the elements of different types Table... line in the run of the text Run Contains plain text In markup, text that isn’t inside an Inline-derived element is assumed by WPF to be a Run element Span Groups other Inline-derived elements You can use this to apply formatting to a contiguous set of inline elements Underline 398 Description Underlines the enclosed text CHAPTER 17 ■ TEXT AND DOCUMENTS Not all elements, however, can be arbitrarily embedded... LineBreaks, Spans, and so on Sections, Figures, and Floaters can contain Paragraphs, Sections, BlockUIContainers, and so on Figure 17-11 The containment relationships allowed for various element types 399 CHAPTER 17 ■ TEXT AND DOCUMENTS The markup in Figure 17-12 illustrates some of these relationships Some important things to notice about the markup are the following: • Titles are created by using a... ↑ Set the Pivot Point 415 CHAPTER 18 ■ GRAPHICS IN WPF Using LayoutTransform vs RenderTransform As I mentioned earlier, you can apply a Transform to either the LayoutTransform property or the RenderTransform property Figure 18-7 shows the architecture • If you apply the Transform to the LayoutTransform property, then the WPF layout engine applies the Transform when it is laying out the . new with WPF 4.0. • The DataGrid control is a powerful grid control for displaying data. DataGrid is new with WPF 4.0. C H A P T E R 17 ■ ■ ■ 3 89 Text and Documents Text in WPF An. The Content of a Flow Document The TextBlock Element CHAPTER 17 ■ TEXT AND DOCUMENTS 390 Text in WPF WPF allows programmers to design programs with amazing graphic content with unprecedented. Templates, and Brushes. Figure 16- 19 illustrates the structure of the DataGrid and the four properties for defining the columns and attaching the data. Figure 16- 19. The DataGrid requires column