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?
- Slides: 22