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 releaseswhich 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. . applications. VS 201 0 WPF/Silverlight Designer VS 201 0 contains a much improved designer that offers the same full design time experience in both WPF and Silverlight projects. The new VS 201 0 WPF/Silverlight. 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 VS 200 8 for. 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 VS 201 0 makes creating