prism-knowledgebase/view-viewmodel.md

# 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"}
            };

```

## Guide to link View command to ViewModel

1. Create `ICommand` variable in view model. Naming convention `<Action>Command`

2. Create `DelegateCommand` to the ICommand within the constructor
3. Create the Delegate Command callback function
```cs
    [Export]
    public class CarrierInfoViewModel : ViewModelBase, IHeaderInfoProvider<string>
    {
        // Step1
        public ICommand UndoCommand { get; set; }

        [ImportingConstructor]
        public CarrierInfoViewModel(IRegionManager _regionManager)
        {
            // Step2: Initialize ICommand delegate
            this.UndoCommand = new DelegateCommand(this.OnUndoCommand);
        }

        // Step3: Callback
        private void OnUndoCommand()
        {
            ConfirmMessageBoxView confirmmessagebox = new ConfirmMessageBoxView("Confirm to undo changes?");
            confirmmessagebox.ShowDialog();
            if (confirmmessagebox.DialogResult == false)
            {
                return;
            }

            // TODO: Add Business logic HERE
            //UpdateWaferInfo(selectedPackage);
        }
    }
```

4. Bind the ICommand to View xaml
```xml

<Button Content="Undo" Command="{Binding UndoCommand}"/>
```

## Guide for ViewModel IoC via constructor injection
1. Attach [ImportingConstructor] to constructor
2. Assign to a field
3. Use the object within the class
```cs
    [Export]
    public class CarrierInfoViewModel : ViewModelBase, IHeaderInfoProvider<string>
    {
        // Step1
        private readonly IRegionManager regionManager;

        // Step2
        [ImportingConstructor]
        public CarrierInfoViewModel(IRegionManager _regionManager)
        {
            //
            regionManager = _regionManager;
        }

        // Step3
        private void OnExitCommand()
        {

            regionManager.RequestNavigate(RegionNames.PackageMainViewRegion, new Uri("PackageMgmtView", UriKind.Relative));
        }
    }
```