XAML ‘mark-up’ [ fundamentals - getting it right ]

1. XAML ‘mark-up’[ fundamentals - getting it right ] If you follow these eNotes, and do the walk-through sections, you will become very good at XAML design and displaying data. The eNotes cover moving from standard XAML ‘Data Binding’ to fully using the MVVM pattern of app development – using MVVMLight from GalaSoft & Laurent Bignion (MVL). This is a VERY exciting time to be coding !!! This session and its ‘sister’ session called ‘Data Binding – to UI elements’ are supported by a comprehensive CHM file named ‘VulcanLive2014_PHH’.

2. Introduction • There is a HUGE amount of stuff in the CHM file. • It will take you a long while to work your way through this file – BUT – it will be worth it. • There is nothing complicated with any of the file content – it may be unfamiliar. • ‘stuff’ usually appears in more than one section. • The two PPP slide shows are for you to study back home, as much as for the focus of my talk.

3. General • Any and all questions OK to be asked. Now and afterwards, throughout the conference. • Best to ask me outside of the PP presentation due to the amount we need to cover. • Most of your questions should be answered somewhere in the CHM file sections. • Some sub-sections are still empty – details may be elsewhere, and this is a HUGE topic!

4. Message to take away • During the session you will get an ‘overview’ ONLY ! • You will however know what to do when you get back home to your office. • You won’t remember much (or any?) details. • At this stage an ‘overview’ is much more important than specific details, or any acquired skills. • It has taken me a LONG time and MUCH effort to find this ‘overview’.

5. C# vs Vulcan.NET • This is NOT an issue – at all ! • We can use one or the other, and even mix the two together. • However, LINQ is another matter, and we need to write a C# class library to handle data access using LINQ technology. • We can then access from Vulcan classes, any of the DLL ones written in C#. • There is sufficient Vulcan code in the CHM to help you, but improving your C# skills is always a good idea.

6. XAML for all Platforms • XAML is the Microsoft (Windows?) mark-up script • It is used in WPF, WinRT, and Phone 8 • For desktop, tablet and smartphone • Silverlight also uses XAML and related technologies • There is much overlap – BUT – ‘very’ different toolbox ‘sets’ • “WinForms” is now legacy, and is only for desktop

7. XAML editors in VS 2012 There are a bunch of Templates to help us select and use these four XAML design surfaces / editors.

8. Toolbox – variations (CARE) Phone 8 : WPF : WinRT / Store : Silverlight 5 : Look for ‘ListBox’, ‘Label’, ‘DataGrid’, ‘TabControl’ – and also ‘Grid’. [ These are just the Common Controls. ]

9. Why we all ‘hate’ XAML • Many of us have been ‘put-off’ XAML early in our experience of WPF. • We may well hate it because it looks messy and confusing – we just don’t know what’s going on. • We have seen very confusing ‘code’ but we still develop apps. • There may have been styles, calling on other styles, using script in other unseen files etc., … • It does NOT have to be like this – I now like it, even ‘love’ it at times. My script is TIDY !!!

10. “Confusion and Mess” – all my own doing ! • Here are some lines from my ‘Invoices’ app • I do NOT write/create script like this any more ;-0((

11. This is more my personal style today! • Here is some recent script of mine :- And even this can be cleaned up and tidied.

12. Easy to learn, easy to apply • Although the news is generally ‘good’ for us, it does/will take a ‘LOT’ of time and practise. • BUT – it’s all in the CHM file – this can save you many hours and days (even weeks) of work doing the wrong things ! • It has taken me many months of work to research and write !! • The ‘clever’ stuff is in what I did NOT include!

13. Where are we headed ? • Applying ‘Data Binding’ and the MVVM ‘pattern’ is not difficult – BUT, one thing at a time. • We can apply much of the MVVM approach, without using the full ‘pattern’ – this improves our apps. • With good examples (to hand) you can easily “copy and adapt” to create your own new apps. • I have learned this way from others – a huge amount. • Thanks particularly to Nick Friend for his MVVM related coded / scripted solutions and working apps. • Also thanks to him for working with me and zillions of emails, back and forth. Well done NICK !!!

14. Screens – what are these? • The UI screens we see displayed are built upon ‘Window’, ‘Page’ and ‘UserControl’ objects. • WPF – ‘Window’s • WinRT – ‘Page’s • Phone 8 – ‘PhoneApplicationPage’s • Silverlight– ‘UserControl’s • UserControls are also used in WPF, placed in ‘ContentControl’s on a Window. More later.

15. Main screen ‘container’ WPF : Phone 8 : Surface Tablet : (WinRT)

16. XAML - GUI structure • All XAML screens have a ‘nested’ structure. • The window/page/user control has a tree structure. • “things within things !” • Make your displays more, and more, nested. • Break away from your flat VO and ‘WinForms’ design approach. • You will start to ‘nest’ where you never thought it possible – see ‘Data Templates’.

17. Some ‘nesting’ – in ‘Prism’ Use the ‘DO’ pane for checking out your ‘nesting’ :- Obviously, the ‘VisualStateAwarePage’ inherits from ‘Page’. ‘Prism’ is a Microsoft MVVM system / offering.

18. Some ‘nesting’ within the script ‘Grid’ is very often used for nesting, we see it in loads of places ….

19. Avoid ‘flat’ UI design. • Do NOT make your forms ‘flat’ ! • Coming from VO and ‘WinForms’ it is easy to fall into the habit of avoiding UI containers and grids. • Right form the start, try to use grids and containers to structure your UI. • Remember we can often have grids within grids, and containers within containers, as standard design technique. • For ‘nesters’, the Grid is your friend ;-0)

20. Different types of UI element • Containers – for UI elements e.g. Panels • Single item controls e.g. ‘TextBlock’ / ‘TextBox’ • Multiple item controls e.g. Lists / ‘DataGrid’ • Everything can contain at least ‘one thing’ • So anything can have a ‘container’ within it • Then the container can have many things, and so on. • **CARE** – Borders contain ONLY one thing ! ‘Contents’ controls, ‘Items’ controls, and ‘Container’ elements.

21. UI elements – “which for what” • Data ‘collections’ are for Lists and DataGrids • Single data objects are for :- CheckBox, TextBox, TextBlock, Slider, Image, DatePicker • Containers are :- Canvas, Border, StackPanel, ContentControl, Grid, DockPanel, WrapPanel • Containers can contain anything, just check the number of sub-items ! Usually ‘many’.

22. Data values – where ? • Data can be placed directly into properties of UI controls. • Much web and eBook stuff does this :-0(( • Don’t get into this habit – it will make your life difficult, sooner rather than later. • Attributes on UI elements are equivalent to properties on .NET data related / custom objects. • Keep data values in properties of objects in the code, bind to UI controls - this is easier and best.

23. Don’t do this, or this ! Do this instead :-

24. Single value / Multi item controls -its all about ‘Binding’ • Both single and multiple item controls are about ‘binding’. • Sample script from experienced guys uses data binding (DB) to the ‘max’! Copy it. • So both these sets of data controls are well provisioned with suitable attributes for DB. • Bind code object properties to UI element attributes – that is “Data Binding” (DB).

25. Good UI design • Both good UI design and MVVM design is all about ‘binding’. • No data values within the element attributes. • Use ‘Resources’. • Use ‘nesting’ – and plenty of containers. • Keep your XAML script tidy and organised. • Use ‘binding’ and not events. • Get into editor use more than with WinForms.

26. Binding & Collections • Much to do with ‘binding’ is to do with using ‘collections’. • ‘collections’ are a bit like lists. • Usually our collections are of similar items and so we called these ‘typed’ collections. • Examples :- a collection of Orders, Products, or Customers. • A class called ‘ObservableCollection’ is king!

27. ‘binding’ success – how ? • Success in ‘binding’ is based on correct ‘Custom’ class object design.

28. Displaying ‘collections’ • A simple way of displaying some details of items in a collection is by defining a ‘ToString’ method in our custom class. • A more flexible and powerful way is to define a ‘DataTemplate’. • Both of these ways have their benefits.

29. ‘DataTemplates’ – more complex • Using a data template can ‘do wonders’ ! Here we have a ComboBox (left) and a ListBox (below), both using a ‘DataTemplate’.

30. Seeing ‘DataTemplate’s – in action Within a data template we can have drop lists, date pickers and check boxes too.

31. Don’t delay – do NOT ‘put-off’ • Do not ‘put-off’ using ‘data binding’ (DB) • Start to use DB as soon as possible in your app designs. • Create your coded collections to facilitate full data binding. • Use fewer events and more binding. • Don’t ‘put-off’ using ‘DataTemplates’. • Use ‘Resources’ right from the beginning.

32. Visual Studio – the XAML Editor • I like to think of VS as having a WPF ‘designer surface’. • We have a Toolbox and visual UI element ‘surface’. • We have a XAML script text editor. • The XAML script is ‘fundamental’ – from it is built the visual representation, as well as the form at compile and run time.

33. Editing XAML – script & visual

34. Using the VS XAML editor / designer • I find that I work in the text editor much more than when I first started to use WPF • Working the ‘script first’ way is not a sin ! • Creating and editing script makes sure that the ‘nested’ structure is correct – this can be an issue with working in tool ‘drag and drop’ mode. • CARE – don’t panic if your text causes issues in the graphical design surface – just change the script text – comment or correct.

35. Use the ‘Document Outline’ pane in VS • The ‘DO’ or document outline is a useful pane to view in VS. The ‘DO’ is a good way to check the nesting of the various UI elements shown on the design surface, and ‘tagged’ in the text editor.

36. Do as I say – NOT as I did ! • Learn some basic ‘structuring’ before you start Here is a Vulcan WPF app that I use at the end of every month, to do my invoices. I created the XAML many years ago and made it much flatter than I would do if made today. Also I would simplify it, as well as having less on the form at any one time. However, it looks OK and works.

37. “Resources” – special section of script[ ..helps to avoid repetition.. ] • Tidy the body of your XAML script using ‘Resources’. • Lots of basic attribute settings and values can be placed into the ‘Resources’ section. • This allows us to clean and tidy the script ‘body’. • Resources can be at different levels, like Grid, Window, Application, or even external. • Templates and Styles are often (best?) placed in the ‘Resources’ sections. • Clean and tidy script makes higher quality app design and development.

38. “Resources” • Containers generally have a ‘Resources’ section.

39. Resources – App, File, DLL • Application wide Resources can be made and used. • The resource item can be hard coded or read from external dictionaries.

40. Resources – “Dictionaries” • Resource items can be placed in ‘Dictionaries’. And also external class libraries :-

41. Solution Dictionaries • We can have ‘Dictionary’ files within our solution. Here is file ‘ResDictOne.xaml’

42. Class Libraries – ‘Resource Dictionaries’

43. Styles and Templates • Resource sections, files, and DLLs very often contain ‘Styles’ and ‘Templates’. • In developer created apps the commonest templates are ‘DataTemplates’. • Newcomers to XAML will tend to not use ‘ControlTemplate’s – until a way down the road!

44. ‘Implicit’ and ‘Explicit’ Styles Here are two Style objects – the first ‘Implicit’ and the second ‘Explicit’ :-

45. The ‘Scope’ of resources • We must plan to get the ‘scope’ of our Styles and Templates correct. • Scoping as applied to Implicit and Explicit resources :- • The ‘winning rule’ – the most local resource “wins”, or is applied. • Incorrect, or unpredictable results, may be due to misunderstanding your scoping.

46. “Events” – all UI elements have these • Events are easy enough to set-up and use. • However, we must try to avoid their use when binding to a suitable element property is available to us. • Bind rather than use events. • In applying the MVVM ‘pattern’ events are NOT used and ‘Commands’ created in their place. • We do however need to know how to script, code, and use events, and their handler methods. • Learn about events and handlers, before moving to MVVM and MVL or ‘Prism’.

47. Events – and their handling • With earlier GUI technology we needed to use ‘events’ much more in our code. • We can use event handling much less in WPF because of the powerful ‘data binding’ available. • When we move over to the MVVM ‘pattern’ of app development we use no events, but create and access ‘Commands’. See below for ‘no handler stubs’

48. ‘Events’ – as they show in .NET code • With standard event use and handling, the ‘stubs’ are placed in the .NET code behind file.

49. ‘Events’ – as they show in XAML script Below we see the seven controls which have an event selected and defined. Any control in focus has its long list of available events displayed in the Properties pane, from where they may be chosen with a double click. Event ‘stubs’ are auto-named – even if you have not specified a control ‘Name’.

50. Grids & ‘Grids within Grids’ • ‘Grid’ is the most versatile ‘Container’, its used a LOT! • Grids are very useful, as well as being easy to use. • They came late to XAML and WPF. • They are now used where previously ‘Canvas’ was used. [ Canvas has a definite but limited use. ] • The UI elements and controls make extensive use of Grids – out of the box from the Microsoft guys. • Here is the default ‘Window’ stub :-