Lập trình .net 4.0 và visual studio 2010 part 55 ppt

CHAPTER 15

  

365
WPF 4.0 and Silverlight 3.0
WPF and Silverlight developers get some great new features in this release and will benefit from a more
stable and feature-rich IDE, fine-grained control over text rendering, multitouch APIs, ability to cache
any part of the visual tree, support for Windows 7 features such as jump lists, and much more.
Some of the WPF 4.0 changes were influenced and overlap with Silverlight 3.0 so in this (rather
lengthy) chapter you will be covering WPF 4.0 first, then the highlights of Silverlight 3.0, and then briefly
touching on some of the Silverlight 4.0 announcedments from PDC 09.
IDE Enhancements
The IDE support in VS2008 for WPF and (particularly) Silverlight developers was not fantastic; in fact, for
Silverlight developers it sucked because the design view was read only! Although some readers will no
doubt be happier working in pure XAML, the design view can be very useful. The improvements make it
easier than ever to develop WPF and Silverlight applications.
VS2010 WPF/Silverlight Designer
VS2010 contains a much improved designer that offers the same full design time experience in both WPF
and Silverlight projects. The new VS2010 WPF/Silverlight designer supports WPF 3.5, WPF 4.0, and
Silverlight 3.0 project types and is constructed in an extensible manner so will also work with future
releaseswhich is important with Silverlight 4.0 just around the corner!
It is worth noting that Silverlight SDK is included with VS2010, so it is no longer necessary to install
the Silverlight tools to receive IDE support.
Sort by Property Source
The Properties window in VS2010 for XAML applications has a new view mode that prioritizes the
properties that you have defined above all the others This allows you to easily amend and change
properties you are interested in rather than scroll through a lengthy list.
Let’s say you wrote the following XAML (and you would probably write something much more witty
and interesting):

<TextBlock Text="Hello" FontFamily="Arial"></TextBlock>

CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0

366
In VS2010 you can now open the Properties window, click the Sort by property source button (the
third one along),and you will find the properties that you just defined appear at the top of the list (see
Figure 15-1).

Figure 15-1. Sort by property source
Property Icons
Determining how a property gets set can sometimes be quite difficult in WPF. The Properties window
now appends a small icon after each property to indicate their source. Figure 15-1 shows how
FontFamily and Text are prefixed with a black diamond (this indicates a locally set item). A small blue
sun indicates a style setter, and a brush indicates a resource. You can also view further information
about how a property gets set by hovering the mouse over the icon.
Style
The designer in VS2010 makes it much easier to create and manage styles with the new enhancements to
the Properties window. Let’s take a look at this fab feature now.
1. Add the following style to app.xaml:
<Style x:Key="MyStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="54"/>
<Setter Property="Foreground" Value="#FF0000FF"/>
</Style>
2. Now add a TextBlock to your page:
<TextBlock>Hello WPF</TextBlock>
3. Make sure that the TextBlock is selected and then open the Properties window.
4. Inin the Properties window scroll down to where it says Style.
5. Click the text box on the right labeled Resource; this will open a new window. The new window

will show various styles available within the current project (see Figure 15-2). Note this window
also offers a text box–based search as larger projects can obviously contain many styles.
CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0

367

Figure 15-2. Style selection box
6. Finally select the style MyStyle that defined earlier by clicking it to apply it to the element. The
XAML will then be updated to the following:
<TextBlock Style="{StaticResource MyStyle}">Hello WPF</TextBlock>
Brushes
The Properties window contains new functionality to make it easier to create brushes:
1. To see this, select the window or grid and then go to the Properties window.
2. Select the button next to the background text box and a new color picker dialog will appear, as
shown in Figure 15-3 (this color picker window is new).
CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0

368

Figure 15-3. New color picker dialog
3. Select a color (I choose a murky swamp-like green).
4. Right-click the Background text box in the Properties window and select the Extract Value to
Resource option from the context menu to bring up a new resource window.
5. Give the resource a name, and note you are going to save it in the only option currently
available (app.xaml (); if you had resource dictionaries, they would be available here as well).
6. Now select the grid in the design view and then on the Properties pane right-click the
Background option and select Apply Resource.
7. A new window will pop up showing the resources you can apply. Click the local selection bar to
expand it and select the resource you created earlier. You should then see something similar to
Figure 15-4.

CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0

369

Figure 15-4. Using the newly created brush to commit crimes against graphic design
Binding Window
VS2010 makes creating bindings very much easier with a new Binding window. To see this window open
the Properties window; then right-click any property that supports data binding (e.g., a dependency
property) and select the Apply Data Binding option on the context menu.
A window similar to Figure 15-5 will then appear that allows you to easily create and modify
bindings. Note that you can modify the source and path, specify converters, and define various other
advanced options.

Figure 15-5. Binding window
CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0

370
Design Time Data Binding
You can now define a new data source setting that is used just in design view. This could be useful to
allow designers to see how formatting changes would look. At the time of writing I have no information
on this feature.
New Image Picker
A new image picker dialog has been added that allows you to easily select images and will take care of
formatting the returned path for you (see Figure 15-6).

Figure 15-6. New image picker
Improved Grid Designer
VS2010 adds a new option to the DataGrid control to allow you to easily define how columns and rows
should be sized. This window will appear when you define columns and rows and then hover over it. The
menu allows you to choose the following options: Fixed (e.g. 200), Star (* weighted proportion), or Auto

(where the size is determined by the contents). See Figure 15-7.