From 92e975916db67c13426abe8b080d96227712956e Mon Sep 17 00:00:00 2001
From: Yik Teng Hie <thyik@mitech-ltd.com.sg>
Date: Fri, 10 Feb 2023 10:34:12 +0800
Subject: [PATCH] Guidance for View-ViewModel

---
 README.md         |  11 ++-
 view-viewmodel.md | 197 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 206 insertions(+), 2 deletions(-)
 create mode 100644 view-viewmodel.md

diff --git a/README.md b/README.md
index 40097c8..f53990c 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,10 @@
-# prism-knowledgebase
+# KnowledgeBase for Prism Guidance
 
-KnowledgeBase for Prism Pattern
\ No newline at end of file
+* [Official Site](https://prismlibrary.com/)
+* Existing Mitech-wpf use `Prism 4.x`. The only official legacy reference is based on [Prism 6](https://prismlibrary.com/docs/wpf/legacy/Introduction.html)
+  * Its using `MEF Ioc (Dependency Injection)`. The `MEF DI` was removed from Prism 7.x and above. Only `Unity Dependency Injection` supported form Prism 7.x onward
+* The latest Prism Library is `8.1`
+* Prism 8 support NET 5 and dotnet Framework. Prism 6.x and below only DotNet Framework 4.8 and below
+
+## Tutorials
+- [View-ViewModel](./view-viewmodel.md)
\ No newline at end of file
diff --git a/view-viewmodel.md b/view-viewmodel.md
new file mode 100644
index 0000000..37b1dc6
--- /dev/null
+++ b/view-viewmodel.md
@@ -0,0 +1,197 @@
+# Adding New View-ViewModel for Package Info
+
+1. Create XAML view code
+```xml
+<UserControl x:Class="MitechLib.Modules.PackagePage.Views.CarrierInfoView"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="clr-namespace:MitechLib.Modules.PackagePage.Views"
+             mc:Ignorable="d"
+             d:DesignHeight="450"
+             d:DesignWidth="800">
+    <UserControl.Resources>
+        <Style TargetType="TextBlock"
+               BasedOn="{StaticResource MiTStaticTxtStyle}" />
+        
+    </UserControl.Resources>
+    <Grid>
+        <DockPanel>
+
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition />
+                    <ColumnDefinition />
+                </Grid.ColumnDefinitions>
+                <!-- Labels -->
+                <UniformGrid Grid.Column="0"
+                             Columns="1"
+                             Width="300"
+                             VerticalAlignment="Top">
+                    <UniformGrid.Background>
+                        <SolidColorBrush d:Color="AliceBlue" />
+                    </UniformGrid.Background>
+                    
+                    <TextBlock Text="Pitch X (mm)" />
+                    <TextBlock Text="Pitch Y (mm)" />
+                    <TextBlock Text="1st Pocket X (mm)" />
+                    <TextBlock Text="1st Pocket Y (mm)" />
+                    <TextBlock Text="Number of Pocket X" />
+                    <TextBlock Text="Number of Pocket Y" />
+                </UniformGrid>
+                <!-- Values -->
+                <UniformGrid Grid.Column="1"
+                             Columns="1"
+                             VerticalAlignment="Top">
+                    <TextBox Text="2.2" />
+                    <TextBox Text="2.2" />
+                    <TextBox Text="2.2" />
+                    <TextBox Text="2.2" />
+                    <TextBox Text="2.2" />
+                    <TextBox Text="2.2" />
+                </UniformGrid>
+            </Grid>
+            <UniformGrid DockPanel.Dock="Right"
+                         VerticalAlignment="Bottom"
+                         HorizontalAlignment="Right"
+                         Columns="1">
+                <Button Content="Undo" />
+                <Button Content="Save" />
+                <Button Content="Exit" />
+            </UniformGrid>
+        </DockPanel>
+    </Grid>
+</UserControl>
+```
+
+2. Create C# ViewModel Class
+```cs
+
+using MitechLib.Infrastructure.Data;
+
+namespace MitechLib.Modules.PackagePage.ViewModels
+{
+    public class CarrierInfoViewModel : ViewModelBase
+    {
+        private  string _labelPitchX;
+
+        public string  LabelPitchX
+        {
+            get { return _labelPitchX; }
+            set { _labelPitchX = value; }
+        }
+
+        public CarrierInfoViewModel()
+        {
+            LabelPitchX = "Pitch X (mm)";
+        }
+    }
+}
+```
+
+3. Decorate the MEF `[Export] / [Import]` attributes
+```cs
+using MitechLib.Infrastructure.Data;
+using System.ComponentModel.Composition;
+
+namespace MitechLib.Modules.PackagePage.ViewModels
+{
+    [Export]
+    public class CarrierInfoViewModel : ViewModelBase
+    {
+        private  string _labelPitchX;
+
+        public string  LabelPitchX
+        {
+            get { return _labelPitchX; }
+            set { _labelPitchX = value; }
+        }
+
+        public CarrierInfoViewModel()
+        {
+            LabelPitchX = "Pitch X-- (mm)";
+        }
+    }
+}
+```
+
+```cs
+using Microsoft.Practices.Prism.Regions;
+using System.ComponentModel.Composition;
+using System.Windows.Controls;
+
+namespace MitechLib.Modules.PackagePage.Views
+{
+    /// <summary>
+    /// Interaction logic for CarrierInfoView.xaml
+    /// </summary>
+    [ViewSortHint("02")]
+    [PartCreationPolicy(CreationPolicy.Shared)]
+    [Export]
+    public partial class CarrierInfoView : UserControl
+    {
+        public CarrierInfoView()
+        {
+            InitializeComponent();
+        }
+    }
+}
+```
+
+4. Setup DataContext Binding
+```cs
+using Microsoft.Practices.Prism.Regions;
+using MitechLib.Modules.PackagePage.ViewModels;
+using System.ComponentModel.Composition;
+using System.Diagnostics.CodeAnalysis;
+using System.Windows.Controls;
+
+namespace MitechLib.Modules.PackagePage.Views
+{
+    /// <summary>
+    /// Interaction logic for CarrierInfoView.xaml
+    /// </summary>
+    [ViewSortHint("02")]
+    [PartCreationPolicy(CreationPolicy.Shared)]
+    [Export]
+    public partial class CarrierInfoView : UserControl
+    {
+        public CarrierInfoView()
+        {
+            InitializeComponent();
+        }
+
+        [Import]
+        [SuppressMessage("Microsoft.Design", "CA1044:PropertiesShouldNotBeWriteOnly",
+        Justification = "Needs to be a property to be composed by MEF")]
+        public CarrierInfoViewModel ViewModel
+        {
+            set
+            {
+                this.DataContext = value;
+            }
+        }
+    }
+}
+```
+
+```xml
+...
+                    <TextBlock Text="{Binding LabelPitchX}" />
+..
+```
+
+5. Integration with Mitech view registration by updating the `ModuleViewNames.cs` related dictionary with `MitechLib.InfrastructureModules`
+```cs
+
+
+            public static readonly Dictionary<string, string> DeviceInfoRegion = new Dictionary<string, string>
+            {
+               {"CassetteInfoView", "MitechLib.Modules.PackagePage.Views.CassetteInfoView"},
+               {"VisionSettingView", "MitechLib.Modules.PackagePage.Views.VisionSettingView"},
+                //
+               {"CarrierInfoView", "MitechLib.Modules.PackagePage.Views.CarrierInfoView"}
+            };
+
+```
\ No newline at end of file