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

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

4. 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

5. 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.

6. 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.

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

8. Windows Presentation Foundation

9. Microsoft Foundation Classes

10. Visual Basic (classic)

11. WinForms

12. 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.

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

14. 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

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

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

18. 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.

19. 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.

20. 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.

21. 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.

22. 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.

23. 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

24. 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.

25. 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

26. 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.

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

28. 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; }

29. 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.

30. Logical and Visual Tree

31. 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

32. Control Templates

33. 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.

34. 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.

35. 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

36. 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.

37. 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.