Apress Introducing dot NET 4 0 with Visual Studio 2010_8 ppt

CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0 372 Figure 15-8. Improved error handling for user controls Static Resource and Designer Fix Previously, if a static resource was declared in app.xaml, you could not use it in the designer. In VS2010, you can. Drag-and-Drop Data Binding I’m not a big fan of drag-and-drop data binding and I think it’s fair to say that most programmers will rightly scorn such functionality. However, this type of feature can be very useful for quickly putting together simple data entry forms and prototyping applications. VS2010 includes new functionality to easily create data forms and creates some pretty clean XAML. It seems likely that Microsoft might have brought in this feature to encourage some winforms developers to move over. You will now learn about this feature by creating a simple master detail form. 1. Select Data  Show Data Sources. 2. Click the Add New Data Source button on the Data Sources window, and the Choose a Data Source Type window will appear (see Figure 15-9). CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0 373 Figure 15-9. Choose a Data Source Type dialog 3. Select Database and then click Next. The Choose a Database Model screen will appear (see Figure 15-10). Figure 15-10. Choose a Database Model dialog 4. Select Dataset (you could also use an entity data model for this feature) and then click Next. CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0 374 5. In the next screen, select the connection to the example database connection (or create it if you haven’t already) and then click Next. 6. A new screen (similar to Figure 15-11) will now appear, allowing you to select the objects you want to use. Figure 15-11. Choose your poison (sorry) database objects 7. Select the Tables node to select all the tables and change the dataset name to Chapter15Dataset before clicking Finish. 8. You now have the data source set up and if you look over to the Data Sources window (see Figure 15-12), you will see all the tables and their fields. Figure 15-12. Data Sources window after configuring the data source CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0 375 9. You will now create a data grid to show all the films. You don’t want the field FilmID to appear, so click the FilmID beneath the Film table node. A drop-down menu will then appear, allowing you to select different types of UI to be generated for the field. In this case, you don’t want it to appear, so select None. 10. Now drag the Film table node onto the designer surface to create a DataGrid of films (see Figure 15-13). If you run your project now, you will find a fully working DataGrid. However, you’re not done yet; VS2010 also supports the ability to easily create master detail forms. Figure 15-13. Data grid linked to Data source 11. You will now create a details panel to show more details of the film. Click FilmID (beneath the Film node) and change the type to Textbox. 12. Now click the Film node itself and on the drop-down menu change it to Details before dragging it to the right of the data grid (you might want to reposition the grid). 13. You also want to display all the film showings, so click the FilmShowing node and change the drop-down menu to List, and then drag it to the page beneath the grid. 14. Now press F5 to run your application and you will have a fully functional master details view similar to Figure 15-14. CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0 376 Figure 15-14. The final product of the drag-and-drop binding Improved XAML Intellisense XAML Intellisense has been tweaked. Now when you enter the curly bracket for a binding expression, Intellisense will add the other curly bracket for you and pop up a dialog with available options (see Figure 15-15). It seems a shame the team didn’t go further with this feature and show you different objects you could bind to. Figure 15-15. Improved XAML intellisense CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0 377 New Controls WPF 4.0 now contains the DataGrid, Calendar, and DatePicker controls that were previously available as part of the WPF toolkit. Microsoft says that these controls are nearly 100 percent compatible with their Silverlight relations. Figure 15-16 shows the new Calendar and DatePicker controls; Figure 15-17 shows the DataGrid control in action. Figure 15-16. Calendar and DatePicker controls Figure 15-17. DataGrid control The easiest way to create these controls is to drag them from the toolbox or add them manually with the following XAML: <Calendar></Calendar> <DatePicker/> <DataGrid></DataGrid> CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0 378 Ribbon Control and Bag O’Tricks Microsoft says that shortly after the release of VS2010 it will introduce a new WPF Ribbon control. The Ribbon control could work particularly well in conjunction with the new touchscreen APIs. A CTP of the Ribbon control is available at http://wpf.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=29117. Microsoft will also be making an out-of-band release that will contain the following controls under the collection name “Bag O’Tricks” (sorry, no information is available at time of writing, although judging by the control names you can have a pretty good guess at what they do): • AnimatingTilePanel • NumericUpDown • ColorPicker • Reveal • InfoTextBox • TransitionsPresenter • ListPager • TreeMapPanel Windows 7 Integration Windows 7 has some great new UI features such as jump lists, taskbar overlays, and progress indicators. WPF 4.0 allows you to add these features to your applications. It is also worth noting that in this release WPF dialogs now have the same feel of Vista and Windows 7 (depending what they are running on). Jump Lists Jump lists, which allow you to easily perform common tasks, are activated by right-clicking an application on the task bar. Figure 15-18 shows the jump list for Windows Live Messenger. Figure 15-18. Jump list in Windows 7 CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0 379 Like most things in WPF/Silverlight, jump lists can be created programmatically and declaratively. The following code shows how to create a jump list to open Internet Explorer and Notepad that you would define in your MainWindow.xaml: using System.Windows.Shell; JumpList appJumpList = new JumpList(); //Configure a JumpTask JumpTask jumpTask1 = new JumpTask(); jumpTask1.ApplicationPath = @"C:\Program Files (x86)\Internet Explorer\iexplore.exe"; jumpTask1.IconResourcePath = @"C:\Program Files (x86)\Internet Explorer\iexplore.exe"; jumpTask1.Title = "IE"; jumpTask1.Description = "Open IE"; JumpTask jumpTask2 = new JumpTask(); jumpTask2.ApplicationPath = @"C:\Windows\System32\notepad.exe"; jumpTask2.IconResourcePath = @"C:\Windows\System32\notepad.exe"; jumpTask2.Title = "Notepad"; jumpTask2.Description = "Open Notepad"; appJumpList.JumpItems.Add(jumpTask1); appJumpList.JumpItems.Add(jumpTask2); JumpList.SetJumpList(App.Current, appJumpList); Task Bar Windows 7 applications can communicate progress and application status via the task bar. For example, Figure 15-19 shows IE indicating download progress. Figure 15-19. IE indicating download progress WPF 4.0 Windows 7 task bar APIs give you control over the following: • Progress bar overlay (refer to Figure 15-19). • Icon overlay through the Overlay property (e.g., a small picture). • Thumbnail window (a window that pops up showing a miniview of the application's window). Note that you can pick which bit of the window is shown using the ThumbnailClipMargin property. Let’s take a look at how to work with the progress bar. The progress bar allows you to specify a double value between 0 and 1 to indicate your application's progress with the ProgressValue property. You can also indicate different types of status by specifying the ProgressState property. This has five different settings that change the color of the bar: CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0 380 • Error (red) • Indeterminate (green) • None (not shown) • Normal (green) • Paused (yellow) You will now see how to work with this by setting a progress bar at 50% for the application: 1. Create a new WPF application called Chapter15.ProgressBar. 2. Open MainWindow.xaml.cs and add the following using statement: using System.Windows.Shell; 3. Amend the code to the following: public MainWindow() { InitializeComponent(); this.Loaded += new RoutedEventHandler(MainWindow_Loaded); } void MainWindow_Loaded(object sender, RoutedEventArgs e) { TaskbarItemInfo taskBarItemInfo = new TaskbarItemInfo(); taskBarItemInfo.ProgressState = TaskbarItemProgressState.Normal; this.TaskbarItemInfo = taskBarItemInfo; taskBarItemInfo.ProgressValue = 0.5d; } 4. If you now run your application, you should find the progress bar at 50%. Multitouch Functionality Probably one of the most interesting features in WPF 4.0 is multitouch functionality. Multitouch allows your application to work with touch input and gestures (e.g., you can spin an image around by rotating your hand). Multitouch support is Windows 7 only and is enabled by setting the IsManipulationEnabled property on an element to true and then handling the various events that the APIs expose. It's worth noting that multitouch functionality is compatible with Surface SDK 2.0 (the world’s most expensive but cool table). ContentElement, UIElement, and UIElement3D elements support the following events: • PreviewTouchDown • TouchDown • PreviewTouchMove • TouchMove CHAPTER 15  WPF 4.0 AND SILVERLIGHT 3.0 381 • PreviewTouchUp • TouchUp • GotTouchCapture • LostTouchCapture • TouchEnter • TouchLeave Besides simple touch-related events WPF4.0 also supports various gestures. You can restrict the manipulations that can be performed in the ManipulationStarted event by specifying the ManipulationMode. WPF4.0 supports the following gesture-related events: • ManipulationStarted • ManipulationDelta • ManipulationInertiaStarting • ManipulationCompleted • ManipulationBoundaryFeedback At present, hardware support for multitouch is a bit limited and expensive (and who wants grubby fingerprints on their monitors?), but expect this to rapidly change in 2010. Probably the best known multitouch device is the Dell Latitude XT2 and HP touchsmart. If you don’t want to fork out for one of these devices you could give the clever work around with two mice here: http://blog.wpfwonderland.com/2009/06/29/developing-win-7-multi-touch-apps-without-multi- touch-screen/ . MSDN has a good simple example demonstrating WPF’s touch functionality: http:// msdn.microsoft.com/en-us/library/ee649090(VS.100).aspx. Binding Changes Besides the very welcome new Binding window in VS2010, there are a number of other changes in the exciting world of binding. Run.text Run.text is now a dependency property, which means you can now bind to it (one way) unlike previous releases of WPF. Dynamic Binding Support WPF4.0 supports binding to properties implementing the IDynamicMetaObjectProvider interface such as ExpandoObject and anything inheriting from DynamicObject ( (see Chapter 3). [...]... width=" 100 %" height=" 100 %"> 392 CHAPTER 15 WPF 4. 0 AND SILVERLIGHT 3 .0 ... Silverlight contains another great built-in pixel shader called Blur (shown in Figure 15-31) 40 0 CHAPTER 15 WPF 4. 0 AND SILVERLIGHT 3 .0 Figure 15-31 Blur pixel shader effect Applying the Blur effect is very similar to applying DropShadow: ... ... Application.Current.IsRunningOutOfBrowser method 3 90 CHAPTER 15 WPF 4. 0 AND SILVERLIGHT 3 .0 Detecting Connection Status Now that you have the ability to run applications offline, it is very useful to be able to determine whether the user is connected to the Internet This can be accomplished through the GetIsNetworkAvailable method that returns true if the user is connected: System .Net. NetworkInformation.NetworkInterface.GetIsNetworkAvailable()... the best additions to WPF 4. 0 is cached composition, that allows you to cache any part of the visual tree Complex effects can take time to render, which results in a jerky experience for your users and uses vast amounts of CPU and memory WPF 4. 0 allows you to cache elements as a bitmap, 3 84 CHAPTER 15 WPF 4. 0 AND SILVERLIGHT 3 .0 reducing this rendering time and resource usage with the new BitmapCache... following additional formats: • HD (720p+) • MPEG -4 based H.2 64/ AAC Audio ( known as HD TV) • HD playback to full screen by utilizing GPU Silverlight DRM Silverlight 3 .0 contains built-in DRM support using PlayReady with AES encryption NOTE To utilize PlayReady-protected content, you will need access to a PlayReady licensed server 40 2 CHAPTER 15 WPF 4. 0 AND SILVERLIGHT 3 .0 Performance Microsoft has been... CHAPTER 15 WPF 4. 0 AND SILVERLIGHT 3 .0 Pixel Shader 3 .0 Support Previous releases of WPF supported Pixel Shaders version 2 .0 WPF 4. 0 now supports Pixel Shader version 3 .0 Note that the hardware the application is running on must also support the Pixel Shader capabilities To query this, use the static methods on the RenderCapability class such as RenderCapability.IsPixelShaderVersionSupported Visual State... when WPF detects the visual tree changes or any cache-related properties are modified Note that the maximum dimensions the bitmap cache supports are 2 04 8 by 2 04 8 pixels There is an excellent demo by Lester Lobo that shows the difference cached composition can make: http://blogs.msdn.com/llobo/archive/ 200 9/11/ 10/ new-wpf-features-cached-composition.aspx CacheMode can be turned on with the following XAML... supports multiselection TextBox Cursor Styling The TextBox caret can now be styled in WPF 4. 0 and Silverlight 3 .0 with the CaretBrush property This code example changes the caret to a yellow color: Accessibility Silverlight 3 .0 is the first browser plug-in that allows you to utilize any color in the system palette... Although VS 201 0 contains excellent design time support for WPF and Silverlight, if you make many aesthetic changes or are a designer you are probably better off using Blend 3 Blend 3 also contains a great feature called SketchFlow that allows you to produce prototype applications (see Figure 15-33): Figure 15-33 Blend 3 and SketchFlow 40 6 CHAPTER 15 WPF 4. 0 AND SILVERLIGHT 3 .0 Silverlight 4. 0 At the time . CHAPTER 15  WPF 4. 0 AND SILVERLIGHT 3 .0 386 Pixel Shader 3 .0 Support Previous releases of WPF supported Pixel Shaders version 2 .0. WPF 4. 0 now supports Pixel Shader version 3 .0. Note that. functionality: http:// msdn.microsoft.com/en-us/library/ee 649 09 0(VS. 100 ).aspx. Binding Changes Besides the very welcome new Binding window in VS 201 0, there are a number of other changes in the exciting. occur when WPF detects the visual tree changes or any cache-related properties are modified. Note that the maximum dimensions the bitmap cache supports are 2 04 8 by 2 04 8 pixels. There is an excellent