Fusion Monitoring Tool WPF Design Patterns BRIAN BRAATZ

Fusion Monitoring Tool WPF Design Patterns BRIAN BRAATZ 7 -26 -17

Agenda Introduce Fusion Monitoring Tool Explain High Level Design Demo Fusion Monitoring Tool Quick Intro to concepts in WPF Review Key WPF Techniques with Sample Code

Fusion Monitoring Gui

Fusion Monitoring Configuration

Fusion Monitoring High Level Design WPF Databinding w/ Datatemplates Sensors. Xml Define Sensors Load from Disk WPF Xml. Data. Provider Value & Alert Updates FIBServer

Fusion Monitoring GUI Demo

WPF General Basic Ideas XAML is an XML Based language that is declarative Xaml is the Screen definition language of WPF Basic idea is to use a powerful template & styles based language to define the “UI” Keep the UI definition separate from your data Databinding allows the screen and the data to remain very separate Yet work intimately together Primary Value is to save time and reduce complexity by being more declarative Similar to how in SQL you say what RESULT you want, not how to do it

WPF Databinding – Xml. Data. Provider XMLData. Provider Does the Heavy lifting of providing in-memory WPF object that is easy to BIND to WPF Databinding will move the data back and forth between the screen and your in-memory data objects In this case- its an in-memory representation of an XML file

WPF Databinding – Data. Templates XAML Construct Tells WPF how to “convert” from the XML document you are binding to, into UI

Demo Code- Binding to XML Xml

Demo Code- Binding to XML Run Code

Demo Xml Contacts Code Very Simple sample Shows how you can use XML Databinding + WPF to build a full contacts editing app in less than 10 lines of C# code

XML Demo Contacts

XML Contacts App Demo Contacts App

Wpf Auto. Grid – Simplify Layout Code https: //github. com/carbonrobot/wpf-autogrid

Wpf Auto. Grid – Simplify Layout Code Used in Fusion Config Tool for easy layout As screens become very dynamic and or complex, Autogrid hides noise

Beautiful UI’s with Mah. Apps. Metro Mah. Apps is a very mature UI Framework for WPF XAMLWPF is template and styleable (similar to HTML) Mah. Apps leverages this abilty to become an easy drop in upgrade + Mahapps comes with many nice looking custom controls Also supports theming http: //mahapps. com/

Mah. Apps Demo Example App

Converting XML Contacts to Mah. Apps Copy Paste Mah. Apps WPF Styles Change “Window” to “Controls: Metro. Window” in XAML file Change “Window” base class to “Controls: Metro. Window” in CS file You now have a Mah. Apps powered App!

XML Contacts Mah. Apps Metro Demo

Conclusions WPF Databinding adds complexity- but removes the need to write a lot of low level loading and saving code and UI to model transfer code WPF Theming allows for changing an app’s visuals after the fact Auto. Grid can significantly reduce the engineering time in screen layout

Thank You! Questions?