prism-knowledgebase/view-viewmodel.md

Adding New View-ViewModel for Package Info

1. Create XAML view code

<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

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

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

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

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

...
                    <TextBlock Text="{Binding LabelPitchX}" />
..

5. Integration with Mitech view registration by updating the ModuleViewNames.cs related dictionary with MitechLib.InfrastructureModules

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