WPF Training

1. An Introduction to Windows Presentation Foundation Andrew Troelsen, Microsoft C# MVP Intertech Training 2006

2. Introducing WPF Objectives of Presentation: Understand why we have yet another GUI desktop API. Know the core services offered by WPF. Understand the role of XAML. Understand the XAML => Code => Assembly connection. Work with XAML’s ‘code behind’ files. Examine various XAML editors. Introduce the control content model / control properties / events. Touch upon themes / graphical rendering. Know the role of XBAP and WPF/E. Excellent follow up talk: Layouts, Styles and Templates in WPF Today ( 5:00PM - 6:30PM) Drew Robbins Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 2

3. Introducing WPF Given the simple fact that Microsoft Windows is an OS for the desktop, it is not surprising that we have seen numerous desktop APIs over the years. Each of these APIs provided a different object model / set of functions to solve the same problem: build an executable GUI application. Before the release of .NET 1.0, developers made use of various unmanaged APIs: Raw C/Win32: Very powerful, very complex, not object based. C++/MFC: Very powerful, very complex, mostly object based. Visual Basic 6.0: Simple, RAD, not that powerful, kind of object based (but far less than MFC). Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 3

4. Introducing WPF Since the release of .NET, Windows Forms has become the preferred API to build desktop GUI apps: Very simple, yet completely OO-based API. Available to any .NET programming language. Extendable through construction of custom controls. Support for hosting legacy ActiveX (COM-based) controls. In essence, a SWF app consists of a Form derived type and an application object. Controls as added to the form via the inherited Controls collection. Events are handled using standard delegate syntax. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 4

5. Introducing WPF While there is nothing at all ‘wrong’ with Windows Forms as an API, building a feature rich UI with the current .NET 2.0 toolkit is rather asymmetrical… Today, if you needed to build an application that integrated live video, 3D graphics, 2D graphics, fixed style documents (ala PDF) as well as a core UI, you would need to make use of numerous APIs. Application Requirement .NET 2.0 Solution The basic problem Core Form / Control model Windows Forms is too large of a surface area! 2D Graphics GDI+ (System.Drawing.dll) 3D Graphics DirectX APIs Each API exposes very different types and each Live Video Feeds Windows Media Player APIs requires a different ‘mindset’ to develop Fixed Style Documents Programmatic manipulation of PDF files. with. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 5

6. Introducing WPF With the forthcoming release of .NET 3.0, Microsoft is providing a brand new GUI API which integrates each of these diverse APIs into a single unified model: The model is Windows Presentation Foundation (WPF), previous known as by the code name Avalon. Application Requirement .NET 3.0 Solution Ahhh, much better!! Core Form / Control model Windows Presentation Foundation After all, why not use 2D Graphics Windows Presentation Foundation one coherent API 3D Graphics Windows Presentation Foundation for creating GUI apps, rather than a diverse Live Video Feeds Windows Presentation Foundation collection of ad-hoc technologies? Fixed Style Documents (PDFs) Windows Presentation Foundation Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 6

7. Introducing WPF WPF provides much more than simply an integrated object model however. Consider the following (partial) feature set: A clean separation between the GUI definition and the code which drives it (similar to ASP.NET’s ‘code file’ approach) using XAML. The ability to host a WPF application within a web browser (via XAML browser applications…XBAP). Numerous layout managers to position controls. A new (very slick) data binding engine. Support for styles and templates, to ‘skin’ your WPF apps. WPF relies entirely on vector graphics, allowing an image to be automatically resized to fit the size and resolution of the screen it's displayed on. Support for interop-ing with legacy UI models (Windows Forms, ActiveX, etc). Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 7

8. Introducing WPF Also be aware that Windows Presentation Foundation is not limited to the forthcoming Vista operating system. WPF works just fine on Windows XP, as well as Windows Server 2003 (SP 2). However, understand that WPF is optimized for Vista, so performance gains will be found here. As well, the overall look and feel of a WPF app will integrate ‘better’ under Vista. The Vista driver model helps ensure that a misbehaving WPF app can die gracefully (whereas the same app under XP is subject to the XP driver issues). Driver issues are the largest cause of the Blue Screen of Death! Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 8

9. Introducing WPF Obviously a single talk at HDC cannot cover all aspects of WPF (this would require a full book…or two…or four). Here we will focus on the underpinnings of this new .NET 3.0 technology. We will also examine various code samples, the role of XAML, development tools, etc. Be sure to consult the .NET Framework 3.0 SDK Documentation to augment what you learn here… Also found on www.msdn.com. The WPF docs provide a huge amount of XAML samples, code samples, and coverage of all the WPF services. Don’t be shy! Check it out! Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 9

10. Introducing WPF From a very high level, the architecture of WPF breaks down as so: Developers directly interact with WPF here! Core WPF Services Provides services for: (infrastructure, etc). - Controls, windows, pages - Animation services - Multimedia support This unmanaged DLL, - Document support (PDFs) communicates directly - Data binding with the DirectX layer. - Etc. This is the only aspect of WFP which is authored in C-based code. P*Framework and P*Core are managed assemblies. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 10

11. Introducing WPF Programmatically speaking, Select WPF Meaning in Life WPF is a set of core .NET Namespace assemblies: System.Windows This is the root namespace of WFP. Here you will find core types WindowsBase.dll, (such as Application and Window) which are required by any WPF PresentationCore.dll, desktop project. PresentationFoundation.dll. System.Windows.Controls The WPF control library (Button, etc). System.Windows.Markup This namespace defines a number of types which XAML markup (and the equivalent binary format) to be parsed. System.Windows.Media Animations, 3D rendering, text rendering and other multimedia primitives. System.Windows.Navigation Support for XAML browser applications. System.Windows.Shapes basic geometric shapes (Rectangle, Polygon, etc) used by various aspects of the WPF framework. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 11

12. Introducing WPF When you install the VS 2005 Orcas Technology Preview, you will be able to select from various WPF templates. As you would hope, the templates automatically reference the correct assemblies on your behalf. As well, each template provides basis starter code, much like you would find from the Windows Application project template of Windows Forms. Understand that you can build a WPF application using nothing more than the C# / VB compiler and your text editor of choice. However, VS 2005 does provide: - A XAML editor. - Toolbox w/ WPF controls. - Properties window editing support. - Other helpful tidbits. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 12

13. Introducing WPF You are able to build a WPF application take three distinct approaches: 100% pure code: It is possible to avoid the use of XAML all together and author a WPF entirely in code (C#, VB, etc). 100% pure XAML: As you will see, XAML is a markup language for describing the UI of a WPF and the code that drives it via CDATA sections. A blend of XAML / code: Most WPF apps will take this approach, which looks and feels very similar to the process of building an ASP.NET web application. While it is true that most WPF apps will benefit from using XAML (described shortly), let’s first see an example of building simple application entirely in code. Do be aware that anything that can be described in code can be described in XAML, and vice versa! Like ASP.NET, markup is an illusion. XAML is mapped into an object tree in memory at runtime. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 13

14. Introducing WPF // A Simple WPF Application, written XAML-Free. Use core WPF namespaces. A WPF App using System; using System.Windows; using System.Windows.Controls; In 100% code! namespace SimpleWPFApp { The type extending Application // In this first example, we are defining a single class type to typically hooks into the Startup // represent the app itself and the main window. Events handled using method class MyWPFApp : Application and Exit events, then runs the group conversion. Could use a { app object. [STAThread] strongly typed delegate as well: static void Main() { static void Main() // Handle the Startup and Exit events, then run the application. { MyWPFApp app = new MyWPFApp(); // This time, specify the underlying delegates. app.Startup += AppStartUp; MyWPFApp app = new MyWPFApp(); At least some things look app.Exit += AppExit; app.Startup += new StartupEventHandler(AppStartUp); app.Run(); // Fires the Startup event. familiar! However, this app.Exit += new ExitEventHandler(AppExit); } MessageBox is a member of app.Run(); // Fires the Startup event. } static void AppExit(object sender, ExitEventArgs e) System.Windows. { MessageBox.Show(quot;App has exitedquot;); } static void AppStartUp(object sender, StartupEventArgs e) { Our start up code creates and Just to hook into the shut down // Create a Window object and set some basic properties. configures a basic Window type. of our app… Window mainWindow = new Window(); mainWindow.Title = quot;My First WPF App!quot;; mainWindow.Height = 200; mainWindow.Width = 300; mainWindow.WindowStartupLocation = WindowStartupLocation.CenterScreen; mainWindow.Show(); } } } Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 14

15. Introducing WPF The previous example directly created a Window type. However, for a variety of reasons, it is typically better to subclass Window to define a well encapsulated type. class MainWindow : Window { Notice the WPF Button Click event uses a // Our UI element. private Button btnExitApp = new Button(); ‘routed event handler’ delegate…more details later. public MainWindow(string windowTitle, int height, int width) { // Configure button and add to collection. btnExitApp.Click += new RoutedEventHandler(btnExitApp_Clicked); btnExitApp.Content = quot;Exit Applicationquot;; btnExitApp.Height = 25; btnExitApp.Width = 100; Child controls are added AddChild(btnExitApp); via a call to AddChild(). // Configure the window. Title = windowTitle; WindowStartupLocation = WindowStartupLocation.CenterScreen; Height = height; Width = width; Show(); } private void btnExitApp_Clicked(object sender, RoutedEventArgs e) { // Get a handle to the current app and shut it down. While not required to shut down an application, Application.Current.Shutdown(); notice how we can access the global application } } object via the Current property. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 15

16. Introducing WPF To build a WPF application outside of VS 2005, we can make use of a simple response file for use by the command line compiler (C# or VB): Beyond specifying the target type, output name and input files, note we need to reference the WPF assemblies. These paths are correct as of .NET 3.0 beta 2! Be sure to do a sanity check on your development box! # build.rsp # build with csc @build.rsp (or vbc @build.rsp for VB folks). # VB folks would have *.vb on the last line of the response file… # /target:winexe /out:SimpleWPFApp.exe /r:quot;C:Program FilesReference AssembliesMicrosoftFrameworkv3.0WindowsBase.dllquot; /r:quot;C:Program FilesReference AssembliesMicrosoftFrameworkv3.0PresentationCore.dllquot; /r:quot;C:Program FilesReference AssembliesMicrosoftFrameworkv3.0PresentationFramework.dllquot; *.cs Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 16

17. Introducing WPF Beyond the Startup / Exit events and the Run() method, Application defines additional members of interest… Property of the Meaning in Life Application Type Current This static property allows any Window to gain access to the running Application object. MainWindow This property allows you to programmatically get or set the main window of the application. StartupUri Gets or sets the GUI object (a Window or Page) that automatically opens when the application starts. Properties Allows you to get or set values which are accessible to all Windows (or Pages) in a WPF application. Windows This property returns a WindowsCollection type, which provides access to each Window created from the thread which created the application object. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 17

18. Introducing WPF The Window type has a number of base classes which provide the necessary functionality: ContentControl: Support for the WPF control content model. Control: Size, opacity, tab order logic, background color, etc. FrameworkElement: Animation, data binding, theme support. UIElement: Drag / Drop, input events (mouse / stylus, keyboard). Visual: Hit testing, coordinate transformation, and bounding box. Connection point between managed / DirectX layer. DependencyObject: Support for dependency properties / attached properties (helpful for XAML / data binding). DispatcherObject: Entry point to the event queue of the WPF application, core threading model. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 18

19. Introducing WPF As you have just seen, it is possible to build a WPF application entirely in code. To this end, WPF might seem like ‘just a better UI toolkit’. While the integration of independent APIs is a major benefit, the real appeal of WPF is XAML. In fact, most WPF applications will use XAML. In a nutshell, XAML the (eXtendable Application Markup Language) is an XML based grammar used to represent trees of .NET objects. While XAML is extremely helpful for WPF apps, any (non-nested) type supporting a default constructor can be expressed in XAML. As far as WPF is concerned, understand that every element that could be authored in code (Application, Button, Window, etc) and be expressed in XAML. In fact, it is possible to build a true-blue .NET assembly using nothing but a XAML document! Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 19

20. Introducing WPF The major benefit of XAML is a separation of concerns between the look-and-feel of a WPF app and the logic which drives it. As you may know first hand, hard core programmers are not always the best choice for hard core UI design. As well, most hard code designers could care less about C#, VB 2005 or .NET 3.0. Using XAML, the artsy-designer types of the world can build fantastic UIs using various editors… …then pass the XAML to us, where we (the geeks) can add code to ‘make it do something useful’. Again, this is very similar to what we found with the release of ASP.NET. Web designers can build the markup, we add the code. We will see various XAML designers in just a bit… Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 20

21. Introducing WPF To get a taste for XAML markup, consider the following markup describing a WPF Button type:  <Button Name = quot;btnClickMequot; Height = quot;40quot; Width = quot;100quot; Content = quot;Click Mequot; Click = quot;btnClickMe_Clickquot;/> This same Button could be expressed in C# code as so: // Defining a Button in C# code. Button btnClickMe = new Button(); btnClickMe.Height = 40; btnClickMe.Width = 100; btnClickMe.Content = quot;Click Mequot;; btnClickMe.Click += btnClickMe_Click; Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 21

22. Introducing WPF You can’t see it of course, but this image is animating in an endless loop, using nothing more than markup and the WPF runtime engine. Zero code! While XAML is very expressive, it can entail a bit of tedious typing (XML in general is tedious…). Thankfully there are tools which author the XAML on our behalf. As well… Xamlpad.exe: This tool provides real time displays of your XAML markup. Simply type XAML in the bottom pane, and view the output. No support for code within CDATA sections! Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 22

23. Introducing WPF To illustrate, lets build an application entirely using XAML. We will also make use of the msbuild.exe utility to compile the XAML into a valid .NET executable assembly. Our example will consist of the following: MainWindow.xaml: A full definition of our window, with code wrapped in a CDATA section. MyApp.xaml: A full definition of our application object, code also expressed in a CDATA section. SimpleXamlApp.csproj: The msbuild file specifying the necessary XAML targets. 100% Pure XAML Demo! Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 23

24. Introducing WPF What happened?! Markup into .NET assembly is quite an impressive feat! Magic? I think not! At compile time, your XAML markup was transformed into an equivalent set of C# files (or VB files) with a *.g.* suffix; g (as in generated). The compiler then processes that code as expected. As well, a binary representation of your XAML (*.baml) is embedded into your assembly as a resource. This binary XAML resource is read and parsed at runtime to hydrate your types to their correct state. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 24

26. Introducing WPF Between the extremes of all all-code and all-XAML, lives the comfy blend of code files. The *.xaml file only contains markup (no CDATA section for the code). The related code file contains the ‘real code’ to breath functionality into the object model. Like a 100% pure XAML app, the code file approach still makes use of compiler generated *.g.cs / *.g.vb files to map the markup to code. Behind the scenes, partial classes are used (remember, XAML elements are just trees of .NET objects!). By the way, this code file technique is the default approach used by Visual Studio 2005. All new WPF files and project templates currently make use of code files to separate the markup from functionality. Code File Demo! Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 26

27. Introducing WPF When you create a new WPF project via VS 2005, you will find an integrated XAML editor. Be aware that the preview Orcas IDE has limited XAML support. Specifically, there is no way to handle events at design time…you need to author the XAML / event handlers by hand. Thankfully, there is very solid IntelliSense support! Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 27

28. Introducing WPF While xamlpad.exe and the VS 2005 XAML editor is find for developers, it is not well suited to the designers of the world. Xmalpad.exe assumes you already know the syntax of the XAML you are trying to author. VS 2005 is too close to the code for those without a coding background. Because of this, Microsoft has introduced a brand line of Expression products: MS Expression Web Designer: Allows the artsy types to build great looking web pages and save them out as *.aspx files (among other formats). MS Expression Graphic Designer: Think of it as MS’s version of Photoshop. MS Expression Interactive Designer: Allows the artsy types to build great looking WFP front ends and save them out as *.xaml files. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 28

29. Introducing WPF In a production environment, WPF development might look something like the following: Notice the common link is XAML.  <Button Name = quot;btnClickMequot; Height = quot;40quot; Width = quot;100quot; Content = quot;Click Mequot; /> Designers “do their thing” using MS Coders “do their thing” using MS Expression Interactive Designer. Visual Studio 2005. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 29

30. Introducing WPF WPF controls (tree views, buttons, grids, radio buttons, etc) make use of a very interesting content model. Unlike Windows Forms, a WPF control can take on any UI you desire. The functionality of the control is completely separate from the content UI it presents. For example, you could use XAML (or code) to define a 3D polygon which can behave as a ‘normal’ button that handles mouse input, keystrokes, and data binding. Given this, the need to build custom WPF controls shrinks considerably. Any control which extends System.Windows.Controls.ContentControl can participate in this rich content model. Programmatically, this can be set using the Content property. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 30

31. Introducing WPF This very funky button consists of a WPF Label, Canvas (with two Ellipse types), and a TextBox, all contained within a StackPanel type to ensure horizontal positioning within the panel. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 31

32. Introducing WPF XAML-based WPF controls make use of some new property syntax. First we have: Property/Element syntax: Useful when a property value is far more than a simple string. Consider this ‘normal’ property setting: Normal properties <Button Name=quot;btnClickMequot; Height=quot;100quot; Width = quot;379quot; Background =quot;Greenquot;> Are great for basic string Click Me data. </Button> Now consider the following property/element setting: <Button Name=quot;btnClickMequot; Height=quot;100quot; Width = quot;379quot; Content =quot;Click Mequot;> <Button.Background> <LinearGradientBrush StartPoint=quot;0,0quot; EndPoint=quot;1,1quot;> Property/element is great <GradientStop Color=quot;Blackquot; Offset=quot;0quot; /> <GradientStop Color=quot;Yellowquot; Offset=quot;0.25quot; /> for object assignments. <GradientStop Color=quot;Honeydewquot; Offset=quot;0.75quot; /> <GradientStop Color =quot;Redquot; Offset=quot;1quot; /> </LinearGradientBrush> </Button.Background> </Button> Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 32

33. Introducing WPF Attached property syntax is also used in XAML: Allows a child element to set values on a parent element. <DockPanel> <CheckBox Name = quot;myCheckBoxquot; DockPanel.Dock =quot;Topquot;> Check me! </CheckBox> </DockPanel> DockPanel myDockPanel = new DockPanel(); Same as: CheckBox myCheckBox = new CheckBox(); myCheckBox.Content = quot;Check Me!quot;; myDockPanel.Children.Add(myCheckBox); DockPanel.SetDock(myCheckBox, Dock.Top); Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 33

34. Introducing WPF Given that a content control can be a composite of many diverse elements (buttons, 3D renderings, animations and storyboards, etc), how should we handle events? Consider our ‘funky button’. If the user clicks on the Ellipse, but not on the Button surface, has it been clicked? Likewise, if the user clicks on the button surface, should we handle a MouseDown for the Ellipse? WPF provides routed events for this very reason. By default, a bubbled routed event is used. For example, an event (such as MouseDown) is detected on the WPF element (such as the Ellipse). If MouseDown is not handled on the Ellipse, each item up the markup tree (until the defining root, such as Button) has a chance to handle the event. This makes it possible to have multiple ways to handle the same event on a composite control. WPF also provides for a tunneling routed event which as the name implies works from the outer element inward. This is possible only in code, and can be used to short-circuit event handling. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 34

35. Introducing WPF Recall that in XAML, events can be handled using the web-like OnEventName = quot;Event_Handlerquot; syntax. The event handler will typically be within the code file, however it is possible to place it within a XAML file.  <Button Name=quot;btnClickMequot; Height=quot;100quot; Width = quot;379quot; Click =quot;btnClickMe_Clickedquot;> ... </Button> // C# code file. public void btnClickMe_Clicked(object sender, RoutedEventArgs e) { // Do something when button is clicked. } Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 35

36. Introducing WPF When you build a WPF application, you have a wide choice of layout managers. Consider the following core possibilities, many of which are borrowed from web development (and Java Swing ;-) technologies: Layout Manager Meaning in Life Canvas The Canvas control provides a ‘classic’ mode of content placement. Items stay exactly where you put them as the user resizes the container. DockPanel Locks content to a specified side of the panel. Grid Content is arranged within a series of cells, maintained within a tabular grid. StackPanel Content is stacked on top of each other in a vertical or horizontal manner. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 36

37. Introducing WPF <DockPanel xmlns=quot;http://schemas.microsoft.com/winfx/2006/xaml/presentationquot; Notice the outermost DockPanel xmlns:x=quot;http://schemas.microsoft.com/winfx/2006/xamlquot;> makes use of the Dock property to <TextBlock Background=quot;LightBluequot; position the TextBlocks. DockPanel.Dock=quot;Topquot;>Some Text</TextBlock> <TextBlock DockPanel.Dock=quot;Bottomquot; Background=quot;LightYellowquot;>Some text at the bottom of the page.</TextBlock> A nested DockPanel defines a <TextBlock DockPanel.Dock=quot;Leftquot; StackPanel for the two Button types. Background=quot;Lavenderquot;>Some More Text</TextBlock> Note that DockPanels don’t need a <DockPanel Background=quot;Bisquequot;> Dock property, as they simply stack the <StackPanel DockPanel.Dock=quot;Topquot;> elements vertically or horizontally. <Button HorizontalAlignment=quot;Leftquot; Height=quot;30pxquot; Width=quot;100pxquot; Also remember, tools like Expression Margin=quot;10,10,10,10quot;>Button1</Button> Interactive Designer author the XAML <Button HorizontalAlignment=quot;Leftquot; on your behalf ;-) Height=quot;30pxquot; Width=quot;100pxquot; Margin=quot;10,10,10,10quot;>Button2</Button> </StackPanel> <TextBlock Background=quot;LightGreenquot;> Some Text Below the Buttons</TextBlock> </DockPanel> </DockPanel> Panel Demo… Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 37

38. Introducing WPF WPF controls can be assigned custom styles to dramatically change their UI output. Think of WPF styles (a.k.a. themes) as the desktop equivalent of a web-centric style sheet (or ASP.NET 2.0 themes). Under the Windows Forms model, consider how you would have to change the color of all labels on a complex form (setting, by setting, by setting…) WPF allows the following theme declaration for a single Button type. <StackPanel> <Button Name=quot;btnClickMequot; Height=quot;80quot; Width = quot;100quot; Content =quot;Click Mequot;> <Button.Style> <Style> <Setter Property =quot;Button.FontSizequot; Value =quot;20quot;/> <Setter Property =quot;Button.Backgroundquot;> <Setter.Value> <LinearGradientBrush StartPoint=quot;0,0quot; EndPoint=quot;1,1quot;> <GradientStop Color=quot;Blackquot; Offset=quot;0quot; /> <GradientStop Color=quot;Yellowquot; Offset=quot;0.25quot; /> <GradientStop Color=quot;Honeydewquot; Offset=quot;0.75quot; /> <GradientStop Color =quot;Redquot; Offset=quot;1quot; /> </LinearGradientBrush> </Setter.Value> </Setter> </Style> </Button.Style> </Button> <Button Name=quot;btnClickMeTooquot; Height=quot;80quot; Width = quot;100quot; Content =quot;Me Tooquot;/> </StackPanel> Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 38

39. Introducing WPF If you wish to define an application wide theme, you can bundle the data as an assembly resource: Notice the ‘from resource’ property syntax. <Window x:Class=quot;MyWPFApp.Window1quot; xmlns=quot;http://schemas.microsoft.com/winfx/2006/xaml/presentationquot; xmlns:x=quot;http://schemas.microsoft.com/winfx/2006/xamlquot; Title=quot;Fun with Controls!quot; Height=quot;223quot; Width=quot;238quot;> <Window.Resources> <Style x:Key =quot;MyFunkyThemequot;> <Setter Property =quot;Button.FontSizequot; Value =quot;20quot;/> <Setter Property =quot;Button.Backgroundquot;> <Setter.Value> <LinearGradientBrush StartPoint=quot;0,0quot; EndPoint=quot;1,1quot;> <GradientStop Color=quot;Blackquot; Offset=quot;0quot; /> <GradientStop Color=quot;Yellowquot; Offset=quot;0.25quot; /> <GradientStop Color=quot;Honeydewquot; Offset=quot;0.75quot; /> <GradientStop Color =quot;Redquot; Offset=quot;1quot; /> </LinearGradientBrush> </Setter.Value> </Setter> </Style> </Window.Resources> <StackPanel> <Button Name=quot;btnClickMequot; Height=quot;80quot; Width = quot;100quot; Style =quot;{StaticResource MyFunkyTheme}quot; Content = quot;Click Mequot;/> <Button Name=quot;btnClickMeTooquot; Height=quot;80quot; Width = quot;100quot; Style =quot;{StaticResource MyFunkyTheme}quot; Content = quot;Me Tooquot;/> </StackPanel> </Window> Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 39

40. Introducing WPF Recall that WPF has intrinsic 2D and 3D rendering services: WPF uses device-independent ‘pixels’ to enable resolution and device independence which automatically scale with the system's DPI setting. Under the hood, the DirectX engine is used to increase performance. Provides hit testing support and an integrated animation system. Integrated support for audio playback. Simple 2D Graphics Demo Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 40

41. Introducing WPF Up until this point in the talk, WPF has been framed as a new desktop API… However, this same XAML + code proposition can be applied to the web! This is yet another major benefit of WPF, as the same technologies / XAML / code can be used to build a XBAP application (a XAML Browser Application) . XBAP apps are downloaded on demand from a Web server via Click Once. Given this, it runs within a security sandbox provided by the .NET Framework's code access security. This means your XBAP apps will be running under Intranet / Internet privileges! However, a system administrator could author a custom policy for internally deployed XBAP applications. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 41

42. Introducing WPF Running with Internet / Intranet permissions limits what your WPF app is able to do. Specifically XBAP applications cannot: Create and display standalone windows. Display application-defined dialogs. Display a Save dialog launched by the XBAP itself. Access the file system (Isolated Storage is a-OK). Make use of legacy UI models (Win Forms, ActiveX) or call unmanaged code. More importantly, XBAPs cannot make use of WCF! Windows Communication Foundation apps demands full trust. Instead, XBAP apps make use of XML web services to communicate with the remote server. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 42

43. Introducing WPF Today, XBAPs can only run on the Windows OS. .NET 3.0 must be installed on the target machine (thankfully, Click Once can install .NET 3.0 automatically if it is not there). Must be hosted by Internet Explorer versions 6 and 7. However, Microsoft will be releasing WPF/E (E = everywhere). WPF/E will allow your XBAPs to run on non-Microsoft OSs (Mac, Unix, Linux) and using non-IE browsers. This forthcoming API is a subset of WPF proper that includes two- dimensional graphics, images, video, animation, and text. No support for three-dimensional graphics, documents, or hardware acceleration (as this is tied to DirectX, which is a Windows only technology). WPF/E is to be released sometime in 2007. Keep your ears close to the ground. This could be good…really good. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 43

44. Introducing WPF Wrap up! WPF is an integrated API for building (every) rich user interfaces. Support for 2D, 3D, rich documents, animations, GUIs, themes, etc. Controls support a rich content model (goodbye building custom controls!). XAML provides a separation of concerns, much like an ASP.NET program. Expression Interactive Designer allows the artsy types to build *.xaml files which are passed to us (the geeks). XBAP apps are simply WPF apps deployed by a web server. WPF/E is a forthcoming, OS and browser neutral subset of WPF. Copyright © Intertech, Inc. 2006 • www.Intertech.com • 800-866-9884 • Slide 44

WPF Training

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

WPF Training

Plus De Contenu Connexe

Diaporamas pour vous (20)

Les utilisateurs ont également aimé (20)

Similaire à WPF Training (20)

Plus par Intertech Training (20)

Plus récents (20)

WPF Training