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;

}

}