Implemented material design and dragablz to machine designer project.

7 files changed, 109 insertions, 9 deletions

diff --git a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/App.xaml b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/App.xaml
index c0c40779a..f1a8915cc 100644
--- a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/App.xaml
+++ b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/App.xaml
@@ -1,4 +1,9 @@
-<Application x:Class="Tango.MachineDesigner.UI.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Tango.MachineDesigner.UI" StartupUri="MainWindow.xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" d1p1:Ignorable="d" xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006">
+<Application x:Class="Tango.MachineDesigner.UI.App" 
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
+             xmlns:local="clr-namespace:Tango.MachineDesigner.UI"
+             xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
+             StartupUri="MainWindow.xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" d1p1:Ignorable="d" xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
@@ -19,7 +24,7 @@
                 </ResourceDictionary>
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/materialdesigncolor.lightblue.xaml">
                 </ResourceDictionary>
-                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/materialdesigncolor.red.xaml">
+                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/materialdesigncolor.yellow.xaml">
                 </ResourceDictionary>
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml">
                 </ResourceDictionary>
@@ -39,8 +44,7 @@
                 </ResourceDictionary>
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.Slider.xaml">
                 </ResourceDictionary>
-                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.ProgressBar.xaml">
-                </ResourceDictionary>
+                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.ProgressBar.xaml"/>
 
 
                 <!--MahApps Brushes-->
@@ -60,11 +64,26 @@
                     <SolidColorBrush x:Key="RightArrowFill" Color="{DynamicResource Primary500}" />
                     <SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{DynamicResource Primary500Foreground}" />
                     <SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{DynamicResource Primary500}" Opacity="0.4" />
+                </ResourceDictionary>
 
+                <!-- secondary colour --><!--
+                <ResourceDictionary>
+                    --><!-- include your secondary pallette --><!--
+                    <ResourceDictionary.MergedDictionaries>
+                        <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Yellow.xaml" />
+                    </ResourceDictionary.MergedDictionaries>
 
+                    --><!-- include a single secondary accent color (and the associated forecolour) --><!--
+                    <SolidColorBrush x:Key="SecondaryAccentBrush" Color="{StaticResource Accent200}"/>
+                    <SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="{StaticResource Accent200Foreground}"/>
+                </ResourceDictionary>-->
 
+                <!-- Include the Dragablz Material Design style -->
+                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>
 
-
+                <ResourceDictionary>
+                    <!-- tell Dragablz tab control to use the Material Design theme -->
+                    <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
                 </ResourceDictionary>
 
                 <ResourceDictionary>
diff --git a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Images/design.png b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Images/design.png
new file mode 100644
index 000000000..5b1d473d8
--- /dev/null
+++ b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Images/design.png
diff --git a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Images/machine-trans.png b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Images/machine-trans.png
new file mode 100644
index 000000000..a7cf65852
--- /dev/null
+++ b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Images/machine-trans.png
diff --git a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/MainWindow.xaml b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/MainWindow.xaml
index e0391a884..6ebc84550 100644
--- a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/MainWindow.xaml
+++ b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/MainWindow.xaml
@@ -7,7 +7,7 @@
         xmlns:local="clr-namespace:Tango.MachineDesigner.UI"
         xmlns:views="clr-namespace:Tango.MachineDesigner.UI.Views"
         mc:Ignorable="d"
-        Title="MainWindow" Height="350" Width="525">
+        Title="Tango" Height="720" Width="1280">
     <Grid>
         <views:MainView></views:MainView>
     </Grid>
diff --git a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Tango.MachineDesigner.UI.csproj b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Tango.MachineDesigner.UI.csproj
index a160f3e35..501759312 100644
--- a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Tango.MachineDesigner.UI.csproj
+++ b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Tango.MachineDesigner.UI.csproj
@@ -37,6 +37,9 @@
     <ApplicationIcon>design.ico</ApplicationIcon>
   </PropertyGroup>
   <ItemGroup>
+    <Reference Include="Dragablz, Version=0.0.3.197, Culture=neutral, processorArchitecture=MSIL">
+      <HintPath>..\..\packages\Dragablz.0.0.3.197\lib\net45\Dragablz.dll</HintPath>
+    </Reference>
     <Reference Include="FontAwesome.WPF, Version=4.7.0.37774, Culture=neutral, PublicKeyToken=0758b07a11a4f466, processorArchitecture=MSIL">
       <HintPath>..\..\packages\FontAwesome.WPF.4.7.0.9\lib\net40\FontAwesome.WPF.dll</HintPath>
     </Reference>
@@ -160,7 +163,12 @@
       <Name>Tango.SharedUI</Name>
     </ProjectReference>
   </ItemGroup>
-  <ItemGroup />
+  <ItemGroup>
+    <Resource Include="Images\design.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\machine-trans.png" />
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
   <PropertyGroup>
     <PostBuildEvent>$(TargetDir)linkgen.exe -s "$(TargetPath)" -d "$(TargetDir)Utilities\Machine Designer.lnk"</PostBuildEvent>
diff --git a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Views/MainView.xaml b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Views/MainView.xaml
index d2f6f27db..510ffd0c3 100644
--- a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Views/MainView.xaml
+++ b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Views/MainView.xaml
@@ -3,11 +3,83 @@
              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:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
              xmlns:controls="clr-namespace:Tango.SharedUI.Controls;assembly=Tango.SharedUI"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:local="clr-namespace:Tango.MachineDesigner.UI.Views"
              mc:Ignorable="d" 
-             d:DesignHeight="300" d:DesignWidth="300" Background="White" DataContext="{Binding MainViewVM, Source={StaticResource Locator}}">
+             d:DesignHeight="720" d:DesignWidth="1270" Background="White" DataContext="{Binding MainViewVM, Source={StaticResource Locator}}">
     <Grid>
-        <TextBlock Text="{Binding Text}"></TextBlock>
+        <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
+            <materialDesign:DrawerHost.LeftDrawerContent>
+                <DockPanel MinWidth="212">
+                    <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" 
+                                    DockPanel.Dock="Top"
+                                    HorizontalAlignment="Right" Margin="16"
+                                    IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}" />
+                    <ListBox x:Name="DemoItemsListBox" Margin="0 16 0 16" SelectedIndex="0">
+                        <ListBoxItem>Item 1</ListBoxItem>
+                        <ListBoxItem>Item 2</ListBoxItem>
+                        <ListBoxItem>Item 3</ListBoxItem>
+                        <ListBoxItem>Item 4</ListBoxItem>
+                        <ListBoxItem>Item 5</ListBoxItem>
+                    </ListBox>
+                </DockPanel>
+            </materialDesign:DrawerHost.LeftDrawerContent>
+            <DockPanel>
+                <materialDesign:ColorZone Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth2"
+                                            Mode="PrimaryMid" DockPanel.Dock="Top">
+                    <DockPanel>
+                        <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"
+                                        x:Name="MenuToggleButton"/>
+                        <materialDesign:PopupBox DockPanel.Dock="Right" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
+                            <StackPanel>
+                                <Button Content="Hello World"/>
+                                <Button Content="Nice Popup"/>
+                                <Button Content="Can't Touch This" IsEnabled="False" />
+                                <Separator/>
+                                <Button Content="Goodbye"/>
+                            </StackPanel>
+                        </materialDesign:PopupBox>
+                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Height="60" HorizontalAlignment="Center">
+                            <Image Source="/Images/machine-trans.png" RenderOptions.BitmapScalingMode="Fant"></Image>
+                            <TextBlock Text="Tango Machine Designer" VerticalAlignment="Center" Margin="20 0 0 0" FontSize="36"/>
+                        </StackPanel>
+                    </DockPanel>
+                </materialDesign:ColorZone>
+
+                <Grid>
+                    <Grid>
+                        <Grid>
+                            <Grid>
+                                <dragablz:TabablzControl BorderThickness="0" FontSize="14"  ItemContainerStyle="{DynamicResource TabItemStyle}">
+                                    <dragablz:TabablzControl.Resources>
+                                        <Style x:Key="TabItemStyle" TargetType="{x:Type dragablz:DragablzItem}" BasedOn="{StaticResource MaterialDesignDragableTabItemStyle}">
+                                            <Setter Property="Height" Value="60" />
+                                            <Setter Property="Padding" Value="24,0,24,0" />
+                                        </Style>
+                                    </dragablz:TabablzControl.Resources>
+                                    <dragablz:TabablzControl.InterTabController>
+                                        <dragablz:InterTabController />
+                                    </dragablz:TabablzControl.InterTabController>
+                                    <TabItem Header="MACHINES">
+                                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Hello World</TextBlock>
+                                    </TabItem>
+                                    <TabItem Header="LIQUIDS">
+                                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Material Design</TextBlock>
+                                    </TabItem>
+                                    <TabItem Header="DISPENSERS">
+                                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Looks Quite Nice</TextBlock>
+                                    </TabItem>
+                                    <TabItem Header="MEDIA LIST">
+                                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Looks Quite Nice</TextBlock>
+                                    </TabItem>
+                                </dragablz:TabablzControl>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </DockPanel>
+        </materialDesign:DrawerHost>
     </Grid>
 </controls:View>
diff --git a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/packages.config b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/packages.config
index b6181204f..08bc64f62 100644
--- a/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/packages.config
+++ b/Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/packages.config
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
   <package id="CommonServiceLocator" version="1.3" targetFramework="net46" />
+  <package id="Dragablz" version="0.0.3.197" targetFramework="net46" />
   <package id="FontAwesome.WPF" version="4.7.0.9" targetFramework="net46" />
   <package id="MahApps.Metro" version="1.5.0" targetFramework="net46" />
   <package id="MaterialDesignColors" version="1.1.2" targetFramework="net46" />