Guidance for View-ViewModel

main
Yik Teng Hie 3 years ago
parent e56a7f33a0
commit 92e975916d

@ -1,3 +1,10 @@
# prism-knowledgebase
# KnowledgeBase for Prism Guidance
KnowledgeBase for Prism Pattern
* [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)

@ -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"}
};
```
Loading…
Cancel
Save