Introduction XAML WPF PV178: Programming for .NET Framework Windows Presentation Foundation Vojtˇech Forejt, forejt@fi.muni.cz Martin Osovsk´y, osovsky@ics.muni.cz Faculty of Informatics and Institute of Computer Science Masaryk University April 16, 2009 Introduction XAML WPF Drawbacks of Most GUI Libraries UI design and application logic are not separated Do not take advantage of current technologies Aimed at one particular area (web, client GUI, 2D or 3D graphics) Introduction XAML WPF WPF Overview Framework for working with graphics user interface, 2D and 3D Separation of UI design and application logic Goes beyond WinForms, but does not supersede it Windows.Forms.* namespaces From .NET Framework 3.0, pre-alpha in Mono Introduction XAML WPF Example ColorPicker3D Introduction XAML WPF WPF Assemblies and Namespaces WindowsBase.dll PresentationCore.dll PresentationFoundation.dll System.Windows System.Windows.Controls System.Windows.Markup System.Windows.Media System.Windows.Navigation System.Windows.Shapes Introduction XAML WPF XAML stands for eXtensible Application Markup Language Declarative markup language Allows to create UI using XML syntax Objects ­ tags; Properties ­ tags or attributes or Objects are instantiated automatically Introduction XAML WPF Example SimpleWpfExample Introduction XAML WPF XAML cont. XAML file "defines" a partial class specified by Class attribute of root element Root element determines the base class Application logic is placed in separate file with a partial class, written e.g. in C# Introduction XAML WPF XAML ­ How Does It Work XAML is compiled to BAML (Binary Application Markup Language) BAML is stored in assembly as a resource When the application starts, BAML is read and appropriate objects are created Introduction XAML WPF Visual Tree Contains elements that are rendered on the screen (Rougly) corresponds to the tree in XAML file Introduction XAML WPF Layouts WrapPanel ­ elements positioned from left to right (or from topto bottom, depending on Orientation), wraped at the end of line DockPanel ­ child elements positioned to the edges of the panel Grid ­ table-like positioning Canvas ­ absolute positioning StackPanel ­ Positions element in line (horosintally or vertically, depending on Orientation) Introduction XAML WPF Example WpfLayoutsExample Introduction XAML WPF Controls Well-known controls are available TextBox, Button, ListBox, TabControl, ListView, CheckBox, RadioButton,. . . Several new controls Expander PasswordBox Introduction XAML WPF Controls cont. Controls contain Methods Properties Events ­ routed events, extension of ordinary CLR events Commands ­ Cut, Paste,... Application logic in C# (or another language) Data binding Templates Introduction XAML WPF Routed Events Extend CLR events Invoke handlers on multiple elements of visual tree ("routed" through a tree) Routing strategies Bubbling ­ event handlers are invoked from the source to the root Direct ­ only handler on the source is invoked Tunelling ­ event handlers are invoked from the tree to the source Typically, is bubbling and is preceded by tunelling Preview Setting Handled property to true prevents invoking all following handlers Introduction XAML WPF Example RoutedEventsExample Introduction XAML WPF Commands Counterpart of Actions in Java Represent high-level tasks (Cut, Copy, Paste...) that can be executed by or on different objects. Extend RoutedCommand class Methods CanExecute and Execute Command source ­ control executing the command Command target ­ control on which the command is executed CommandBinding class ­ associates a command with event handlers events CanExecute and Execute Introduction XAML WPF Example WpfCommandExample Introduction XAML WPF Data Binding Connects UI with application logic Synchronization between data and its visual representation Binding target ­ (almost) any property of a control Binding source ­ property of a control, ADO.NET, XML, collection Introduction XAML WPF Example WpfDataBindingExample Introduction XAML WPF Example ColorPicker3D