Working on hardware designer...

8 files changed, 419 insertions, 5 deletions

diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/compass.png b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/compass.png
new file mode 100644
index 000000000..564428dd7
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/compass.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/engine.png b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/engine.png
new file mode 100644
index 000000000..731ddc4f6
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/engine.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/machine-sketch-trans.png b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/machine-sketch-trans.png
new file mode 100644
index 000000000..82a211a4e
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/machine-sketch-trans.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/seamless-grid.jpg b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/seamless-grid.jpg
new file mode 100644
index 000000000..59bb9c370
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Images/seamless-grid.jpg
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Tango.MachineStudio.HardwareDesigner.csproj b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Tango.MachineStudio.HardwareDesigner.csproj
index 20cc9d059..15186d65b 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Tango.MachineStudio.HardwareDesigner.csproj
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Tango.MachineStudio.HardwareDesigner.csproj
@@ -143,5 +143,17 @@
   <ItemGroup>
     <Resource Include="Images\hardware-module.png" />
   </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\machine-sketch-trans.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\seamless-grid.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\engine.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\compass.png" />
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
 </Project>
\ No newline at end of file
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/ViewModels/MainViewVM.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/ViewModels/MainViewVM.cs
index 9fd24d165..4becc0b04 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/ViewModels/MainViewVM.cs
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/ViewModels/MainViewVM.cs
@@ -1,13 +1,82 @@
 using System;
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using Tango.Integration.Observables;
 using Tango.SharedUI;
 
 namespace Tango.MachineStudio.HardwareDesigner.ViewModels
 {
     public class MainViewVM : ViewModel
     {
+        private ObservablesEntitiesAdapter _adapter;
+        public ObservablesEntitiesAdapter Adapter
+        {
+            get { return _adapter; }
+            set { _adapter = value; RaisePropertyChangedAuto(); }
+        }
+
+        private HardwareVersion _selectedVersion;
+        public HardwareVersion SelectedVersion
+        {
+            get { return _selectedVersion; }
+            set { _selectedVersion = value; RaisePropertyChangedAuto(); OnSelectedVersionChanged(); }
+        }
+
+        private HardwareVersion _currentVersion;
+        public HardwareVersion CurrentVersion
+        {
+            get { return _currentVersion; }
+            set { _currentVersion = value; RaisePropertyChangedAuto(); }
+        }
+
+        private ObservableCollection<MotorType> _currentVersionMotorTypes;
+        public ObservableCollection<MotorType> CurrentVersionMotorTypes
+        {
+            get { return _currentVersionMotorTypes; }
+            set { _currentVersionMotorTypes = value; RaisePropertyChangedAuto(); }
+        }
+
+        private ObservableCollection<DancerType> _currentVersionDancerTypes;
+        public ObservableCollection<DancerType> CurrentVersionDancerTypes
+        {
+            get { return _currentVersionDancerTypes; }
+            set { _currentVersionDancerTypes = value; RaisePropertyChangedAuto(); }
+        }
+
+
+        public MainViewVM()
+        {
+            Adapter = ObservablesEntitiesAdapter.Instance;
+        }
+
+        private void OnSelectedVersionChanged()
+        {
+            CurrentVersion = SelectedVersion.Clone();
+            CurrentVersionDancerTypes = CurrentVersion.HardwareVersionsDancerTypes.Select(x => x.DancerType).ToObservableCollection();
+            CurrentVersionMotorTypes = CurrentVersion.HardwareVersionsMotorTypes.Select(x => x.MotorType).ToObservableCollection();
+        }
+
+        public void OnRemoveDancer(DancerType dancerType)
+        {
+            CurrentVersionDancerTypes.Remove(dancerType);
+        }
+
+        public void OnRemoveMotor(MotorType motorType)
+        {
+            CurrentVersionMotorTypes.Remove(motorType);
+        }
+
+        public void OnMotorDrop(MotorType motorType)
+        {
+            CurrentVersionMotorTypes.Add(motorType);
+        }
+
+        public void OnDropDancer(DancerType dancerType)
+        {
+            CurrentVersionDancerTypes.Add(dancerType);
+        }
     }
 }
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Views/MainView.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Views/MainView.xaml
index 187ea728a..77ace3e63 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Views/MainView.xaml
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Views/MainView.xaml
@@ -5,12 +5,21 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:dragAndDrop="clr-namespace:Tango.DragAndDrop;assembly=Tango.DragAndDrop"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
-             xmlns:sharedConverters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
+             xmlns:mahApps="http://metro.mahapps.com/winfx/xaml/controls"
+             xmlns:editors="clr-namespace:Tango.SharedUI.Editors;assembly=Tango.SharedUI"
+             xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
              xmlns:local="clr-namespace:Tango.MachineStudio.HardwareDesigner.Views"
              xmlns:vm="clr-namespace:Tango.MachineStudio.HardwareDesigner.ViewModels"
+             xmlns:observables="clr-namespace:Tango.Integration.Observables;assembly=Tango.Integration"
              xmlns:global="clr-namespace:Tango.MachineStudio.HardwareDesigner"
              mc:Ignorable="d" 
-             d:DesignHeight="720" Background="White" d:DesignWidth="1280" d:DataContext="{d:DesignInstance Type=vm:MainViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.MainViewVM}">
+             d:DesignHeight="720" Background="Transparent" d:DesignWidth="1280" d:DataContext="{d:DesignInstance Type=vm:MainViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.MainViewVM}">
+
+    <UserControl.Resources>
+        <converters:DoubleToIntConverter x:Key="DoubleToIntConverter" />
+        <converters:NullObjectToBooleanConverter x:Key="NullObjectToBooleanConverter" />
+    </UserControl.Resources>
+
     <Grid>
         <Grid>
             <Grid>
@@ -31,14 +40,294 @@
                             <RowDefinition Height="631*"/>
                         </Grid.RowDefinitions>
 
-                        <Grid>
+                        <Grid Margin="-210 0 0 0">
                             <StackPanel Orientation="Horizontal">
                                 <TextBlock FontSize="30" FontStyle="Italic" VerticalAlignment="Center" Margin="50 10 10 0" Foreground="Silver" FontWeight="Bold">HARDWARE DESIGNER</TextBlock>
-                                <StackPanel Orientation="Horizontal">
-                                    
+                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="10 10 0 0">
+                                    <materialDesign:PackIcon Kind="Pencil" Width="32" Height="32" Foreground="Silver" />
+                                    <ComboBox ItemsSource="{Binding Adapter.HardwareVersions}" SelectedItem="{Binding SelectedVersion}" DisplayMemberPath="Name" Width="300" FontSize="16" FontWeight="Bold" Margin="5 0 0 0" materialDesign:HintAssist.Hint="Hardware Version"></ComboBox>
                                 </StackPanel>
                             </StackPanel>
                         </Grid>
+
+                        <Viewbox MaxWidth="1200" Grid.Row="1" >
+                            <Grid VerticalAlignment="Top">
+
+                                <Image IsHitTestVisible="False" Source="../Images/machine-sketch-trans.png" MaxWidth="800" RenderOptions.BitmapScalingMode="Fant">
+                                    <Image.Effect>
+                                        <DropShadowEffect ShadowDepth="0" BlurRadius="20" Opacity="1" RenderingBias="Performance" Color="DimGray"></DropShadowEffect>
+                                    </Image.Effect>
+                                </Image>
+
+                                <Canvas ClipToBounds="False" x:Name="canvas">
+                                    <Border BorderThickness="2" BorderBrush="Gray" CornerRadius="0 0 20 20" Width="707" Height="132" Canvas.Left="50" Canvas.Top="378" Background="#ABFFFFFF">
+                                        <Grid Style="{StaticResource droppableGrid}" dragAndDrop:DragAndDropService.Drop="OnDancerDrop">
+                                            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Silver" FontSize="20">DRAG &amp; DROP DANCERS</TextBlock>
+                                            <ListBox x:Name="listDancers" ItemsSource="{Binding CurrentVersionDancerTypes}" Margin="0 5 0 0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
+                                                <ListBox.ItemsPanel>
+                                                    <ItemsPanelTemplate>
+                                                        <WrapPanel Orientation="Horizontal" />
+                                                    </ItemsPanelTemplate>
+                                                </ListBox.ItemsPanel>
+                                                <ListBox.ItemTemplate>
+                                                    <DataTemplate DataType="{x:Type observables:DancerType}">
+                                                        <Grid Style="{StaticResource draggableGrid}">
+                                                            <Grid.ToolTip>
+                                                                <Border Padding="2">
+                                                                    <ItemsControl ItemsSource="{Binding Parameters}">
+                                                                        <ItemsControl.ItemTemplate>
+                                                                            <DataTemplate>
+                                                                                <TextBlock Margin="2">
+                                                                                                <Run Text="{Binding Name}" FontWeight="SemiBold"></Run>
+                                                                                                :
+                                                                                                <Run Text="{Binding Value}" FontStyle="Italic"></Run>
+                                                                                </TextBlock>
+                                                                            </DataTemplate>
+                                                                        </ItemsControl.ItemTemplate>
+                                                                    </ItemsControl>
+                                                                </Border>
+                                                            </Grid.ToolTip>
+                                                            <Border BorderBrush="Gray" Width="100" Height="100" BorderThickness="1" Background="White" Padding="2" IsHitTestVisible="False">
+                                                                <Grid>
+                                                                    <StackPanel>
+                                                                        <Image Source="../Images/compass.png" Width="32" Margin="5" />
+                                                                        <TextBlock FontSize="8" TextAlignment="Center" TextWrapping="Wrap" Margin="0 5 0 0" Text="{Binding Name}" VerticalAlignment="Center"></TextBlock>
+                                                                    </StackPanel>
+                                                                </Grid>
+                                                            </Border>
+                                                        </Grid>
+                                                    </DataTemplate>
+                                                </ListBox.ItemTemplate>
+                                            </ListBox>
+                                        </Grid>
+                                    </Border>
+
+                                    <Border BorderThickness="2 2 2 0" BorderBrush="Gray" Width="576" Height="157" Canvas.Left="114" Canvas.Top="224" Background="#ABFFFFFF">
+                                        <Grid Style="{StaticResource droppableGrid}" dragAndDrop:DragAndDropService.Drop="OnMotorsDrop">
+                                            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Silver" FontSize="20">DRAG &amp; DROP MOTORS</TextBlock>
+                                            <ListBox x:Name="listMotors" ItemsSource="{Binding CurrentVersionMotorTypes}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
+                                                <ListBox.ItemsPanel>
+                                                    <ItemsPanelTemplate>
+                                                        <WrapPanel Orientation="Horizontal" />
+                                                    </ItemsPanelTemplate>
+                                                </ListBox.ItemsPanel>
+                                                <ListBox.ItemTemplate>
+                                                    <DataTemplate DataType="{x:Type observables:MotorType}">
+                                                        <Grid Style="{StaticResource draggableGrid}">
+                                                            <Grid.ToolTip>
+                                                                <Border Padding="2">
+                                                                    <ItemsControl ItemsSource="{Binding Parameters}">
+                                                                        <ItemsControl.ItemTemplate>
+                                                                            <DataTemplate>
+                                                                                <TextBlock Margin="2">
+                                                                                                <Run Text="{Binding Name}" FontWeight="SemiBold"></Run>
+                                                                                                :
+                                                                                                <Run Text="{Binding Value}" FontStyle="Italic"></Run>
+                                                                                </TextBlock>
+                                                                            </DataTemplate>
+                                                                        </ItemsControl.ItemTemplate>
+                                                                    </ItemsControl>
+                                                                </Border>
+                                                            </Grid.ToolTip>
+                                                            <Border BorderBrush="Gray" Height="25" IsHitTestVisible="False" MaxWidth="100" BorderThickness="1" Background="White" Padding="2">
+                                                                <Grid>
+                                                                    <StackPanel Orientation="Horizontal">
+                                                                        <Image Source="../Images/engine.png" Width="16" />
+                                                                        <TextBlock FontSize="8" Margin="5 0 0 0" TextTrimming="CharacterEllipsis" Text="{Binding Name}" VerticalAlignment="Center"></TextBlock>
+                                                                    </StackPanel>
+                                                                </Grid>
+                                                            </Border>
+                                                        </Grid>
+                                                    </DataTemplate>
+                                                </ListBox.ItemTemplate>
+                                            </ListBox>
+                                        </Grid>
+                                    </Border>
+                                </Canvas>
+                            </Grid>
+                        </Viewbox>
+                    </Grid>
+
+                    <Grid>
+                        <Grid VerticalAlignment="Bottom" Margin="0 0 0 50" Style="{StaticResource droppableGrid}" dragAndDrop:DragAndDropService.Drop="OnTrashDrop">
+                            <StackPanel Margin="0 0 -80 50">
+                                <TextBlock HorizontalAlignment="Center" FontSize="20" Foreground="Gray">
+                                    DROP HERE TO DELETE
+                                </TextBlock>
+                                <materialDesign:PackIcon Kind="ArrowDown" HorizontalAlignment="Center" Width="32" Height="32" Foreground="Gray" Margin="0 10 0 0" />
+                                <materialDesign:PackIcon Kind="Delete" Foreground="#9EFF6A6A" Width="250" Height="250" HorizontalAlignment="Center" />
+                            </StackPanel>
+                        </Grid>
+                    </Grid>
+                </Grid>
+
+                <Grid Grid.Column="1">
+                    <Grid.RowDefinitions>
+                        <RowDefinition/>
+                        <RowDefinition Height="60"/>
+                    </Grid.RowDefinitions>
+
+                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                        <Grid>
+                            <StackPanel>
+                                <materialDesign:Card Margin="5,10,5,0" Background="{DynamicResource MaterialDesignBackground}" Padding="20 10">
+                                    <StackPanel>
+                                        <TextBlock Text="HARDWARE VERSION" Foreground="Gray" FontWeight="Bold" FontStyle="Italic" FontSize="16"></TextBlock>
+
+                                        <TextBlock Margin="0 10 0 0" FontSize="10" Foreground="Gray">Name</TextBlock>
+                                        <TextBox Text="{Binding CurrentVersion.Name,UpdateSourceTrigger=PropertyChanged}"></TextBox>
+
+                                        <TextBlock Margin="0 20 0 0" FontSize="10" Foreground="Gray">Version</TextBlock>
+                                        <mahApps:NumericUpDown Minimum="0" BorderThickness="0 0 0 1" HorizontalContentAlignment="Left" Maximum="1000" HasDecimals="True" Value="{Binding CurrentVersion.Version}" />
+                                    </StackPanel>
+                                </materialDesign:Card>
+
+                                <materialDesign:Card Margin="5,10,5,0" Background="{DynamicResource MaterialDesignBackground}">
+                                    <StackPanel>
+                                        <Expander HorizontalAlignment="Stretch" Header="Motors">
+                                            <ListBox ItemsSource="{Binding Adapter.MotorTypes}" HorizontalContentAlignment="Stretch">
+                                                <ListBox.ItemContainerStyle>
+                                                    <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
+                                                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
+                                                        <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
+                                                        <Setter Property="Padding" Value="1"></Setter>
+                                                    </Style>
+                                                </ListBox.ItemContainerStyle>
+                                                <ListBox.ItemTemplate>
+                                                    <DataTemplate>
+                                                        <Grid Background="Transparent" IsHitTestVisible="True" dragAndDrop:DragAndDropService.DraggableBorderBrush="{StaticResource AccentColorBrush}" dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}">
+                                                            <StackPanel Orientation="Horizontal" Margin="2 8">
+                                                                <Image IsHitTestVisible="False" Width="24" Height="24" Source="../Images/engine.png" Stretch="Fill" RenderOptions.BitmapScalingMode="Fant"></Image>
+                                                                <StackPanel Margin="5 0 0 0" IsHitTestVisible="False" VerticalAlignment="Center">
+                                                                    <TextBlock IsHitTestVisible="False" FontSize="10" Foreground="DimGray"><Run Text="{Binding Name}"></Run></TextBlock>
+                                                                </StackPanel>
+                                                            </StackPanel>
+
+                                                            <Rectangle Margin="0 10 0 0" VerticalAlignment="Bottom" Stroke="Gainsboro" StrokeThickness="1"></Rectangle>
+                                                        </Grid>
+                                                    </DataTemplate>
+                                                </ListBox.ItemTemplate>
+                                            </ListBox>
+                                        </Expander>
+                                        <Border Height="1" HorizontalAlignment="Stretch" Background="{DynamicResource MaterialDesignDivider}" SnapsToDevicePixels="True" />
+                                        <Expander HorizontalAlignment="Stretch" Header="Dancers">
+                                            <ListBox ItemsSource="{Binding Adapter.DancerTypes}" HorizontalContentAlignment="Stretch">
+                                                <ListBox.ItemContainerStyle>
+                                                    <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
+                                                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
+                                                        <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
+                                                        <Setter Property="Padding" Value="1"></Setter>
+                                                    </Style>
+                                                </ListBox.ItemContainerStyle>
+                                                <ListBox.ItemTemplate>
+                                                    <DataTemplate>
+                                                        <Grid Background="Transparent" IsHitTestVisible="True" dragAndDrop:DragAndDropService.DraggableBorderBrush="{StaticResource AccentColorBrush}" dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}">
+                                                            <StackPanel Orientation="Horizontal" Margin="2 8">
+                                                                <Image IsHitTestVisible="False" Width="24" Height="24" Source="../Images/compass.png" Stretch="Fill" RenderOptions.BitmapScalingMode="Fant"></Image>
+                                                                <StackPanel Margin="5 0 0 0" IsHitTestVisible="False" VerticalAlignment="Center">
+                                                                    <TextBlock IsHitTestVisible="False" FontSize="10" Foreground="DimGray"><Run Text="{Binding Name}"></Run></TextBlock>
+                                                                </StackPanel>
+                                                            </StackPanel>
+
+                                                            <Rectangle Margin="0 10 0 0" VerticalAlignment="Bottom" Stroke="Gainsboro" StrokeThickness="1"></Rectangle>
+                                                        </Grid>
+                                                    </DataTemplate>
+                                                </ListBox.ItemTemplate>
+                                            </ListBox>
+                                        </Expander>
+                                    </StackPanel>
+                                </materialDesign:Card>
+
+                                <materialDesign:Card Margin="5,10,5,0" Background="{DynamicResource MaterialDesignBackground}">
+                                    <StackPanel>
+                                        <Grid>
+                                            <Expander HorizontalAlignment="Stretch" Header="Selected Motor Properties">
+                                                <editors:ParameterizedEditor ParameterizedObject="{Binding ElementName=listMotors,Path=SelectedItem}" Padding="10">
+                                                    <editors:ParameterizedEditor.ItemsPanel>
+                                                        <ItemsPanelTemplate>
+                                                            <StackPanel></StackPanel>
+                                                        </ItemsPanelTemplate>
+                                                    </editors:ParameterizedEditor.ItemsPanel>
+                                                    <editors:ParameterizedEditor.DoubleTemplate>
+                                                        <DataTemplate>
+                                                            <DockPanel>
+                                                                <mahApps:NumericUpDown  DockPanel.Dock="Right" Background="Transparent" BorderThickness="0 0 0 0" Value="{Binding Value,UpdateSourceTrigger=PropertyChanged}" HasDecimals="True" HorizontalContentAlignment="Center" Width="100" />
+                                                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center"></TextBlock>
+                                                            </DockPanel>
+                                                        </DataTemplate>
+                                                    </editors:ParameterizedEditor.DoubleTemplate>
+                                                    <editors:ParameterizedEditor.Int32Template>
+                                                        <DataTemplate>
+                                                            <DockPanel>
+                                                                <mahApps:NumericUpDown  DockPanel.Dock="Right" Background="Transparent" BorderThickness="0 0 0 0" Value="{Binding Value,Converter={StaticResource DoubleToIntConverter},UpdateSourceTrigger=PropertyChanged}" HasDecimals="False" HorizontalContentAlignment="Center" Width="100" />
+                                                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center"></TextBlock>
+                                                            </DockPanel>
+                                                        </DataTemplate>
+                                                    </editors:ParameterizedEditor.Int32Template>
+                                                    <editors:ParameterizedEditor.BooleanTemplate>
+                                                        <DataTemplate>
+                                                            <DockPanel Margin="0 5 0 0">
+                                                                <ToggleButton DockPanel.Dock="Right"  Width="100" IsChecked="{Binding Value}" HorizontalAlignment="Right" />
+                                                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center"></TextBlock>
+                                                            </DockPanel>
+                                                        </DataTemplate>
+                                                    </editors:ParameterizedEditor.BooleanTemplate>
+                                                </editors:ParameterizedEditor>
+                                            </Expander>
+                                        </Grid>
+                                    </StackPanel>
+                                </materialDesign:Card>
+
+                                <materialDesign:Card Margin="5,10,5,0" Background="{DynamicResource MaterialDesignBackground}">
+                                    <StackPanel>
+                                        <Grid>
+                                            <Expander HorizontalAlignment="Stretch" Header="Selected Dancer Properties">
+                                                <editors:ParameterizedEditor ParameterizedObject="{Binding ElementName=listDancers,Path=SelectedItem}" Padding="10">
+                                                    <editors:ParameterizedEditor.ItemsPanel>
+                                                        <ItemsPanelTemplate>
+                                                            <StackPanel></StackPanel>
+                                                        </ItemsPanelTemplate>
+                                                    </editors:ParameterizedEditor.ItemsPanel>
+                                                    <editors:ParameterizedEditor.DoubleTemplate>
+                                                        <DataTemplate>
+                                                            <DockPanel>
+                                                                <mahApps:NumericUpDown  DockPanel.Dock="Right" Background="Transparent" BorderThickness="0 0 0 0" Value="{Binding Value,UpdateSourceTrigger=PropertyChanged}" HasDecimals="True" HorizontalContentAlignment="Center" Width="100" />
+                                                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center"></TextBlock>
+                                                            </DockPanel>
+                                                        </DataTemplate>
+                                                    </editors:ParameterizedEditor.DoubleTemplate>
+                                                    <editors:ParameterizedEditor.Int32Template>
+                                                        <DataTemplate>
+                                                            <DockPanel>
+                                                                <mahApps:NumericUpDown  DockPanel.Dock="Right" Background="Transparent" BorderThickness="0 0 0 0" Value="{Binding Value,Converter={StaticResource DoubleToIntConverter},UpdateSourceTrigger=PropertyChanged}" HasDecimals="False" HorizontalContentAlignment="Center" Width="100" />
+                                                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center"></TextBlock>
+                                                            </DockPanel>
+                                                        </DataTemplate>
+                                                    </editors:ParameterizedEditor.Int32Template>
+                                                    <editors:ParameterizedEditor.BooleanTemplate>
+                                                        <DataTemplate>
+                                                            <DockPanel Margin="0 5 0 0">
+                                                                <ToggleButton DockPanel.Dock="Right"  Width="100" IsChecked="{Binding Value}" HorizontalAlignment="Right" />
+                                                                <TextBlock Text="{Binding Name}" VerticalAlignment="Center"></TextBlock>
+                                                            </DockPanel>
+                                                        </DataTemplate>
+                                                    </editors:ParameterizedEditor.BooleanTemplate>
+                                                </editors:ParameterizedEditor>
+                                            </Expander>
+                                        </Grid>
+                                    </StackPanel>
+                                </materialDesign:Card>
+                            </StackPanel>
+                        </Grid>
+                    </ScrollViewer>
+
+                    <Grid Grid.Row="1" Margin="10">
+                        <Button Height="Auto" Command="{Binding SaveCommand}" Margin="0 0 0 0">
+                            <StackPanel Orientation="Horizontal">
+                                <materialDesign:PackIcon Width="20" Height="20" VerticalAlignment="Center" Kind="ContentSaveSettings"></materialDesign:PackIcon>
+                                <TextBlock FontSize="14" Margin="10 0 0 0" VerticalAlignment="Center">SAVE</TextBlock>
+                            </StackPanel>
+                        </Button>
                     </Grid>
                 </Grid>
             </Grid>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Views/MainView.xaml.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Views/MainView.xaml.cs
index ebd3c6c6a..b06d3bd27 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Views/MainView.xaml.cs
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.HardwareDesigner/Views/MainView.xaml.cs
@@ -12,6 +12,9 @@ using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
+using Tango.DragAndDrop;
+using Tango.Integration.Observables;
+using Tango.MachineStudio.HardwareDesigner.ViewModels;
 
 namespace Tango.MachineStudio.HardwareDesigner.Views
 {
@@ -20,9 +23,50 @@ namespace Tango.MachineStudio.HardwareDesigner.Views
     /// </summary>
     public partial class MainView : UserControl
     {
+        private MainViewVM _vm;
+
+        public DraggingSurface DraggingSurface
+        {
+            get { return (DraggingSurface)GetValue(DraggingSurfaceProperty); }
+            set { SetValue(DraggingSurfaceProperty, value); }
+        }
+        public static readonly DependencyProperty DraggingSurfaceProperty =
+            DependencyProperty.Register("DraggingSurface", typeof(DraggingSurface), typeof(MainView), new PropertyMetadata(null));
+
         public MainView()
         {
             InitializeComponent();
+            DraggingSurface = dragSufrace;
+
+            Loaded += (x, y) => _vm = DataContext as MainViewVM;
+        }
+
+        private void OnMotorsDrop(object sender, DropEventArgs e)
+        {
+            if (e.Draggable.DataContext is MotorType)
+            {
+                _vm.OnMotorDrop(e.Draggable.DataContext as MotorType);
+            }
+        }
+
+        private void OnDancerDrop(object sender, DropEventArgs e)
+        {
+            if (e.Draggable.DataContext is DancerType)
+            {
+                _vm.OnDropDancer(e.Draggable.DataContext as DancerType);
+            }
+        }
+
+        private void OnTrashDrop(object sender, DropEventArgs e)
+        {
+            if (e.Draggable.DataContext is MotorType)
+            {
+                _vm.OnRemoveMotor(e.Draggable.DataContext as MotorType);
+            }
+            else if (e.Draggable.DataContext is DancerType)
+            {
+                _vm.OnRemoveDancer(e.Draggable.DataContext as DancerType);
+            }
         }
     }
 }