WPF Quickstart: MVVM Example (#50)

* State an alternative way of embedding WpfPlot

* Description of an alternative implementation

* Link correction

* Typo correction

* WPF quickstart: update MVVM notes

* FAQ: MVVM

---------

Co-authored-by: Scott W Harden <swharden@gmail.com>

Author: dirk-de-bugger

content/faq/mvvm.md

@@ -10,6 +10,12 @@ date: 2023-12-13
 
 **MVVM and data binding patterns can be used to create graphical controls that wrap ScottPlot plots.** Users who strongly desire to use data binding or MVVM patterns are probably working in a platform-specific GUI development framework (such as WPF) and only want to create a control to accomplish a single task (such as an interactive scatter plot with a specific style and layout). These users are encouraged to write their own user control to achieve this custom data-handling and rendering functionality. The ScottPlot controls have been designed to be extremely simple, and users who want to couple data management with graphical interactivity are encouraged to write their own controls using their pattern of choice.
 
-* See [#1781](https://github.com/ScottPlot/ScottPlot/issues/1781#issuecomment-1104310560) for a discussion about how MVVM pattern could be realized using ScottPlot in WPF
-
 **The ScottPlot controls mostly just pass mouse actions to ScottPlot (a GUI-agnostic .NET Standard library), render a Bitmap, and display the image.** It should be an easy task to create a custom control that exposes data (in a format that will be highly specific for your application) and uses events to invoke rendering after data changes. Although this is easy it implement, it is also easy to implement with poor performance, so the developer is encouraged to keep careful track of how often renders are performed.
+
+## Plot using MVVM Pattern in WPF Applications
+
+**MVVM pattern in WPF applications may be achieved** is using a `ContentControl` in the XAML and bind its `Content` to a WpfPlot-typed property in the view model. Although this pattern is not consistent with the primary design goals of ScottPlot, it is certainly possible to achieve.
+
+* See the [**WPF Quickstart**](/quickstart/wpf/) for example code
+
+* See [#1781](https://github.com/ScottPlot/ScottPlot/issues/1781#issuecomment-1104310560) for additional discussion about how MVVM pattern could be realized using ScottPlot in WPF

content/quickstart/wpf.md

@@ -47,4 +47,46 @@ public MainWindow()
         WpfPlot1.Refresh();
     };
 }
-```
+```
+
+
+
+# Plot using MVVM
+
+WPF applications may be created using MVVM ([Model–view–viewmodel](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel)) pattern to improve separation between the GUI layer and business logic.
+
+* All code accessing the `WpfPlot` object can be kept in the view model - the class set as the `DataContext`
+
+* Your concrete implementation can be adapted to the framework, like using attributes when defining the `PlotControl` property, and the use-case
+
+
+### MVVM Example
+
+**View:** Add a `ContentControl` instead of `WpfPlot` in the layout
+```xml
+    <ContentControl Content={Binding PlotControl, Mode=OneTime}/>
+```
+
+**View Model:** Add a `PlotControl` property to the view model
+```cs
+    WpfPlot PlotControl { get; } = new WpfPlot();
+```
+
+**Code-behind:** Create the plot in the view model's constructor
+
+```cs
+void Plot()
+{
+    double[] dataX = { 1, 2, 3, 4, 5 };
+    double[] dataY = { 1, 4, 9, 16, 25 };
+    PlotControl.Plot.Add.Scatter(dataX, dataY);
+    PlotControl.Refresh();
+}
+```
+
+**Updating the Plot:**
+* Access the control by using the `PlotControl` property in the view model
+
+* Plot updates would most likely be done as a reaction to an event or modification of an other property. 
+
+* When to update the plot depends on your use-case. Note that rendering large amounts of data frequently may negatively impact performance.