Programmeren van visuele gebruikersomgevingen User Interface Design Engineering principles UI Frameworks Windows Presentation Foundation

Course Summary - Theory 12 1 hours Technical topics & UI topics

Course Summary - Practical Week 1 – 3: Introduction to C# and WPF Week 4 – 13: Implementation of a WPF project Focus on the user interface and the technical UI design We know you’re not a C# expert

The Project How many features? How is the UI implemented 9/6/2018 The Project How many features? More == better How is the UI implemented Did you use the right design patterns Does the UI follow general UI guidelines Explain (!) why you made particular choices Ze krijgen een aantal potentiele features van ons, hoe meer ze er implementeren, hoe beter © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Learning Resources Google / MSDN 9/6/2018 Learning Resources “CourseInfo\Management en Technologie\Technologie Leuven\Toegepaste Informatica\2TI\Programmeren van Visuele Gebruikersomgevingen” on ‘Education’ (R:) network drive Google / MSDN Books (Pro WPF 4.5 in C#, WPF 4.5 Unleashed, …) it-ebooks.info/book/1551 © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Challenges WPF (and other frameworks) are complex Implementing an extensible and testable UI is not easy Implementing a user friendly UI is not easy

Windows Presentation Foundation

Microsoft Foundation Classes

Visual Basic (classic)

WinForms

Disadvantages Programmer writes code to build the UI 9/6/2018 Disadvantages Programmer writes code to build the UI Difficult to change the layout of the controls Built on (old) GDI/GDI+ technology Difficult to build device-agnostic UI’s Mixing 2D/3D graphics is difficult Requires lots of code or controls must be entirely rewritten Not hardware accelerated No support for advanced visualization techniques (e.g. transparency, animations, special effects, …) © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Windows Presentation Foundation (WPF) Declarative UI description Fully customizable controls Hardware accelerated, supports advanced visualizations

Declarative UI’s  XAML eXtensible Application Markup Language XML syntax with special side-effects Every element is an instance, e.g. <Button> XAML is optional; can do WPF without it Separates UI from code-behind

Hello World <Window x:Class="WpfApplication1.MainWindow" xmlns="http://.../xaml/presentation" xmlns:x="http://.../xaml" Title="MainWindow"> <TextBlock>Hello World!</TextBlock> </Window>

Properties is equivalent to <TextBlock FontSize=“2cm”> Hello World! </TextBlock> is equivalent to <TextBlock> <TextBlock.FontSize>2cm<TextBlock.FontSize> Hello World! </TextBlock>

9/6/2018 DEMO XAML Demo van simpele XAML-applicatie (nog geen layout panels) © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Layout WPF Layout is based on two key principles 9/6/2018 Layout WPF Layout is based on two key principles Elements should not be explicitly sized Elements should not be positioned with screen coordinates Layout occurs in two stages Measure – elements are asked for their preferred size Arrange – elements are laid out in their containers Layout Panels © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9/6/2018 DEMO Layout Panels Voorbeeld van StackPanel, WrapPanel (nog geen attached properties!) © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Attached Properties A type of global property 9/6/2018 Attached Properties A type of global property Purpose? “To allow different child elements to specify unique values for a property that is actually defined in a parent element.” © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

DEMO Attached Properties 9/6/2018 DEMO Attached Properties Demo van Canvas, Grid en DockPanel. Dock is duidelijk een attached property: zonder dat een kind in een DockPanel staat heeft het geen zin om een Dock-property te hebben. Het is duidelijk een property van een DockPanel dat overgeerfd wordt naar een kind. © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Dependency Properties Most properties on WPF UI elements are dependency properties Provides a way to compute the value of a property based on the value of other inputs

DEMO Dependency Properties and Binding 9/6/2018 DEMO Dependency Properties and Binding Demo van binding binnen een XAML-pagina (bijv. Enabled-property verzetten als er een radiobutton geselecteerd wordt ofzo) en met een object. De Selected property is een DP en zorgt dus dat er een notificatie gestuurd wordt als ze gewijzigd wordt. © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Data Context Every UI element has a DataContext propery Contains a binding object Is inherited from parent elements if empty Control properties can bind to properties of the data context The UI control is initialized with the original value of the property If the control contents is changed by the user, the property is updated Name Name text input

DEMO DataContext Binding 9/6/2018 DEMO DataContext Binding Demo van binding met een zelfgemaakt object © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Data Context What if the property changes elsewhere? Name text input ?

INotifyPropertyChanged Implemented in the data context object Gives the UI the ability to update itself when a property is changed Properties must raise the PropertyChanged event public interface INotifyPropertyChanged { // Summary: // Occurs when a property value changes. event PropertyChangedEventHandler PropertyChanged; }

DEMO INotifyPropertyChanged 9/6/2018 DEMO INotifyPropertyChanged Tonen dat als er extern iets wijzigt aan de gebonden property, dat by default er geen update is. Met INotifyPropertyChanged is da wel het geval © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Logical and Visual Tree

Control Templates WPF Controls are “lookless” The default look of a control can be completely replaced Functionality of the control remains unchanged A Button still clicks and fires an action

Control Templates

DEMO Templates & Themes 9/6/2018 DEMO Templates & Themes Demo van templates (bepaalde controls andere stijl geven) en themes (alle controls herstijlen), ook de demo van de listbox template tonen (map van de VS) © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

DEMO Customizing Controls 9/6/2018 DEMO Customizing Controls Demo van button die ge een custom look geeft (homer button) © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Routed Events An event that can invoke handlers on multiple listeners in an element tree rather than just on the object that raised the event Can travel in one of two directions generally starts from source and then "bubbles" upward through the element tree

9/6/2018 DEMO Routed Events Demo van routed events, gebaseerd op de Homer-knop; zien dat dezelfde event idd bij beide passeert, totdat ge in Homer’s Image de click op afgehandeld zet. © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

DEMO World Clock 9/6/2018 Demo van de world clock app © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.