Windows presentations foundation

Windows Presentation Foundation (WPF)John KorondySoftware Development Manager, Core User InterfacesRight Now TechnologiesJohn.Korondy@RightNow.comBenefits of WPFQuicker time to marketReduced costIncreased life span of productReduced cost of maintenanceEase of brandingWPF at a glanceConsumersUnified view of all UIVariety of layout and navigation modesDeployment optionsInfrastructureFull use of hardware graphics capabilityDirectX, vector- rather than pixel-basedFuture orientedDevelopersDeclarative and event basedDifferent tools for different rolesHighly customizable

These are semi-orthogonal directions (Consumers and Infrastructure are really part of the same)Stress how radically different WPF is relative to Win32/MFC/WinForms3Framework choiceWPF is the future of Windows presentation technologyOther technologies are often still better choices todayISVs often need to be ahead of the curveRecommended WPF 3.5 SP1 usageWeb sites that want to push the limits of user experiencesWindows applications with complex data visualization scenariosNew UI applicationsWindows Forms legacy apps and mobile devicesDirectX - platform for intensive graphics (games, CAD applications)ASP.NET - reach solution for server-based platform-agnostic applicationsSilverlight 3 Rich web based applications

4FeaturesProgramming modelRich: 100s of classes: controls to 3D lightsContainment-friendlyExpressed as declarative or procedural codePowerful customization capabilitiesBuilt-in support forLayoutNavigationData bindingAnimationInkTransformationInteropBi-directionalWinForms, ActiveX, Win32DeploymentPushPull (ClickOnce)Browser-basedRich control modelSeparates behavior from appearance - customizationCommon base for UI controls, graphics, documents and media Introduce the concept of containment as critical feature of UI apps: Window contains frame, client, toolbar, they contain frames, controls, etc. 5.NET code - processInstantiate and manipulate all classesProvide procedural event codeReference XAML instantiated classesStrong on sequenceXAML - designInstantiate some CLR classesAssign property valuesReference other existing (in XAML or code) instancesStrong on containment

myButton.Width = 200;

Property setting direct (attached)Attached propertyProperty of a relationship between two objects

Dock is a property of DockPanelUsed by CheckBox to tell DockPanel where to render it

Hello

DockPanel dp = new DockPanel();CheckBox c = new CheckBox();c.Content = Hello;DockPanel.SetDock(c, Dock.Top);dp.Children.Add(c);23Property setting - databindingTo resource

To a datasource

More about databinding later I am bound to be RED! Property propagationDependency properties are evaluated at run-timeSome properties are inheritableE.g. Background, FlowDirectionCan be overridden by children Are referenced in code using class static property, e.g. TextBox.TextPropertyEventsTypesLife-cycleE.g. InitializedUser interactionE.g. ClickedDatabindingE.g. PropertyChangedExposed asCLR eventsVirtual functionsEventsUse CLR event-delegate model

Delegate may be assigned in XAML or codebutton void b1SetColor(object sender, RoutedEventArgs args) { //logic to handle the Click eventvoid MakeButton2(){ Button b2 = new Button(); b2.Click += new RoutedEventHandler(Onb2Click2);}void Onb2Click2(object sender, RoutedEventArgs e){Event propagationBubbled: handled by parent objectE.g. MouseDownTunneled: handled by a child objectE.g. PreviewMouseDownDirectE.g. [Preview]MouseLeftButtonDownUse events Handled property to stop further processing

28(Tunneled) PreviewMouseButton event will cause a direct PreviewLeftMouseButtonDown event to be issued at each layer.CommandsUI implementation indirectionMany UI elements can access same implementationE.g. button, menu, keyboard, etc.Context-based implementationE.g. clipboard commands for text and imageWith data binding allows presenters to be view-neutral

Use example of Cut/Paste. Its helpful to have an abstract concept of Cut/Paste.Access CP from menu, gesture, shotcut, buttons, etc.Implementation details change from element to element though: useful to have different implementations invoked from different elements.Demo, show:Button enable/disableReuse of command textSupport for shortcuts

29Command patternICommand e.g. RoutedUICommandExecuteCanExecuteUI elementExecution logicExecution logicImplementing commandsDerive from ICommand or use RoutedUICommandExecuteCanExecuteCanExecuteChangedBuilt-in commandsApplicationCommands Close, Copy, Cut, ComponentCommands MoveDown, PageUp, MediaCommands Play, Stop, NavigationCommands Back, Forward,

31Text HandlingText renderingClearType sub-pixelSmooth text animation by char or glyphTypographyOpenType fonts with TrueType glyph definitionsResolution independent layout and renderingInternational textEnhanced fontsUnicodeBeyond italic and boldText APIsLayout and user interfaceLightweight drawings with textAdvanced text formatting

Culture: en_USCulture: ar_SA32Rendering Quality and PerformanceHardware-accelerated Microsoft ClearType sub-pixel rendering, which gives the most faithful text representation and the best reading experience.Smooth text animation by character or by glyph, which takes full advantage of Microsoft DirectX hardware.Typography and International Text SupportOpenType font features such as ligatures.OpenType fonts with TrueType glyph definitions.Automatic line-spacing in all writing systems, using adaptive measurement.Resolution-independent layout and rendering.Broader support for international text.Language-guided line breaking, hyphenation, and justification. Enhanced Font SupportUnicode for all text. Font behavior and selection no longer require charset or codepage.Font behavior independent of global settings, such as system locale.Variants of weight, stretch, and style now one font family, extending beyond the Microsoft Win32 Boolean combinations of italic and bold as part of the same family.Writing direction (horizontal versus vertical) handled independent of font name.Font linking and font fallback in a portable Extensible Markup Language (XML) file, using composite font technology.International fonts built from composite fonts, using a group of single-language fonts. This saves on resource costs when developing fonts for multiple languages.Composite fonts embedded in a document, thereby providing document portability.

CustomizationCustomizing propertiesE.g. ArrangeOverrideOverriding behaviorsSpecifying control stylesModifying control templatesSub-classing or aggregating existing controls

A Slider

A ListBox33See ms-help://MS.VSCC.v80/MS.MSDN.v80/MS.WinFX4VS.1033/Wcp_conceptual/html/2c997092-72c6-4767-bc84-74267f4eee72.htm

Workflow overviewArchitecture: identify componentsGenerate empty classesDefine functional UIComplete PresentersDevelop code-behindProvide visual enhancementsMain componentsApplicationUI layout containersWork itemsUI elementsViews (XAML) display and data bindingCode behind hides UI concepts from presenterPresenters marshals between views and business semanticsWPF ResourcesData servicesRolesArchitectCreates solutions, projects, classesDefines connection points: properties and events DesignerDefines Views (presentation objects)Container layoutsControlsDefines the ViewModel (bindable business objects)Defines the Model (data layer abstraction)Defines common styles, templates (different skill set!)ProgrammerImplements code behind, presentation classes and business object classesRoles and toolsArchitect - VS.NET Class designerDesigner Expression BlendDeveloper - VS.NET code editor

Limitations/usage notes - BlendAvoid opening XAML files in VS - that way there is less chance of changing something that you may also change in BlendIf you do open them, use XAML Editor (not Designer)Set as few properties on individual controls as possible leave it to stylingParticularly, reset sizes, margins, etc. to AutoUse VS to edit XAML(IntelliSense)Blend limitationsDataTemplate - needs to be created in VSUnable to style TreeViewItemUnable to style invisible items, e.g. TreeViewItemBug in Blend: DisplayMemberBinding for GridView requires manual expression entryMulti-part namespaces not handledWhen using project dependency in VS, include ALL dependent projects (otherwise VS compiles OK, Blend does not)

WPF Application ComponentsDevelopmentXAMLCode-behindSettingsBuildAssemblyApplicationManifestProjectConfiguration40Explain how XAML maps to WPF object modelExplain how it is compiled to BAML and stored in the assemblyLifecycle componentsXAMLCode behindBAMLDevelopGlue(partial class) Code behind(partial class)BuildDeploy.exe.config.manifestXAML basicsXML serialization formatXamlReader and XamlWriter (partial serializer)