Implemented TouchToggleSlider !

8 files changed, 233 insertions, 6 deletions

diff --git a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobView.xaml b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobView.xaml
index 27760536a..6589a454d 100644
--- a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobView.xaml
+++ b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobView.xaml
@@ -53,7 +53,7 @@
                                         <touch:TouchTextBox Text="{Binding Job.Customer.Name}" KeyboardMode="AlphaNumeric" KeyboardAction="Next" KeyboardContainer="{Binding ElementName=Container}" />
                                         
                                         <TextBlock>Thread type:</TextBlock>
-                                        <touch:TouchComboBox ItemsSource="{Binding Rmls}" SelectedItem="{Binding Job.Rml}" DisplayMemberPath="Name" />
+                                        <touch:TouchComboBox ItemsSource="{Binding Rmls}" SelectedItem="{Binding Job.Rml}" DisplayMemberPath="Name" Title="Select Thread Type" />
                                         
                                         <TextBlock>Comment:</TextBlock>
                                         <TextBox Margin="20 0 0 -42" Text="{Binding Job.Description}" FocusVisualStyle="{x:Null}" BorderBrush="{StaticResource TangoDividerBrush}" Foreground="{StaticResource TangoDarkForegroundBrush}" AcceptsReturn="True" TextWrapping="Wrap" Height="60" Padding="5">
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchToggleSlider.cs b/Software/Visual_Studio/Tango.Touch/Controls/TouchToggleSlider.cs
new file mode 100644
index 000000000..1193ec12a
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchToggleSlider.cs
@@ -0,0 +1,119 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Animation;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Tango.Touch.Controls
+{
+    public class TouchToggleSlider : ToggleButton
+    {
+        private Grid _grid_ellipse;
+
+        static TouchToggleSlider()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(TouchToggleSlider), new FrameworkPropertyMetadata(typeof(TouchToggleSlider)));
+        }
+
+        public CornerRadius CornerRadius
+        {
+            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
+            set { SetValue(CornerRadiusProperty, value); }
+        }
+        public static readonly DependencyProperty CornerRadiusProperty =
+            DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(TouchToggleSlider), new PropertyMetadata(default(CornerRadius)));
+
+        public Brush ThumbBrush
+        {
+            get { return (Brush)GetValue(ThumbBrushProperty); }
+            set { SetValue(ThumbBrushProperty, value); }
+        }
+        public static readonly DependencyProperty ThumbBrushProperty =
+            DependencyProperty.Register("ThumbBrush", typeof(Brush), typeof(TouchToggleSlider), new PropertyMetadata(null));
+
+        public Object UncheckedContent
+        {
+            get { return (Object)GetValue(UncheckedContentProperty); }
+            set { SetValue(UncheckedContentProperty, value); }
+        }
+        public static readonly DependencyProperty UncheckedContentProperty =
+            DependencyProperty.Register("UncheckedContent", typeof(Object), typeof(TouchToggleSlider), new PropertyMetadata(null));
+
+        public Object CheckedContent
+        {
+            get { return (Object)GetValue(CheckedContentProperty); }
+            set { SetValue(CheckedContentProperty, value); }
+        }
+        public static readonly DependencyProperty CheckedContentProperty =
+            DependencyProperty.Register("CheckedContent", typeof(Object), typeof(TouchToggleSlider), new PropertyMetadata(null));
+
+        public Object UncheckedThumbContent
+        {
+            get { return (Object)GetValue(UncheckedThumbContentProperty); }
+            set { SetValue(UncheckedThumbContentProperty, value); }
+        }
+        public static readonly DependencyProperty UncheckedThumbContentProperty =
+            DependencyProperty.Register("UncheckedThumbContent", typeof(Object), typeof(TouchToggleSlider), new PropertyMetadata(null));
+
+        public Object CheckedThumbContent
+        {
+            get { return (Object)GetValue(CheckedThumbContentProperty); }
+            set { SetValue(CheckedThumbContentProperty, value); }
+        }
+        public static readonly DependencyProperty CheckedThumbContentProperty =
+            DependencyProperty.Register("CheckedThumbContent", typeof(Object), typeof(TouchToggleSlider), new PropertyMetadata(null));
+
+        public Brush UncheckedBackground
+        {
+            get { return (Brush)GetValue(UncheckedBackgroundProperty); }
+            set { SetValue(UncheckedBackgroundProperty, value); }
+        }
+        public static readonly DependencyProperty UncheckedBackgroundProperty =
+            DependencyProperty.Register("UncheckedBackground", typeof(Brush), typeof(TouchToggleSlider), new PropertyMetadata(null));
+
+        public Brush CheckedBackground
+        {
+            get { return (Brush)GetValue(CheckedBackgroundProperty); }
+            set { SetValue(CheckedBackgroundProperty, value); }
+        }
+        public static readonly DependencyProperty CheckedBackgroundProperty =
+            DependencyProperty.Register("CheckedBackground", typeof(Brush), typeof(TouchToggleSlider), new PropertyMetadata(null));
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+            _grid_ellipse = GetTemplateChild("PART_GridEllipse") as Grid;
+        }
+
+        protected override void OnChecked(RoutedEventArgs e)
+        {
+            base.OnChecked(e);
+
+            ThicknessAnimation ani = new ThicknessAnimation();
+            ani.To = new Thickness(ActualWidth - _grid_ellipse.ActualWidth, 0, 0, 0);
+            ani.Duration = TimeSpan.FromSeconds(0.2);
+            _grid_ellipse.BeginAnimation(Grid.MarginProperty, ani);
+        }
+
+        protected override void OnUnchecked(RoutedEventArgs e)
+        {
+            base.OnUnchecked(e);
+
+            ThicknessAnimation ani = new ThicknessAnimation();
+            ani.To = new Thickness(0, 0, 0, 0);
+            ani.Duration = TimeSpan.FromSeconds(0.2);
+            _grid_ellipse.BeginAnimation(Grid.MarginProperty, ani);
+        }
+    }
+}
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchToggleSlider.xaml b/Software/Visual_Studio/Tango.Touch/Controls/TouchToggleSlider.xaml
new file mode 100644
index 000000000..0c8d226ae
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchToggleSlider.xaml
@@ -0,0 +1,98 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
+                    xmlns:fa="http://schemas.fontawesome.io/icons/"
+                    xmlns:local="clr-namespace:Tango.Touch.Controls">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../Resources/Colors.xaml" />
+
+        <ResourceDictionary>
+            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
+            <converters:BooleanToVisibilityInverseConverter x:Key="BooleanToVisibilityInverseConverter"/>
+        </ResourceDictionary>
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style TargetType="{x:Type local:TouchToggleSlider}">
+        <Setter Property="Background" Value="Transparent"></Setter>
+        <Setter Property="UncheckedBackground" Value="Transparent"></Setter>
+        <Setter Property="CheckedBackground" Value="Transparent"></Setter>
+        <Setter Property="Height" Value="40"></Setter>
+        <Setter Property="CornerRadius" Value="20"></Setter>
+        <Setter Property="BorderThickness" Value="1"></Setter>
+        <Setter Property="BorderBrush" Value="{StaticResource TangoPrimaryAccentBrush}"></Setter>
+        <Setter Property="ThumbBrush" Value="{StaticResource TangoPrimaryAccentBrush}"></Setter>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type local:TouchToggleSlider}">
+                    <Border
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">
+
+                        <Border.Style>
+                            <Style TargetType="Border">
+                                <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=UncheckedBackground}"></Setter>
+                                <Style.Triggers>
+                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=IsChecked}" Value="True">
+                                        <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=CheckedBackground}"></Setter>
+                                    </DataTrigger>
+                                </Style.Triggers>
+                            </Style>
+                        </Border.Style>
+                        
+                        <Grid>
+
+                            <Grid>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="1*" />
+                                    <ColumnDefinition Width="1*" />
+                                </Grid.ColumnDefinitions>
+                                
+                                <Grid Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=IsChecked,Converter={StaticResource BooleanToVisibilityInverseConverter}}">
+                                    <ContentPresenter Content="{TemplateBinding UncheckedContent}" />
+                                </Grid>
+
+                                <Grid Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=IsChecked,Converter={StaticResource BooleanToVisibilityConverter}}">
+                                    <ContentPresenter Content="{TemplateBinding CheckedContent}" />
+                                </Grid>
+                            </Grid>
+
+                            <Grid HorizontalAlignment="Left" x:Name="PART_GridEllipse">
+
+                                <Grid Margin="4" x:Name="ellipse" Width="{Binding RelativeSource={RelativeSource Self},Path=ActualHeight}">
+                                    <Ellipse Fill="{TemplateBinding ThumbBrush}"></Ellipse>
+
+                                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=IsChecked,Converter={StaticResource BooleanToVisibilityInverseConverter}}">
+                                        <ContentPresenter Content="{TemplateBinding UncheckedThumbContent}" />
+                                    </Grid>
+
+                                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=IsChecked,Converter={StaticResource BooleanToVisibilityConverter}}">
+                                        <ContentPresenter Content="{TemplateBinding CheckedThumbContent}" />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="TouchToggleButtonCheck" TargetType="{x:Type local:TouchToggleSlider}" BasedOn="{StaticResource {x:Type local:TouchToggleSlider}}">
+        <Setter Property="BorderThickness" Value="0"></Setter>
+        <Setter Property="UncheckedBackground" Value="{StaticResource TangoGrayBrush}"></Setter>
+        <Setter Property="CheckedBackground" Value="{StaticResource TangoGreenBrush}"></Setter>
+        <Setter Property="ThumbBrush" Value="{StaticResource TangoPrimaryBackgroundBrush}"></Setter>
+        <Setter Property="UncheckedThumbContent">
+            <Setter.Value>
+                <fa:ImageAwesome Icon="Close" Width="16" Height="16" Foreground="{StaticResource TangoGrayBrush}" />
+            </Setter.Value>
+        </Setter>
+        <Setter Property="CheckedThumbContent">
+            <Setter.Value>
+                <fa:ImageAwesome Icon="Check" Width="16" Height="16" Foreground="{StaticResource TangoGreenBrush}" />
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>
\ No newline at end of file
diff --git a/Software/Visual_Studio/Tango.Touch/Resources/Colors.xaml b/Software/Visual_Studio/Tango.Touch/Resources/Colors.xaml
index 75c68c749..8eab856ec 100644
--- a/Software/Visual_Studio/Tango.Touch/Resources/Colors.xaml
+++ b/Software/Visual_Studio/Tango.Touch/Resources/Colors.xaml
@@ -38,6 +38,9 @@
 
     <Color x:Key="TangoGrayTextColor">#7e818b</Color>
 
+    <Color x:Key="TangoGreenColor">#56da6c</Color>
+    <Color x:Key="TangoGrayColor">#c1c5cb</Color>
+
     <!--Brushes-->
     <SolidColorBrush x:Key="TangoPrimaryBackgroundBrush" Color="{StaticResource TangoPrimaryBackgroundColor}"></SolidColorBrush>
     <SolidColorBrush x:Key="TangoMidBackgroundBrush" Color="{StaticResource TangoMidBackgroundColor}"></SolidColorBrush>
@@ -73,4 +76,7 @@
     <SolidColorBrush x:Key="TangoDropShadowBrush" Color="{StaticResource TangoDropShadowColor}"></SolidColorBrush>
 
     <SolidColorBrush x:Key="TangoGrayTextBrush" Color="{StaticResource TangoGrayTextColor}"></SolidColorBrush>
+
+    <SolidColorBrush x:Key="TangoGreenBrush" Color="{StaticResource TangoGreenColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="TangoGrayBrush" Color="{StaticResource TangoGrayColor}"></SolidColorBrush>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/Software/Visual_Studio/Tango.Touch/Tango.Touch.csproj b/Software/Visual_Studio/Tango.Touch/Tango.Touch.csproj
index 15566b31c..f37432f4a 100644
--- a/Software/Visual_Studio/Tango.Touch/Tango.Touch.csproj
+++ b/Software/Visual_Studio/Tango.Touch/Tango.Touch.csproj
@@ -69,6 +69,7 @@
     <Compile Include="Controls\TouchTable.cs" />
     <Compile Include="Controls\TouchTextBox.cs" />
     <Compile Include="Controls\TouchPanel.cs" />
+    <Compile Include="Controls\TouchToggleSlider.cs" />
     <Compile Include="Converters\StringToPasswordConverter.cs" />
     <Compile Include="Helpers\TouchHelper.cs" />
     <Page Include="Components\Ripple.xaml">
@@ -155,6 +156,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Controls\TouchToggleSlider.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Keyboard\KeyboardView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
diff --git a/Software/Visual_Studio/Tango.Touch/Themes/Generic.xaml b/Software/Visual_Studio/Tango.Touch/Themes/Generic.xaml
index f28970ea7..2a816f39e 100644
--- a/Software/Visual_Studio/Tango.Touch/Themes/Generic.xaml
+++ b/Software/Visual_Studio/Tango.Touch/Themes/Generic.xaml
@@ -28,6 +28,7 @@
         <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Controls/TouchCheckBox.xaml" />
         <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Controls/TouchComboBox.xaml" />
         <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Controls/TouchExpander.xaml" />
+        <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Controls/TouchToggleSlider.xaml" />
 
         <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Styles/TouchToggleButton.xaml" />
         <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Styles/TouchButton.xaml" />
@@ -35,8 +36,6 @@
 
         <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Controls/TouchPanel.xaml" />
     </ResourceDictionary.MergedDictionaries>
-
-
 </ResourceDictionary>
 
     
diff --git a/Software/Visual_Studio/Utilities/Tango.UITests/App.xaml b/Software/Visual_Studio/Utilities/Tango.UITests/App.xaml
index 75f8c4c28..886e21cc1 100644
--- a/Software/Visual_Studio/Utilities/Tango.UITests/App.xaml
+++ b/Software/Visual_Studio/Utilities/Tango.UITests/App.xaml
@@ -17,6 +17,7 @@
                 <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Styles/TouchToggleButton.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Styles/TouchButton.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Styles/TouchIconButton.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/Tango.Touch;component/Controls/TouchToggleSlider.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
             <Style TargetType="{x:Type touch:LightTouchDataGridHeaderRow}" BasedOn="{StaticResource {x:Type touch:LightTouchDataGridHeaderRow}}">
diff --git a/Software/Visual_Studio/Utilities/Tango.UITests/MainWindow.xaml b/Software/Visual_Studio/Utilities/Tango.UITests/MainWindow.xaml
index 1291c560f..af6e78092 100644
--- a/Software/Visual_Studio/Utilities/Tango.UITests/MainWindow.xaml
+++ b/Software/Visual_Studio/Utilities/Tango.UITests/MainWindow.xaml
@@ -43,9 +43,8 @@
                             <touch:TouchCheckBox Margin="0 20 0 0">Item 4</touch:TouchCheckBox>
                         </StackPanel>
                     </touch:TouchExpander>
-                    <controls:TableGrid Height="100" RowHeight="30">
-                                
-                    </controls:TableGrid>
+
+                    <touch:TouchToggleSlider Height="40" Width="90" Style="{StaticResource TouchToggleButtonCheck}"/>
                 </StackPanel>
             </Grid>
         </touch:TouchPanel>