PowerPoint Presentation

XAML mark-up[ fundamentals - getting it right ]This session and its sister session called Data Binding to UI elements are supported by a comprehensive CHM file named VulcanLive2014_PHH.

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 !!!IntroductionThere 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.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!Message to take awayDuring the session you will get an overview ONLY !You will however know what to do when you get back home to your office.You wont 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.

C# vs Vulcan.NETThis 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.XAML for all PlatformsXAML is the Microsoft (Windows?) mark-up scriptIt is used in WPF, WinRT, and Phone 8For desktop, tablet and smartphoneSilverlight also uses XAML and related technologiesThere is much overlap BUT very different toolbox setsWinForms is now legacy, and is only for desktopXAML editors in VS 2012

There are a bunch of Templates to help us select and use these four XAML design surfaces / editors.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. ]Why we all hate XAMLMany 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 dont know whats 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 !!!Confusion and Mess all my own doing !Here are some lines from my Invoices appI do NOT write/create script like this any more ;-0((

This is more my personal style today!Here is some recent script of mine :-

And even this can be cleaned up and tidied.Easy to learn, easy to applyAlthough the news is generally good for us, it does/will take a LOT of time and practise.BUT its 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!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 !!!Screens what are these?The UI screens we see displayed are built upon Window, Page and UserControl objects.WPF WindowsWinRT PagesPhone 8 PhoneApplicationPage sSilverlight UserControlsUserControls are also used in WPF, placed in ContentControls on a Window. More later.

Main screen container

WPF :Phone 8 :Surface Tablet : (WinRT)XAML - GUI structureAll 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.Some nesting in Prism

Obviously, the VisualStateAwarePage inherits from Page.Prism is a Microsoft MVVM system / offering.Use the DO pane for checking out your nesting :-Some nesting within the script

Grid is very often used for nesting, we see it in loads of places .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)Different types of UI elementContainers for UI elements e.g. PanelsSingle item controls e.g. TextBlock / TextBoxMultiple item controls e.g. Lists / DataGridEverything can contain at least one thingSo anything can have a container within itThen the container can have many things, and so on.**CARE** Borders contain ONLY one thing !Contents controls, Items controls, and Container elements.UI elements which for what Data collections are for Lists and DataGridsSingle data objects are for :- CheckBox, TextBox, TextBlock, Slider, Image, DatePickerContainers are :- Canvas, Border, StackPanel, ContentControl, Grid, DockPanel, WrapPanelContainers can contain anything, just check the number of sub-items ! Usually many.

Data values where ?Data can be placed directly into properties of UI controls. Much web and eBook stuff does this :-0((Dont 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.Dont do this, or this !

Do this instead :-

Single value / Multi item controls -its all about BindingBoth 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).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.Binding & CollectionsMuch 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!

binding success how ?Success in binding is based on correct Custom class object design.

Displaying collectionsA 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.

DataTemplates more complexUsing a data template can do wonders !

Here we have a ComboBox (left) and a ListBox (below), both using a DataTemplate. Seeing DataTemplates in action

Within a data template we can have drop lists, date pickers and check boxes too.Dont delay do NOT put-offDo 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.Dont put-off using DataTemplates.Use Resources right from the beginning.

Visual Studio the XAML EditorI 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.Editing XAML script & visual

Using the VS XAML editor / designerI find that I work in the text editor much more than when I first started to use WPFWorking 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 dont panic if your text causes issues in the graphical design surface just change the script text comment or correct.Use the Document Outline pane in VSThe 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.

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.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.ResourcesContainers generally have a Resources section.

Resources App, File, DLLApplication wide Resources can be made and used.The resource item can be hard coded or read from external dictionaries.

Resources DictionariesResource items can be placed in Dictionaries.

And also external class libraries :-Solution DictionariesWe can have Dictionary files within our solution.

Here is file ResDictOne.xamlClass Libraries Resource Dictionaries

Styles and TemplatesResource 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 ControlTemplates until a way down the road!

Implicit and Explicit Styles

Here are two Style objects the first Implicit and the second Explicit :-

The Scope of resourcesWe 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. Events all UI elements have theseEvents 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.Events and their handlingWith 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

Events as they show in .NET codeWith standard event use and handling, the stubs are placed in the .NET code behind file.

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.Grids & Grids within GridsGrid 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 :-

Grids column and row definition

We need to use Span with both R and C :-[ Below we are placing a Grid within a Grid.]nested GridsBelieve it or not, nested Grids are helpful.

Use Grids whenever you can.

They are very useful and flexible.

The grid index starts at 0 (zero).

Move away from freehand placement of UI elements.

And here is something silly !? :-

Row / Column specificationThere are various ways to define R n C sizes.

We can see the grid lines at runtime if we choose to toggle them on/off.nested Grids (2)And another way :-

Collections which types ?Make life easier for ourselves by knowing which collections to use in our XAML and ignore the rest.Keep away from SIMPLE lists.I use List and ObservableCollectionFor collections that dont change, use ListAn OC can be instantiated from a List directly see line 184 below :-

collections - tracking changesINotifyCollectionChanged is the interface which allows ObservableCollection objects to track changes to the collection.These changes are Add, Remove, and Insert items. INotifyPropertyChanged is the interface which allows changes in the property values of items within the collection to be tracked.This is why we MUST build our custom classes in the correct manner. OC objects already have change notification built in.Complex DataTemplates for Items controlsDont be afraid, complex data templates are our friends ! They make our forms look great !!Here is a simple one to start us off :-

Keep DTs in the resources section and then use them from the script body :-A little more complex !Let us be a little more ambitious !?

UserControls moving towards MVVMUCs (UserControls) are like Pages / Windows.In WPF we can bind a UC to a CC element.Youve heard of picture in picture this is form in form.

Shell view with 3 UCsHere is a good example from a Vulcan MVVM app.

UserControls how to displayPlace ContentControls on the form to allow easy displaying of UserControls.Multiple UCs can be swapped in/out of one CC, by changing the binding between CC and UC.

Interactive display (video)Getting ready for the next session!See you in the Data Binding with XAML session .