From 6c3f942b4e321dc9e7bbca8d95dc81dcb43f7fd2 Mon Sep 17 00:00:00 2001
From: Roy Ben-Shabat <Roy@Twine-s.com>
Date: Mon, 4 Dec 2017 16:04:48 +0200
Subject: Implemented material design and dragablz to machine designer project.

---
 .../Tango.MachineDesigner.UI/Views/MainView.xaml   | 76 +++++++++++++++++++++-
 1 file changed, 74 insertions(+), 2 deletions(-)

(limited to 'Software/Visual_Studio/Utilities/Tango.MachineDesigner.UI/Views')

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>
-- 
cgit v1.3.1