Color selection and fine tuning tool

12 files changed, 1793 insertions, 1 deletions

diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerControl.cs b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerControl.cs
new file mode 100644
index 000000000..945509445
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerControl.cs
@@ -0,0 +1,262 @@
+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.Media;
+
+namespace Tango.Touch.Controls
+{
+    public class TouchColorPickerControl: Control
+    {
+        private const string PART_ColorPickerSlider = "PART_ColorPickerSlider";
+        private const string PART_ColorPickerNumericUpDown = "PART_ColorPickerNumericUpDown";
+
+        #region Members
+        private TouchColorPickerSlider _colorPickerSlider;
+        private TouchNumericUpDownConrol _colorPickerNumericUpDown;
+        #endregion
+
+        #region Properties
+        private LinearGradientBrush _pickerBrush;
+
+        public LinearGradientBrush PickerBrush
+        {
+            get { return _pickerBrush; }
+            set
+            {
+                _pickerBrush = value;
+                OnPickerBrushChanged();
+            }
+        }
+
+        private void OnPickerBrushChanged()
+        {
+            if (_colorPickerSlider != null)
+            {
+                _colorPickerSlider.SliderBackground = PickerBrush;
+            }
+        }
+
+        public double MinValue
+        {
+            get { return (double)GetValue(MinValueProperty); }
+            set { SetValue(MinValueProperty, value); }
+        }
+
+        /// <summary>
+        /// The slider  minimum value property
+        /// </summary>
+        public static readonly DependencyProperty MinValueProperty =
+            DependencyProperty.Register("MinValue", typeof(double), typeof(TouchColorPickerControl), new PropertyMetadata(0.0));
+
+
+        public double MaxValue
+        {
+            get { return (double)GetValue(MaxValueProperty); }
+            set { SetValue(MaxValueProperty, value); OnMaxValuChanged(); }
+        }
+
+        private void OnMaxValuChanged()
+        {
+
+        }
+
+        /// <summary>
+        /// The slider maximum value property
+        /// </summary>
+        public static readonly DependencyProperty MaxValueProperty =
+            DependencyProperty.Register("MaxValue", typeof(double), typeof(TouchColorPickerControl), new PropertyMetadata(100.0));
+
+        public string ColorPickerText
+        {
+            get { return (string)GetValue(ColorPickerTextProperty); }
+            set { SetValue(ColorPickerTextProperty, value); }
+        }
+
+        /// <summary>
+        /// The color picker text property
+        /// </summary>
+        public static readonly DependencyProperty ColorPickerTextProperty =
+            DependencyProperty.Register("ColorPickerText", typeof(string), typeof(TouchColorPickerControl), new PropertyMetadata(null));
+
+        public double ColorValue
+        {
+            get { return (double)GetValue(ColorValueProperty); }
+            set
+            {
+                SetValue(ColorValueProperty, value);
+                OnColorValueChaged();
+            }
+        }
+
+        /// <summary>
+        /// The color number value property of slider and picker number control
+        /// </summary>
+        public static readonly DependencyProperty ColorValueProperty =
+            DependencyProperty.Register("ColorValue", typeof(double), typeof(TouchColorPickerControl), new PropertyMetadata(0.0));
+
+        /// <summary>
+        /// The selected color property
+        /// </summary>
+        public static readonly DependencyProperty SelectedColorProperty = DependencyProperty.Register("SelectedColor", typeof(Color?), typeof(TouchColorPickerControl), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
+        public Color? SelectedColor
+        {
+            get
+            {
+                return (Color?)GetValue(SelectedColorProperty);
+            }
+            set
+            {
+                SetValue(SelectedColorProperty, value);
+                OnSelectedColorChaged();
+            }
+        }
+
+
+        public double ThumbHeight
+        {
+            get { return (double)GetValue(ThumbHeightProperty); }
+            set { SetValue(ThumbHeightProperty, value); }
+        }
+
+        /// <summary>
+        /// The thumb height property
+        /// </summary>
+        public static readonly DependencyProperty ThumbHeightProperty =
+            DependencyProperty.Register("ThumbHeight", typeof(double), typeof(TouchColorPickerControl), new PropertyMetadata(32.0));
+
+        public double ThumbHeightInside
+        {
+            get { return (double)GetValue(ThumbHeightInsideProperty); }
+            set { SetValue(ThumbHeightInsideProperty, value); }
+        }
+
+        /// <summary>
+        /// The thumb height property
+        /// </summary>
+        public static readonly DependencyProperty ThumbHeightInsideProperty =
+            DependencyProperty.Register("ThumbHeightInside", typeof(double), typeof(TouchColorPickerControl), new PropertyMetadata(30.0));
+
+
+
+        public Color ThumbColor
+        {
+            get { return (Color)GetValue(ThumbColorProperty); }
+            set { SetValue(ThumbColorProperty, value); }
+        }
+
+        /// <summary>
+        /// The thumb color property
+        /// </summary>
+        public static readonly DependencyProperty ThumbColorProperty =
+            DependencyProperty.Register("ThumbColor", typeof(Color), typeof(TouchColorPickerControl), new UIPropertyMetadata(Colors.LightGray, null));
+
+
+        #endregion
+
+        static TouchColorPickerControl()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(TouchColorPickerControl), new FrameworkPropertyMetadata(typeof(TouchColorPickerControl)));
+        }
+
+        #region Base Class Overrides
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+            if (_colorPickerSlider != null)
+                _colorPickerSlider.ValueChanged -= ColorPickerSlider_ValueChanged;
+
+            _colorPickerSlider = GetTemplateChild(PART_ColorPickerSlider) as TouchColorPickerSlider;
+
+            if (_colorPickerSlider != null)
+            {
+                _colorPickerSlider.ValueChanged += ColorPickerSlider_ValueChanged;
+                _colorPickerSlider.Minimum = MinValue;
+                _colorPickerSlider.Maximum = MaxValue;
+                _colorPickerSlider.Value = ColorValue;
+                _colorPickerSlider.SliderBackground = PickerBrush;
+            }
+
+            if (_colorPickerNumericUpDown != null)
+            {
+                _colorPickerNumericUpDown.ColorNumberChanged -= ColorPickerNumber_ValueChanged;
+            }
+
+            _colorPickerNumericUpDown = GetTemplateChild(PART_ColorPickerNumericUpDown) as TouchNumericUpDownConrol;
+
+            if (_colorPickerNumericUpDown != null)
+            {
+                _colorPickerNumericUpDown.MinValue = MinValue;
+                _colorPickerNumericUpDown.MaxValue = MaxValue;
+                _colorPickerNumericUpDown.Value = ColorValue;
+                _colorPickerNumericUpDown.ColorNumberChanged += ColorPickerNumber_ValueChanged;
+            }
+        }
+        #endregion
+
+        #region Methods
+
+        private void ColorPickerNumber_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double?> e)
+        {
+            if (_colorPickerSlider != null && _colorPickerSlider.Value != (double)e.NewValue)
+            {
+                _colorPickerSlider.Value = (double)e.NewValue;
+                OnPickerSliderValueChanged((double)e.OldValue, (double)e.NewValue);
+            }
+        }
+        public void ColorPickerSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        {
+            if (_colorPickerNumericUpDown != null && _colorPickerNumericUpDown.Value != e.NewValue)
+            {
+                _colorPickerNumericUpDown.Value = e.NewValue;
+                OnPickerSliderValueChanged(e.OldValue, e.NewValue);
+            }
+        }
+
+        private void OnPickerSliderValueChanged(double oldValue, double newValue)
+        {
+            ColorValue = newValue;
+            RoutedPropertyChangedEventArgs<double> args = new RoutedPropertyChangedEventArgs<double>(oldValue, newValue);
+            args.RoutedEvent = TouchColorPickerControl.PickerSliderValueChangedEvent;
+            RaiseEvent(args);
+        }
+
+        private void OnSelectedColorChaged()
+        {
+            if (_colorPickerSlider != null)
+            {
+                _colorPickerSlider.SelectedColor = SelectedColor;
+            }
+        }
+
+        private void OnColorValueChaged()
+        {
+            if (_colorPickerSlider != null && _colorPickerSlider.Value != ColorValue)
+            {
+                _colorPickerSlider.Value = ColorValue;
+            }
+        }
+
+        #endregion
+        #region Events
+
+        public static readonly RoutedEvent PickerSliderValueChangedEvent = EventManager.RegisterRoutedEvent("PickerSliderValueChanged", RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<double>), typeof(TouchColorPickerControl));
+        public event RoutedPropertyChangedEventHandler<double> PickerSliderValueChanged
+        {
+            add
+            {
+                AddHandler(PickerSliderValueChangedEvent, value);
+            }
+            remove
+            {
+                RemoveHandler(PickerSliderValueChangedEvent, value);
+            }
+        }
+
+        #endregion
+    }
+}
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerControl.xaml b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerControl.xaml
new file mode 100644
index 000000000..a1373054b
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerControl.xaml
@@ -0,0 +1,41 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="clr-namespace:Tango.Touch.Controls">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../Resources/Colors.xaml" />
+        <ResourceDictionary Source="../Resources/Fonts.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style TargetType="{x:Type local:TouchColorPickerControl}" >
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type local:TouchColorPickerControl}">
+                    <Grid Margin="0" Background="{TemplateBinding Background}">
+                        <Grid.RowDefinitions>
+                            <RowDefinition RowDefinition.Height="Auto" />
+                            <RowDefinition RowDefinition.Height="Auto" />
+                            <RowDefinition RowDefinition.Height="Auto" />
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid Grid.Row="0">
+                            <TextBlock FontSize="{StaticResource TangoComboBoxItemFontSize}" TextBlock.Text="{Binding ColorPickerText, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerControl}}" HorizontalAlignment="Left" Margin="6 0 0 0" FontWeight="SemiBold" VerticalAlignment="Center" />
+                            <local:TouchNumericUpDownConrol x:Name="PART_ColorPickerNumericUpDown" HorizontalAlignment="Right" BorderThickness="0.8" BorderBrush="{TemplateBinding BorderBrush}" Margin="0 0 5 0"/>
+                        </Grid>
+                        <local:TouchColorPickerSlider x:Name="PART_ColorPickerSlider" Grid.Row="1" Margin=" 0 10 0 0"  Background="{TemplateBinding Background}"
+                                                      ThumbHeightInside ="{Binding RelativeSource={RelativeSource AncestorType=local:TouchColorPickerControl}, Path=ThumbHeightInside}" 
+                                                      ThumbHeight="{Binding RelativeSource={RelativeSource AncestorType=local:TouchColorPickerControl}, Path=ThumbHeight}" 
+                                                      ThumbColor="{Binding ThumbColor, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerControl}}"
+                                                      SelectedColor="{Binding SelectedColor, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerControl}}"/>
+                        <DockPanel Grid.Row="2" Margin=" 0 0 0 0">
+                            <TextBlock DockPanel.Dock="Left" FontSize="{StaticResource TangoSmallFontSize}" TextBlock.Text="0" HorizontalAlignment="Left" Margin="6 0 0 0" VerticalAlignment="Center" FontWeight="SemiBold"/>
+                            <TextBlock DockPanel.Dock="Right" FontSize="{StaticResource TangoSmallFontSize}" TextBlock.Text="100%" HorizontalAlignment="Right" Margin="6 0 0 0" VerticalAlignment="Center" FontWeight="SemiBold" />
+                        </DockPanel>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerHSBControl.cs b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerHSBControl.cs
new file mode 100644
index 000000000..2fd743b54
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerHSBControl.cs
@@ -0,0 +1,445 @@
+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.Media;
+using ColorMine.ColorSpaces;
+
+namespace Tango.Touch.Controls
+{
+    public class TouchColorPickerHSBControl: Control
+    {
+        public class HsbColor
+        {
+            public double H;
+            public double S;
+            public double B;
+
+            public HsbColor(double h, double s, double b)
+            {
+                H = h;
+                S = s;
+                B = b;
+            }
+        }
+
+        private const string PART_HColorPickerControl = "PART_HColorPickerControl";
+        private const string PART_SColorPickerControl = "PART_SColorPickerControl";
+        private const string PART_BColorPickerControl = "PART_BColorPickerControl";
+
+        #region Property
+        private TouchColorPickerControl _hueColorSlider;
+
+        private TouchColorPickerControl _satuarationColorSlider;
+
+        private TouchColorPickerControl _brightnessColorSlider;
+
+        public static readonly DependencyProperty SelectedColorProperty = DependencyProperty.Register("SelectedColor", typeof(Color), typeof(TouchColorPickerHSBControl), new FrameworkPropertyMetadata(Color.FromRgb(128, 0, 0), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnSelectedColorPropertyChanged)));
+        public Color SelectedColor
+        {
+            get
+            {
+                return (Color)GetValue(SelectedColorProperty);
+            }
+            set
+            {
+                SetValue(SelectedColorProperty, value);
+            }
+        }
+
+        public double ThumbHeight
+        {
+            get { return (double)GetValue(ThumbHeightProperty); }
+            set { SetValue(ThumbHeightProperty, value); }
+        }
+
+        /// <summary>
+        /// The thumb height property
+        /// </summary>
+        public static readonly DependencyProperty ThumbHeightProperty =
+            DependencyProperty.Register("ThumbHeight", typeof(double), typeof(TouchColorPickerHSBControl), new PropertyMetadata((double)18));
+
+        public double ThumbHeightInside
+        {
+            get { return (double)GetValue(ThumbHeightInsideProperty); }
+            set { SetValue(ThumbHeightInsideProperty, value); }
+        }
+
+        /// <summary>
+        /// The thumb height property
+        /// </summary>
+        public static readonly DependencyProperty ThumbHeightInsideProperty =
+            DependencyProperty.Register("ThumbHeightInside", typeof(double), typeof(TouchColorPickerHSBControl), new PropertyMetadata((double)18));
+
+        public Color ThumbColor
+        {
+            get { return (Color)GetValue(ThumbColorProperty); }
+            set { SetValue(ThumbColorProperty, value); }
+        }
+        
+        /// <summary>
+        /// The thumb color property
+        /// </summary>
+        public static readonly DependencyProperty ThumbColorProperty =
+            DependencyProperty.Register("ThumbColor", typeof(Color), typeof(TouchColorPickerHSBControl), new PropertyMetadata(Color.FromRgb(0, 0, 0)));
+
+
+        public double H
+        {
+            get { return (double)GetValue(HProperty); }
+            set { SetValue(HProperty, value); }
+        }
+        /// <summary>
+        /// The hue property
+        /// </summary>
+        public static readonly DependencyProperty HProperty =
+            DependencyProperty.Register("H", typeof(double), typeof(TouchColorPickerHSBControl), new FrameworkPropertyMetadata((double)0, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnHPropertyChanged)));
+
+        public double S
+        {
+            get { return (double)GetValue(SProperty); }
+            set { SetValue(SProperty, value); }
+        }
+        /// <summary>
+        /// The saturation property
+        /// </summary>
+        public static readonly DependencyProperty SProperty =
+            DependencyProperty.Register("S", typeof(double), typeof(TouchColorPickerHSBControl), new FrameworkPropertyMetadata((double)0, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnSPropertyChanged)));
+
+        public double B
+        {
+            get { return (double)GetValue(BProperty); }
+            set { SetValue(BProperty, value); }
+        }
+
+        /// <summary>
+        /// The brightness property
+        /// </summary>
+        public static readonly DependencyProperty BProperty =
+            DependencyProperty.Register("B", typeof(double), typeof(TouchColorPickerHSBControl), new FrameworkPropertyMetadata((double)0, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnBPropertyChanged)));
+
+        #endregion
+
+        #region Constructors
+        static TouchColorPickerHSBControl()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(TouchColorPickerHSBControl), new FrameworkPropertyMetadata(typeof(TouchColorPickerHSBControl)));
+        }
+
+        public TouchColorPickerHSBControl()
+        {
+
+        }
+
+        #endregion
+
+        #region Base Class Overrides
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            HsbColor color = new HsbColor(H, S, B);
+            SelectedColor = ConvertHsbToRgb(H, S / 100, B / 100);
+
+            if (_hueColorSlider != null)
+            {
+                _hueColorSlider.PickerSliderValueChanged -= OnHueChanged;
+            }
+            _hueColorSlider = GetTemplateChild(PART_HColorPickerControl) as TouchColorPickerControl;
+            if (_hueColorSlider != null)
+            {
+                InitHueColorSlider(color.H);
+                _hueColorSlider.PickerSliderValueChanged += OnHueChanged;
+            }
+            if (_satuarationColorSlider != null)
+            {
+                _satuarationColorSlider.PickerSliderValueChanged -= OnSaturationChanged;
+            }
+            _satuarationColorSlider = GetTemplateChild(PART_SColorPickerControl) as TouchColorPickerControl;
+            if (_satuarationColorSlider != null)
+            {
+                InitSaturationSlider(color.S);
+                _satuarationColorSlider.PickerSliderValueChanged += OnSaturationChanged;
+            }
+            if (_brightnessColorSlider != null)
+            {
+                _brightnessColorSlider.PickerSliderValueChanged -= OnBrightnessChanged;
+            }
+            _brightnessColorSlider = GetTemplateChild(PART_BColorPickerControl) as TouchColorPickerControl;
+            if (_brightnessColorSlider != null)
+            {
+                InitBrightnessSlider(color.B);
+                _brightnessColorSlider.PickerSliderValueChanged += OnBrightnessChanged;
+            }
+            CreateSaturationBrush();
+            CreateBrightnessBrush();
+        }
+
+        #endregion
+
+        #region Methods
+        private static void OnSelectedColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TouchColorPickerHSBControl TouchHsbColorControl = (TouchColorPickerHSBControl)d;
+            if (TouchHsbColorControl != null)
+                TouchHsbColorControl.OnSelectedColorChanged((Color?)e.OldValue, (Color?)e.NewValue);
+        }
+        private void OnSelectedColorChanged(Color? oldValue, Color? newValue)
+        {
+            RoutedPropertyChangedEventArgs<Color?> args = new RoutedPropertyChangedEventArgs<Color?>(oldValue, newValue);
+            args.RoutedEvent = TouchColorPickerHSBControl.SelectedColorChangedEvent;
+            RaiseEvent(args);
+        }
+
+        private static void OnHPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TouchColorPickerHSBControl TouchHsbColorControl = (TouchColorPickerHSBControl)d;
+            if (TouchHsbColorControl != null)
+            {
+                TouchHsbColorControl.OnHPropertyChanged((double)e.OldValue, (double)e.NewValue);
+            }
+        }
+
+        private void OnHPropertyChanged(double oldValue, double newValue)
+        {
+            if (_hueColorSlider != null && oldValue != newValue)
+            {
+                _hueColorSlider.ColorValue = newValue;
+                
+            }
+        }
+
+        private static void OnSPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TouchColorPickerHSBControl TouchHsbColorControl = (TouchColorPickerHSBControl)d;
+            if (TouchHsbColorControl != null)
+            {
+                TouchHsbColorControl.OnSPropertyChanged((double)e.OldValue, (double)e.NewValue);
+            }
+        }
+
+        private void OnSPropertyChanged(double oldValue, double newValue)
+        {
+            if (_satuarationColorSlider != null && oldValue != newValue)
+            {
+                _satuarationColorSlider.ColorValue = newValue;
+            }
+        }
+
+        private static void OnBPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TouchColorPickerHSBControl TouchHsbColorControl = (TouchColorPickerHSBControl)d;
+            if (TouchHsbColorControl != null)
+            {
+                TouchHsbColorControl.OnBPropertyChanged((double)e.OldValue, (double)e.NewValue);
+            }
+        }
+        private void OnBPropertyChanged(double oldValue, double newValue)
+        {
+            if (_brightnessColorSlider != null && oldValue != newValue)
+            {
+                _brightnessColorSlider.ColorValue = newValue;
+            }
+        }
+
+        /// <summary>
+        /// Initializes the hue color slider.
+        /// </summary>
+        private void InitHueColorSlider(double value)
+        {
+            _hueColorSlider.MinValue = 0;
+            _hueColorSlider.MaxValue = 360;
+            LinearGradientBrush hueColorBrush = new LinearGradientBrush();
+            hueColorBrush.ColorInterpolationMode = ColorInterpolationMode.SRgbLinearInterpolation;
+
+            var colorsList = GenerateHsvSpectrum();
+
+            double stopIncrement = (double)1 / (colorsList.Count - 1);
+
+            int i;
+            for (i = 0; i < colorsList.Count; i++)
+            {
+                var offset = i * stopIncrement;
+                hueColorBrush.GradientStops.Add(new GradientStop(colorsList[i], i * stopIncrement));
+            }
+
+            hueColorBrush.GradientStops[i - 1].Offset = 1.0;
+            _hueColorSlider.PickerBrush = hueColorBrush;
+            _hueColorSlider.ColorValue = value;
+            _hueColorSlider.ColorPickerText = "HUE";
+            Color color = ConvertHsbToRgb(value, 1, 1);
+            _hueColorSlider.SelectedColor = color;
+        }
+
+        /// <summary>
+        /// Initializes the saturation slider.
+        /// </summary>
+        private void InitSaturationSlider(double value)
+        {
+            _satuarationColorSlider.MinValue = 0;
+            _satuarationColorSlider.MaxValue = 100;
+            _satuarationColorSlider.ColorValue = value;
+            _satuarationColorSlider.ColorPickerText = "SATURATION";
+        }
+
+        /// <summary>
+        /// Initializes the brightness slider.
+        /// </summary>
+        private void InitBrightnessSlider(double value)
+        {
+            _brightnessColorSlider.MinValue = 0;
+            _brightnessColorSlider.MaxValue = 100;
+            _brightnessColorSlider.ColorValue = value;
+            _brightnessColorSlider.ColorPickerText = "BRIGHTNESS";
+        }
+
+        /// <summary>
+        /// Called when [hue changed].
+        /// </summary>
+        /// <param name="sender">The sender.</param>
+        /// <param name="e">The <see cref="RoutedPropertyChangedEventArgs{System.Double}"/> instance containing the event data.</param>
+        private void OnHueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        {
+            if (e.OldValue != e.NewValue)
+            {
+                Color color = ConvertHsbToRgb(e.NewValue, 1, 1);
+                _hueColorSlider.SelectedColor = color;
+                H = Math.Round(e.NewValue, 2, MidpointRounding.AwayFromZero);
+                SelectedColor = ConvertHsbToRgb(e.NewValue, _satuarationColorSlider.ColorValue / 100, _brightnessColorSlider.ColorValue / 100);
+
+                CreateSaturationBrush();
+                CreateBrightnessBrush();
+            }
+
+        }
+
+        /// <summary>
+        /// Called when [saturation changed].
+        /// </summary>
+        /// <param name="sender">The sender.</param>
+        /// <param name="e">The <see cref="RoutedPropertyChangedEventArgs{System.Double}"/> instance containing the event data.</param>
+        private void OnSaturationChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        {
+            if (e.OldValue != e.NewValue)
+            {
+                SelectedColor = ConvertHsbToRgb(_hueColorSlider.ColorValue, e.NewValue / 100, _brightnessColorSlider.ColorValue / 100);
+                _satuarationColorSlider.SelectedColor = SelectedColor;
+                S = Math.Round(e.NewValue, 2, MidpointRounding.AwayFromZero);
+
+                CreateBrightnessBrush();
+
+            }
+        }
+
+        /// <summary>
+        /// Called when [Brightness changed].
+        /// </summary>
+        /// <param name="sender">The sender.</param>
+        /// <param name="e">The <see cref="RoutedPropertyChangedEventArgs{System.Double}"/> instance containing the event data.</param>
+        private void OnBrightnessChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        {
+            if (e.OldValue != e.NewValue)
+            {
+                SelectedColor = ConvertHsbToRgb(_hueColorSlider.ColorValue, _satuarationColorSlider.ColorValue / 100, e.NewValue / 100);
+                _brightnessColorSlider.SelectedColor = SelectedColor;
+                B = Math.Round(e.NewValue, 2, MidpointRounding.AwayFromZero);
+
+                CreateSaturationBrush();
+            }
+        }
+
+        /// <summary>
+        /// Creates the saturation brush.
+        /// </summary>
+        private void CreateSaturationBrush()
+        {
+            LinearGradientBrush saturationBrush = new LinearGradientBrush();
+            saturationBrush.ColorInterpolationMode = ColorInterpolationMode.SRgbLinearInterpolation;
+            Color minSaturationColor = ConvertHsbToRgb(_hueColorSlider.ColorValue, 0, _brightnessColorSlider.ColorValue / 100);
+            saturationBrush.GradientStops.Add(new GradientStop(minSaturationColor, 0.0));
+            Color maxSaturationColor = ConvertHsbToRgb(_hueColorSlider.ColorValue, 1, _brightnessColorSlider.ColorValue / 100);
+            saturationBrush.GradientStops.Add(new GradientStop(maxSaturationColor, 1.0));
+            _satuarationColorSlider.PickerBrush = saturationBrush;
+            _satuarationColorSlider.SelectedColor = ConvertHsbToRgb(_hueColorSlider.ColorValue, _satuarationColorSlider.ColorValue / 100, _brightnessColorSlider.ColorValue / 100); 
+        }
+
+        /// <summary>
+        /// Creates the brightness brush.
+        /// </summary>
+        private void CreateBrightnessBrush()
+        {
+            LinearGradientBrush brightnessBrush = new LinearGradientBrush();
+            brightnessBrush.ColorInterpolationMode = ColorInterpolationMode.SRgbLinearInterpolation;
+            Color minBrightnessColor = ConvertHsbToRgb(_hueColorSlider.ColorValue, _satuarationColorSlider.ColorValue / 100, 0);
+            brightnessBrush.GradientStops.Add(new GradientStop(minBrightnessColor, 0.0));
+            Color middleBrightnessColor = ConvertHsbToRgb(_hueColorSlider.ColorValue, _satuarationColorSlider.ColorValue / 100, 0.5);
+            brightnessBrush.GradientStops.Add(new GradientStop(middleBrightnessColor, 0.5));
+            Color maxBrightnessColor = ConvertHsbToRgb(_hueColorSlider.ColorValue, _satuarationColorSlider.ColorValue / 100, 1);
+            brightnessBrush.GradientStops.Add(new GradientStop(maxBrightnessColor, 1.0));
+            _brightnessColorSlider.PickerBrush = brightnessBrush;
+            _brightnessColorSlider.SelectedColor = ConvertHsbToRgb(_hueColorSlider.ColorValue, _satuarationColorSlider.ColorValue / 100, _brightnessColorSlider.ColorValue/100); ;
+        }
+
+        #endregion
+
+        #region Events
+
+        public static readonly RoutedEvent SelectedColorChangedEvent = EventManager.RegisterRoutedEvent("SelectedColorChanged", RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<Color?>), typeof(TouchColorPickerHSBControl));
+        public event RoutedPropertyChangedEventHandler<Color?> SelectedColorChanged
+        {
+            add
+            {
+                AddHandler(SelectedColorChangedEvent, value);
+            }
+            remove
+            {
+                RemoveHandler(SelectedColorChangedEvent, value);
+            }
+        }
+
+        #endregion
+
+        #region HSB Converters
+        public List<Color> GenerateHsvSpectrum()
+        {
+            var colorsList = new List<Color>();
+            int hStep = 60;
+
+            for (int h = 0; h < 360; h += hStep)
+            {
+                colorsList.Add(ConvertHsbToRgb(h, 1, 1));
+            }
+
+            colorsList.Add(ConvertHsbToRgb(0, 1, 1));
+
+            return colorsList;
+        }
+        public static Color ConvertHsbToRgb(double h, double s, double b)
+        {
+            Hsb hsb = new Hsb(h, s, b);
+            Rgb rgb = new Rgb(hsb.ToRgb());
+            //var test_color2 = Color.FromArgb(255, (byte)rgb.R, (byte)rgb.G, (byte)rgb.B);
+            return Color.FromArgb(255, (byte)rgb.R, (byte)rgb.G, (byte)rgb.B);
+        }
+
+        /// <summary>
+        /// Converts an RGB color to an HSV color.
+        /// </summary>
+        /// <param name="r"></param>
+        /// <param name="g"></param>
+        /// <param name="b"></param>
+        /// <returns></returns>
+        public static HsbColor ConvertRgbToHsb(int r, int g, int b)
+        {
+            Rgb rgb = new Rgb(r, g, b);
+            var hsb = rgb.To<Hsb>();
+            return new HsbColor(hsb.H, hsb.S, hsb.B);
+
+        }
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerHSBControl.xaml b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerHSBControl.xaml
new file mode 100644
index 000000000..d2e28ca74
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerHSBControl.xaml
@@ -0,0 +1,37 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="clr-namespace:Tango.Touch.Controls">
+    
+    
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../Resources/Colors.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style  TargetType="{x:Type local:TouchColorPickerHSBControl}">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type local:TouchColorPickerHSBControl}">
+                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True" CornerRadius="16" Padding="0">
+                        <UniformGrid Margin="4" Columns="1" Rows="3">
+                            <local:TouchColorPickerControl x:Name="PART_HColorPickerControl" Grid.Row="0" Margin=" 0 10 0 0" HorizontalAlignment="Stretch" BorderBrush="{TemplateBinding BorderBrush}"  MinWidth="160" VerticalAlignment="Bottom" MinValue="0" MaxValue="360"
+                                                           ThumbHeight="{Binding ThumbHeight, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerHSBControl}}" 
+                                                           ThumbHeightInside="{Binding ThumbHeightInside, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerHSBControl}}"
+                                                           ThumbColor="{Binding ThumbColor, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerHSBControl}}"/>
+                            <local:TouchColorPickerControl x:Name="PART_SColorPickerControl" Grid.Row="1" Margin=" 0 4 0 0" HorizontalAlignment="Stretch" BorderBrush="{TemplateBinding BorderBrush}"  MinWidth="160" VerticalAlignment="Bottom" MinValue="0" MaxValue="100"
+                                                           ThumbHeight="{Binding ThumbHeight, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerHSBControl}}" 
+                                                           ThumbHeightInside="{Binding ThumbHeightInside, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerHSBControl}}"
+                                                           ThumbColor="{Binding ThumbColor, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerHSBControl}}"/>
+                            <local:TouchColorPickerControl x:Name="PART_BColorPickerControl" Grid.Row="2" Margin=" 0 4 0 0" HorizontalAlignment="Stretch" BorderBrush="{TemplateBinding BorderBrush}"   MinWidth="160" VerticalAlignment="Bottom" MinValue="0" MaxValue="100"
+                                                           ThumbHeight="{Binding ThumbHeight, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerHSBControl}}"
+                                                           ThumbHeightInside="{Binding ThumbHeightInside, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerHSBControl}}"
+                                                           ThumbColor="{Binding ThumbColor, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerHSBControl}}"/>
+
+                        </UniformGrid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    
+</ResourceDictionary>
\ No newline at end of file
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerRGBControl.cs b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerRGBControl.cs
new file mode 100644
index 000000000..9b0514fcc
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerRGBControl.cs
@@ -0,0 +1,359 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Controls;
+using System.Windows.Media;
+using System.Windows;
+
+
+namespace Tango.Touch.Controls
+{
+    [TemplatePart(Name = PART_RTouchColorPickerControl, Type = typeof(TouchColorPickerControl))]
+    [TemplatePart(Name = PART_GTouchColorPickerControl, Type = typeof(TouchColorPickerControl))]
+    [TemplatePart(Name = PART_BTouchColorPickerControl, Type = typeof(TouchColorPickerControl))]
+    public class TouchColorPickerRGBControl : Control
+    {
+        private const string PART_RTouchColorPickerControl = "PART_RTouchColorPickerControl";
+        private const string PART_GTouchColorPickerControl = "PART_GTouchColorPickerControl";
+        private const string PART_BTouchColorPickerControl = "PART_BTouchColorPickerControl";
+
+        #region Property
+        private TouchColorPickerControl _RColorSlider;
+
+        private TouchColorPickerControl _GColorSlider;
+
+        private TouchColorPickerControl _BColorSlider;
+
+        public static readonly DependencyProperty SelectedColorProperty = DependencyProperty.Register("SelectedColor", typeof(Color), typeof(TouchColorPickerRGBControl), new FrameworkPropertyMetadata(Color.FromRgb(128, 0, 0), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnSelectedColorPropertyChanged)));
+        public Color SelectedColor
+        {
+            get
+            {
+                return (Color)GetValue(SelectedColorProperty);
+            }
+            set
+            {
+                SetValue(SelectedColorProperty, value);
+            }
+        }
+
+        public double ThumbHeight
+        {
+            get { return (double)GetValue(ThumbHeightProperty); }
+            set { SetValue(ThumbHeightProperty, value); }
+        }
+
+        /// <summary>
+        /// The thumb height property
+        /// </summary>
+        public static readonly DependencyProperty ThumbHeightProperty =
+            DependencyProperty.Register("ThumbHeight", typeof(double), typeof(TouchColorPickerRGBControl), new PropertyMetadata((double)18));
+
+        public double ThumbHeightInside
+        {
+            get { return (double)GetValue(ThumbHeightInsideProperty); }
+            set { SetValue(ThumbHeightInsideProperty, value); }
+        }
+
+        /// <summary>
+        /// The thumb height property
+        /// </summary>
+        public static readonly DependencyProperty ThumbHeightInsideProperty =
+            DependencyProperty.Register("ThumbHeightInside", typeof(double), typeof(TouchColorPickerRGBControl), new PropertyMetadata((double)18));
+
+        public Color ThumbColor
+        {
+            get { return (Color)GetValue(ThumbColorProperty); }
+            set { SetValue(ThumbColorProperty, value); }
+        }
+
+        /// <summary>
+        /// The thumb color property
+        /// </summary>
+        public static readonly DependencyProperty ThumbColorProperty =
+            DependencyProperty.Register("ThumbColor", typeof(Color), typeof(TouchColorPickerRGBControl), new PropertyMetadata(Color.FromRgb(0, 0, 0)));
+
+        public double R
+        {
+            get { return (double)GetValue(RProperty); }
+            set { SetValue(RProperty, value); }
+        }
+        /// <summary>
+        /// The red property
+        /// </summary>
+        public static readonly DependencyProperty RProperty =
+            DependencyProperty.Register("R", typeof(double), typeof(TouchColorPickerRGBControl), new FrameworkPropertyMetadata((double)0, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnRPropertyChanged)));
+
+        public double G
+        {
+            get { return (double)GetValue(GProperty); }
+            set { SetValue(GProperty, value); }
+        }
+        /// <summary>
+        /// The green property
+        /// </summary>
+        public static readonly DependencyProperty GProperty =
+            DependencyProperty.Register("G", typeof(double), typeof(TouchColorPickerRGBControl), new FrameworkPropertyMetadata((double)0, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnGPropertyChanged)));
+
+        public double B
+        {
+            get { return (double)GetValue(BProperty); }
+            set { SetValue(BProperty, value); }
+        }
+
+        /// <summary>
+        /// The blue property
+        /// </summary>
+        public static readonly DependencyProperty BProperty =
+            DependencyProperty.Register("B", typeof(double), typeof(TouchColorPickerRGBControl), new FrameworkPropertyMetadata((double)0, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnBPropertyChanged)));
+        
+       
+        
+        #endregion
+
+
+        #region Constructors
+
+        static TouchColorPickerRGBControl()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(TouchColorPickerRGBControl), new FrameworkPropertyMetadata(typeof(TouchColorPickerRGBControl)));
+        }
+        
+        #endregion
+
+        #region Base Class Overrides
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            if (_RColorSlider != null)
+            {
+                _RColorSlider.PickerSliderValueChanged -= OnRChanged;
+            }
+            
+            SelectedColor = Color.FromRgb((byte)R,(byte)G,(byte)B);
+
+            _RColorSlider = GetTemplateChild(PART_RTouchColorPickerControl) as TouchColorPickerControl;
+            if (_RColorSlider != null)
+            {
+                CreateRBrush(SelectedColor);
+                _RColorSlider.MinValue = 0;
+                _RColorSlider.MaxValue = 255;
+                _RColorSlider.ColorValue = SelectedColor.R;
+                _RColorSlider.ColorPickerText = "RED";
+                _RColorSlider.PickerSliderValueChanged += OnRChanged;
+                
+            }
+            if (_GColorSlider != null)
+            {
+                _GColorSlider.PickerSliderValueChanged -= OnGChanged;
+            }
+            _GColorSlider = GetTemplateChild(PART_GTouchColorPickerControl) as TouchColorPickerControl;
+            if (_GColorSlider != null)
+            {
+                _GColorSlider.MinValue = 0;
+                _GColorSlider.MaxValue = 255;
+                CreateGBrush(SelectedColor);
+                _GColorSlider.ColorValue = SelectedColor.G;
+                _GColorSlider.ColorPickerText = "GREEN";
+                _GColorSlider.PickerSliderValueChanged += OnGChanged;
+            }
+            if (_BColorSlider != null)
+            {
+                _BColorSlider.PickerSliderValueChanged -= OnBChanged;
+            }
+            _BColorSlider = GetTemplateChild(PART_BTouchColorPickerControl) as TouchColorPickerControl;
+            if (_BColorSlider != null)
+            {
+                _BColorSlider.MinValue = 0;
+                _BColorSlider.MaxValue = 255;
+                CreateBBrush(SelectedColor);
+                _BColorSlider.ColorValue = SelectedColor.G;
+                _BColorSlider.ColorPickerText = "BLUE";
+                _BColorSlider.PickerSliderValueChanged += OnBChanged;
+            }
+        }
+
+        #endregion
+
+        #region Methods
+        private static void OnSelectedColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TouchColorPickerRGBControl TouchColorPickerRGBControl = (TouchColorPickerRGBControl)d;
+            if (TouchColorPickerRGBControl != null)
+                TouchColorPickerRGBControl.OnSelectedColorChanged((Color?)e.OldValue, (Color?)e.NewValue);
+        }
+        private void OnSelectedColorChanged(Color? oldValue, Color? newValue)
+        {
+            RoutedPropertyChangedEventArgs<Color?> args = new RoutedPropertyChangedEventArgs<Color?>(oldValue, newValue);
+            args.RoutedEvent = TouchColorPickerRGBControl.SelectedColorChangedEvent;
+            RaiseEvent(args);
+        }
+        private static void OnRPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TouchColorPickerRGBControl TouchColorPickerRGBControl = (TouchColorPickerRGBControl)d;
+
+            if (TouchColorPickerRGBControl != null)
+            {
+                TouchColorPickerRGBControl.OnRPropertyChanged((double)e.OldValue, (double)e.NewValue);
+            }
+        }
+
+        private void OnRPropertyChanged(double oldValue, double newValue)
+        {
+            if (_RColorSlider != null && oldValue != newValue)
+            {
+                _RColorSlider.ColorValue = newValue;
+            }
+        }
+
+        private static void OnGPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TouchColorPickerRGBControl TouchColorPickerRGBControl = (TouchColorPickerRGBControl)d;
+
+            if (TouchColorPickerRGBControl != null)
+            {
+                TouchColorPickerRGBControl.OnGPropertyChanged((double)e.OldValue, (double)e.NewValue);
+            }
+        }
+
+        private void OnGPropertyChanged(double oldValue, double newValue)
+        {
+            if (_GColorSlider != null && oldValue != newValue)
+            {
+                _GColorSlider.ColorValue = newValue;
+            }
+        }
+
+        private static void OnBPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TouchColorPickerRGBControl TouchColorPickerRGBControl = (TouchColorPickerRGBControl)d;
+
+            if (TouchColorPickerRGBControl != null)
+            {
+                TouchColorPickerRGBControl.OnBPropertyChanged((double)e.OldValue, (double)e.NewValue);
+            }
+        }
+        private void OnBPropertyChanged(double oldValue, double newValue)
+        {
+            if (_BColorSlider != null && oldValue != newValue)
+            {
+                _BColorSlider.ColorValue = newValue;
+            }
+        }
+
+        /// <summary>
+        /// Called when [red value of color picker changed].
+        /// </summary>
+        private void OnRChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        {
+          //  if (e.OldValue != e.NewValue)
+            {
+                Color color = Color.FromRgb((byte)e.NewValue, (byte)_GColorSlider.ColorValue, (byte)_BColorSlider.ColorValue);
+                _RColorSlider.SelectedColor = color;
+                R = Math.Round(e.NewValue, 2, MidpointRounding.AwayFromZero);
+                SelectedColor = color;
+
+                CreateGBrush(color);
+                CreateBBrush(color);
+            }
+        }
+
+        /// <summary>
+        /// Called when [green value of color picker changed].
+        /// </summary>
+        private void OnGChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        {
+          //  if (e.OldValue != e.NewValue)
+            {
+                Color color = Color.FromRgb((byte)_RColorSlider.ColorValue, (byte)_GColorSlider.ColorValue, (byte)_BColorSlider.ColorValue);
+                _GColorSlider.SelectedColor = color;
+                G = Math.Round(e.NewValue, 2, MidpointRounding.AwayFromZero);
+                SelectedColor = color;
+
+                CreateRBrush(color);
+                CreateBBrush(color);
+            }
+        }
+
+        // <summary>
+        /// Called when [blue value of color picker changed].
+        /// </summary>
+        private void OnBChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
+        {
+         //   if (e.OldValue != e.NewValue)
+            {
+                Color color = Color.FromRgb((byte)_RColorSlider.ColorValue, (byte)_GColorSlider.ColorValue, (byte)_BColorSlider.ColorValue);
+                _BColorSlider.SelectedColor = color;
+                B = Math.Round(e.NewValue, 2, MidpointRounding.AwayFromZero);
+                SelectedColor = color;
+
+                CreateRBrush(color);
+                CreateGBrush(color);
+            }
+        }
+
+        /// <summary>
+        /// Creates the Red picker color  brush.
+        /// </summary>
+        private void CreateRBrush(Color color)
+        {
+            LinearGradientBrush rBrush = new LinearGradientBrush();
+            rBrush.ColorInterpolationMode = ColorInterpolationMode.SRgbLinearInterpolation;
+            rBrush.GradientStops.Add(new GradientStop(Color.FromRgb(0, color.G, color.B), 0.0));
+            rBrush.GradientStops.Add(new GradientStop(Color.FromRgb(255, color.G, color.B), 1.0));
+            _RColorSlider.PickerBrush = rBrush;
+            _RColorSlider.SelectedColor = Color.FromRgb((byte)_RColorSlider.ColorValue, color.G, color.B);
+        }
+
+        /// <summary>
+        /// Creates the Green picker color  brush.
+        /// </summary>
+        private void CreateGBrush(Color color)
+        {
+            LinearGradientBrush gBrush = new LinearGradientBrush();
+            gBrush.ColorInterpolationMode = ColorInterpolationMode.SRgbLinearInterpolation;
+            gBrush.GradientStops.Add(new GradientStop(Color.FromRgb(color.R, 0, color.B), 0.0));
+            gBrush.GradientStops.Add(new GradientStop(Color.FromRgb(color.R, 255, color.B), 1.0));
+            _GColorSlider.PickerBrush = gBrush;
+            _GColorSlider.SelectedColor = Color.FromRgb(color.R, (byte) _GColorSlider.ColorValue, color.B);
+        }
+
+        /// <summary>
+        /// Creates the Blue picker color  brush.
+        /// </summary>
+        private void CreateBBrush(Color color)
+        {
+            LinearGradientBrush bBrush = new LinearGradientBrush();
+            bBrush.ColorInterpolationMode = ColorInterpolationMode.SRgbLinearInterpolation;
+            bBrush.GradientStops.Add(new GradientStop(Color.FromRgb(color.R, color.G, 0), 0.0));
+            bBrush.GradientStops.Add(new GradientStop(Color.FromRgb(color.R, color.G, 255), 1.0));
+            _BColorSlider.PickerBrush = bBrush;
+            _BColorSlider.SelectedColor = Color.FromRgb(color.R, color.G, (byte)_BColorSlider.ColorValue);
+        }
+
+        #endregion
+
+        #region Events
+
+        public static readonly RoutedEvent SelectedColorChangedEvent = EventManager.RegisterRoutedEvent("SelectedColorChanged", RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<Color?>), typeof(TouchColorPickerRGBControl));
+        public event RoutedPropertyChangedEventHandler<Color?> SelectedColorChanged
+        {
+            add
+            {
+                AddHandler(SelectedColorChangedEvent, value);
+            }
+            remove
+            {
+                RemoveHandler(SelectedColorChangedEvent, value);
+            }
+        }
+
+        #endregion
+
+    }
+}
+
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerRGBControl.xaml b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerRGBControl.xaml
new file mode 100644
index 000000000..86a3e35bb
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerRGBControl.xaml
@@ -0,0 +1,34 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="clr-namespace:Tango.Touch.Controls">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../Resources/Colors.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style  TargetType="{x:Type local:TouchColorPickerRGBControl}">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type local:TouchColorPickerRGBControl}">
+                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True" CornerRadius="16" Padding="0">
+                        <UniformGrid Margin="4" Columns="1" Rows="3">
+                            <local:TouchColorPickerControl x:Name="PART_RTouchColorPickerControl" Grid.Row="0" Margin=" 0 10 0 0" HorizontalAlignment="Stretch" BorderBrush="{TemplateBinding BorderBrush}"  VerticalAlignment="Stretch" MinValue="0" MaxValue="255"
+                                                           ThumbHeight="{Binding ThumbHeight, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerRGBControl}}" 
+                                                           ThumbHeightInside="{Binding ThumbHeightInside, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerRGBControl}}"
+                                                           ThumbColor="{Binding ThumbColor, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerRGBControl}}"/>
+                            <local:TouchColorPickerControl x:Name="PART_GTouchColorPickerControl" Grid.Row="1" Margin=" 0 10 0 0" HorizontalAlignment="Stretch" BorderBrush="{TemplateBinding BorderBrush}"  VerticalAlignment="Stretch" MinValue="0" MaxValue="255"
+                                                           ThumbHeight="{Binding ThumbHeight, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerRGBControl}}" 
+                                                           ThumbHeightInside="{Binding ThumbHeightInside, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerRGBControl}}"
+                                                           ThumbColor="{Binding ThumbColor, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerRGBControl}}"/>
+                            <local:TouchColorPickerControl x:Name="PART_BTouchColorPickerControl" Grid.Row="2" Margin=" 0 10 0 0" HorizontalAlignment="Stretch" BorderBrush="{TemplateBinding BorderBrush}"  VerticalAlignment="Stretch" MinValue="0" MaxValue="255"
+                                                           ThumbHeight="{Binding ThumbHeight, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerRGBControl}}" 
+                                                           ThumbHeightInside="{Binding ThumbHeightInside, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerRGBControl}}"
+                                                           ThumbColor="{Binding ThumbColor, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerRGBControl}}"/>
+                        </UniformGrid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>
\ No newline at end of file
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerSlider.cs b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerSlider.cs
new file mode 100644
index 000000000..c92c52158
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerSlider.cs
@@ -0,0 +1,168 @@
+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.Media;
+
+namespace Tango.Touch.Controls
+{
+    public class TouchColorPickerSlider: Slider
+    {
+        private const string PART_ColorPickerDisplay = "PART_ColorPickerDisplay";
+
+        #region Members
+        private Border _colorPickerDisplay;
+        #endregion
+
+        static TouchColorPickerSlider()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(TouchColorPickerSlider), new FrameworkPropertyMetadata(typeof(TouchColorPickerSlider)));
+        }
+
+        #region Properties
+
+        /// <summary>
+        /// The selected color property
+        /// </summary>
+        public static readonly DependencyProperty SelectedColorProperty = DependencyProperty.Register("SelectedColor", typeof(Color?), typeof(TouchColorPickerSlider), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
+        public Color? SelectedColor
+        {
+            get
+            {
+                return (Color?)GetValue(SelectedColorProperty);
+            }
+            set
+            {
+                SetValue(SelectedColorProperty, value);
+            }
+        }
+
+        /// <summary>
+        /// The slider background property
+        /// </summary>
+        public static readonly DependencyProperty SliderBackgroundProperty =
+            DependencyProperty.Register("SliderBackground", typeof(LinearGradientBrush), typeof(TouchColorPickerSlider), new PropertyMetadata(new LinearGradientBrush()));
+        public LinearGradientBrush SliderBackground
+        {
+            get { return (LinearGradientBrush)GetValue(SliderBackgroundProperty); }
+            set { SetValue(SliderBackgroundProperty, value); }
+        }
+
+        /// <summary>
+        /// The slider border color property
+        /// </summary>
+        public static readonly DependencyProperty SliderBorderColorProperty =
+            DependencyProperty.Register("SliderBorderColor", typeof(Color), typeof(TouchColorPickerSlider), new UIPropertyMetadata(Colors.DarkGray, null));
+        public Color SliderBorderColor
+        {
+            get { return (Color)GetValue(SliderBorderColorProperty); }
+            set { SetValue(SliderBorderColorProperty, value); }
+        }
+
+        /// <summary>
+        /// The slider radius circle property
+        /// </summary>
+        public static readonly DependencyProperty ThumbHeightProperty =
+            DependencyProperty.Register("ThumbHeight", typeof(double), typeof(TouchColorPickerSlider), new FrameworkPropertyMetadata((double)32, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
+
+        public double ThumbHeight
+        {
+            get { return (double)GetValue(ThumbHeightProperty); }
+            set { SetValue(ThumbHeightProperty, value); }
+        }
+       
+        public Color ThumbColor
+        {
+            get { return (Color)GetValue(ThumbColorProperty); }
+            set { SetValue(ThumbColorProperty, value); }
+        }
+
+        /// <summary>
+        /// The thumb color property
+        /// </summary>
+        public static readonly DependencyProperty ThumbColorProperty =
+            DependencyProperty.Register("ThumbColor", typeof(Color), typeof(TouchColorPickerSlider), new UIPropertyMetadata(Colors.LightGray, null));
+
+
+
+        /// <summary>
+        /// The slider inside radius circle property
+        /// </summary>
+        public static readonly DependencyProperty ThumbHeightInsideProperty =
+            DependencyProperty.Register("ThumbHeightInside", typeof(double), typeof(TouchColorPickerSlider), new PropertyMetadata((double)30));
+
+        public double ThumbHeightInside
+        {
+            get { return (double)GetValue(ThumbHeightInsideProperty); }
+            set { SetValue(ThumbHeightInsideProperty, value); }
+        }
+
+
+
+        public Point SliderRadiusCircleCenter
+        {
+            get { return (Point)GetValue(SliderRadiusCircleCenterProperty); }
+            set { SetValue(SliderRadiusCircleCenterProperty, value); }
+        }
+
+        /// <summary>
+        /// The slider radius circle center property
+        /// </summary>
+        public static readonly DependencyProperty SliderRadiusCircleCenterProperty =
+            DependencyProperty.Register("SliderRadiusCircleCenter", typeof(Point), typeof(TouchColorPickerSlider), new PropertyMetadata(new Point(14, 14)));
+
+
+        #endregion
+
+        #region Base Class Overrides
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            _colorPickerDisplay = (Border)GetTemplateChild(PART_ColorPickerDisplay);
+            _colorPickerDisplay.BorderBrush = new SolidColorBrush(SliderBorderColor);
+            OnValueChanged(Double.NaN, Value);
+        }
+
+        /// <summary>
+        /// Updates the current position of the <see cref="T:System.Windows.Controls.Slider" /> when the <see cref="P:System.Windows.Controls.Primitives.RangeBase.Value" /> property changes.
+        /// </summary>
+        /// <param name="oldValue">The old <see cref="P:System.Windows.Controls.Primitives.RangeBase.Value" /> of the <see cref="T:System.Windows.Controls.Slider" />.</param>
+        /// <param name="newValue">The new <see cref="P:System.Windows.Controls.Primitives.RangeBase.Value" /> of the <see cref="T:System.Windows.Controls.Slider" />.</param>
+        protected override void OnValueChanged(double oldValue, double newValue)
+        {
+            base.OnValueChanged(oldValue, newValue);
+
+            RoutedPropertyChangedEventArgs<double> args = new RoutedPropertyChangedEventArgs<double>(oldValue, newValue);
+            args.RoutedEvent = TouchColorPickerSlider.PickerSliderValueChangedEvent;
+            RaiseEvent(args);
+        }
+
+        #endregion
+
+        #region Events
+
+        public static readonly RoutedEvent PickerSliderValueChangedEvent = EventManager.RegisterRoutedEvent("PickerSliderValueChanged", RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<double>), typeof(TouchColorPickerSlider));
+        public event RoutedPropertyChangedEventHandler<double> PickerSliderValueChanged
+        {
+            add
+            {
+                AddHandler(PickerSliderValueChangedEvent, value);
+            }
+            remove
+            {
+                RemoveHandler(PickerSliderValueChangedEvent, value);
+            }
+        }
+
+        #endregion
+        #region Methods       
+
+
+        #endregion //Methods
+    }
+}
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerSlider.xaml b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerSlider.xaml
new file mode 100644
index 000000000..b5cebf60f
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchColorPickerSlider.xaml
@@ -0,0 +1,131 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="clr-namespace:Tango.Touch.Controls"
+                    xmlns:conv="clr-namespace:Tango.Touch.Converters">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../Resources/Colors.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">
+        <Setter Property="OverridesDefaultStyle" Value="true"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Focusable" Value="false"/>
+        <Setter Property="IsTabStop" Value="false"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type RepeatButton}">
+                    <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="ThumbColorPicker" Style.TargetType="{x:Type Thumb}" >
+        <Setter Setter.Property="SnapsToDevicePixels" Setter.Value="True" />
+        <Setter Setter.Property="OverridesDefaultStyle" Setter.Value="True" />
+        <Setter Setter.Property="Template">
+            <Setter.Value>
+                <ControlTemplate  TargetType="{x:Type Thumb}">
+                    <Grid Width="{Binding RelativeSource={RelativeSource Self},Path=ActualHeight}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="0.2" />
+                            <ColumnDefinition Width="1*" />
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="0.2*" />
+                            <RowDefinition Height="1*" />
+                        </Grid.RowDefinitions>
+
+                        <Ellipse x:Name="grip" Grid.ColumnSpan="2" Grid.RowSpan="3" Stroke="{StaticResource TangoPrimaryAccentBrush}" StrokeThickness="0">
+                            <Ellipse.Fill>
+                                <RadialGradientBrush Opacity="0.5">
+                                    <GradientStop Offset="0" Color="{StaticResource TangoPrimaryAccentColor}" />
+                                    <GradientStop Offset="0.7" Color="{StaticResource TangoPrimaryAccentColor}" />
+                                    <GradientStop Offset="1" Color="#A6FFFFFF" />
+                                </RadialGradientBrush>
+                            </Ellipse.Fill>
+                        </Ellipse>
+
+                        <Ellipse x:Name="knob" Grid.Column="0" Grid.Row="1" Stroke="{StaticResource TangoGrayBrush}" StrokeThickness="0" Fill="{StaticResource TangoPrimaryAccentBrush}" Opacity="0.5"></Ellipse>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="ColorPickerSliderThumb" Style.TargetType="{x:Type Thumb}" >
+        <Setter Setter.Property="SnapsToDevicePixels" Setter.Value="True" />
+        <Setter Setter.Property="OverridesDefaultStyle" Setter.Value="True" />
+        <Setter Setter.Property="Template">
+            <Setter.Value>
+                <ControlTemplate ControlTemplate.TargetType="{x:Type Thumb}">
+                    <Grid x:Name="grip" HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center" >
+                        <Ellipse x:Name="PART_OutsideThumb" 
+                                 Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" 
+                                 Width="{Binding ThumbHeight, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerSlider}}"  
+                                 HorizontalAlignment="Center" VerticalAlignment="Center" >
+                            <Ellipse.Fill>
+                                <SolidColorBrush Color="{Binding ThumbColor, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerSlider}}"/>
+                            </Ellipse.Fill>
+                        </Ellipse>
+
+                        <Ellipse x:Name="PART_InsideThumb" 
+                                 Width="{Binding ThumbHeightInside, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerSlider}}"
+                                 Height="{Binding  ActualWidth, RelativeSource={RelativeSource Self}}"
+                                 HorizontalAlignment="Center" VerticalAlignment="Center" >
+                            <Ellipse.Fill>
+                                <SolidColorBrush Color="{Binding SelectedColor, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerSlider}, Mode=TwoWay}">
+
+                                </SolidColorBrush>
+                            </Ellipse.Fill>
+                        </Ellipse>
+                        <Grid.Effect>
+                            <DropShadowEffect BlurRadius="10" RenderingBias="Quality" ShadowDepth="1" Color="{StaticResource TangoDropShadowColor}"/>
+                        </Grid.Effect>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style TargetType="local:TouchColorPickerSlider">
+        <Setter Property="Background" Value="{StaticResource TangoNotificationBarMaskBrush}"/>
+
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:TouchColorPickerSlider">
+                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True" CornerRadius="6">
+                        <Grid>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="1*" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="1*" />
+                            </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*"/>
+                            </Grid.ColumnDefinitions>
+                            <Border x:Name="PART_ColorPickerDisplay" Grid.Row="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{Binding SliderBackground, RelativeSource={RelativeSource AncestorType=local:TouchColorPickerSlider}}" Height="14.6" Margin="5 0 0 0"  VerticalAlignment="center" CornerRadius="6" >
+
+                            </Border>
+
+                            <Track Track.Name="PART_Track" Grid.Row="0"  Margin="0 -2 0 0" VerticalAlignment="Center" Grid.RowSpan="3">
+                                <Track.DecreaseRepeatButton>
+                                    <RepeatButton  Style="{StaticResource RepeatButtonTransparent}" />
+                                </Track.DecreaseRepeatButton>
+                                <Track.IncreaseRepeatButton>
+                                    <RepeatButton Style="{StaticResource RepeatButtonTransparent}" />
+                                </Track.IncreaseRepeatButton>
+                                <Track.Thumb>
+                                    <Thumb Thumb.Name="PART_Thumb" UIElement.Focusable="False" Height="Auto" Style="{StaticResource ColorPickerSliderThumb}" VerticalAlignment="Top" Width="Auto" VerticalContentAlignment="Top"/>
+                                </Track.Thumb>
+                            </Track>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+
+</ResourceDictionary>
\ No newline at end of file
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchNumericTextBox.cs b/Software/Visual_Studio/Tango.Touch/Controls/TouchNumericTextBox.cs
index 08edc4c6a..18fb0726f 100644
--- a/Software/Visual_Studio/Tango.Touch/Controls/TouchNumericTextBox.cs
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchNumericTextBox.cs
@@ -91,7 +91,7 @@ namespace Tango.Touch.Controls
             set { SetValue(MaximumProperty, value); }
         }
         public static readonly DependencyProperty MaximumProperty =
-            DependencyProperty.Register("Maximum", typeof(double), typeof(TouchNumericTextBox), new PropertyMetadata(100.0));
+            DependencyProperty.Register("Maximum", typeof(double), typeof(TouchNumericTextBox), new PropertyMetadata(null));
 
         public double JoggingFactor
         {
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchNumericUpDownConrol.cs b/Software/Visual_Studio/Tango.Touch/Controls/TouchNumericUpDownConrol.cs
new file mode 100644
index 000000000..a2a7a1c05
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchNumericUpDownConrol.cs
@@ -0,0 +1,164 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Text.RegularExpressions;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
+using System.Windows.Data;
+using Tango.Core.Commands;
+using Tango.Core.EventArguments;
+using Tango.Core.ExtensionMethods;
+
+
+namespace Tango.Touch.Controls
+{
+    [TemplatePart(Name = TouchNumericUpDownConrol.Number_PART, Type = typeof(TouchNumericTextBox))]
+    public class TouchNumericUpDownConrol: ContentControl
+    {
+        public const string Number_PART = "Number_PART";
+        private TouchNumericTextBox _numericValue;
+       
+        #region Properties
+
+        public double Value
+        {
+            get { return (double)GetValue(ValueProperty); }
+            set { SetValue(ValueProperty, value); IncrementCommand.RaiseCanExecuteChanged(); DecrementCommand.RaiseCanExecuteChanged(); }
+        }
+        /// <summary>
+        /// The value property of slider
+        /// </summary>
+        public static readonly DependencyProperty ValueProperty =
+            DependencyProperty.Register("Value", typeof(double), typeof(TouchNumericUpDownConrol), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnValueChanged)));
+
+        public double MinValue
+        {
+            get { return (double)GetValue(MinValueProperty); }
+            set { SetValue(MinValueProperty, value); }
+        }
+
+        /// <summary>
+        /// The slider  minimum value property
+        /// </summary>
+        public static readonly DependencyProperty MinValueProperty =
+            DependencyProperty.Register("MinValue", typeof(double), typeof(TouchNumericUpDownConrol), new PropertyMetadata(0.0));
+
+
+        public double MaxValue
+        {
+            get { return (double)GetValue(MaxValueProperty); }
+            set { SetValue(MaxValueProperty, value); }
+        }
+
+        /// <summary>
+        /// The slider maximum value property
+        /// </summary>
+        public static readonly DependencyProperty MaxValueProperty =
+            DependencyProperty.Register("MaxValue", typeof(double), typeof(TouchNumericUpDownConrol), new PropertyMetadata(100.0));
+
+        #endregion
+
+        #region Commands
+
+        public RelayCommand IncrementCommand
+        {
+            get { return (RelayCommand)GetValue(IncrementCommandProperty); }
+            private set { SetValue(IncrementCommandProperty, value); }
+        }
+        public static DependencyProperty IncrementCommandProperty =
+            DependencyProperty.Register("IncrementCommand", typeof(RelayCommand), typeof(TouchNumericUpDownConrol), new PropertyMetadata(null));
+       
+        public RelayCommand DecrementCommand
+        {
+            get { return (RelayCommand)GetValue(DecrementCommandProperty); }
+            private set { SetValue(DecrementCommandProperty, value); }
+        }
+        public static DependencyProperty DecrementCommandProperty = DependencyProperty.Register("DecrementCommand", typeof(RelayCommand), typeof(TouchNumericUpDownConrol), new PropertyMetadata(null));
+        
+        
+        #endregion
+
+        static TouchNumericUpDownConrol()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(TouchNumericUpDownConrol), new FrameworkPropertyMetadata(typeof(TouchNumericUpDownConrol)));
+        }
+
+        public TouchNumericUpDownConrol() : base()
+        {
+            IncrementCommand = new RelayCommand(()=> 
+            {
+                Value += 1;
+            } , (x)=> { return (Value + 1) <= MaxValue; });
+            DecrementCommand = new RelayCommand(() => {
+                Value -= 1;
+            }, (x) => { return (Value - 1) >= MinValue; });
+            
+        }
+
+
+        #region Base Class Overrides
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+            if (_numericValue != null)
+            {
+                _numericValue.ValueChanged -= OnNumberChanged;
+
+            }
+            _numericValue = (TouchNumericTextBox)GetTemplateChild(Number_PART);
+            if (_numericValue != null)
+            {
+               // _numericValue.Value = Value;
+                _numericValue.ValueChanged += OnNumberChanged;
+            }
+        }
+
+        #endregion
+
+        #region Methods
+
+       
+        private void OnNumberChanged(object sender, DoubleValueChangedEventArgs e)
+        {
+            Value = _numericValue.Value;
+        }
+        
+        private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            TouchNumericUpDownConrol colorPickerNumericUpDown = (TouchNumericUpDownConrol)d;
+            if (colorPickerNumericUpDown != null)
+                colorPickerNumericUpDown.OnValueNumberChanged((double?)e.OldValue, (double?)e.NewValue);
+
+        }
+
+        private void OnValueNumberChanged(double? oldValue, double? newValue)
+        {
+            RoutedPropertyChangedEventArgs<double?> args = new RoutedPropertyChangedEventArgs<double?>(oldValue, newValue);
+            args.RoutedEvent = TouchNumericUpDownConrol.ColorNumberChangedEvent;
+            RaiseEvent(args);
+        }
+        
+        #endregion
+
+        #region Events
+
+        public static readonly RoutedEvent ColorNumberChangedEvent = EventManager.RegisterRoutedEvent("ColorNumberChanged", RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<double?>), typeof(TouchNumericUpDownConrol));
+        public event RoutedPropertyChangedEventHandler<double?> ColorNumberChanged
+        {
+            add
+            {
+                AddHandler(ColorNumberChangedEvent, value);
+            }
+            remove
+            {
+                RemoveHandler(ColorNumberChangedEvent, value);
+            }
+        }
+        
+        #endregion
+    }
+}
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchNumericUpDownConrol.xaml b/Software/Visual_Studio/Tango.Touch/Controls/TouchNumericUpDownConrol.xaml
new file mode 100644
index 000000000..7df3900f2
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchNumericUpDownConrol.xaml
@@ -0,0 +1,106 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="clr-namespace:Tango.Touch.Controls"
+                    xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
+                    xmlns:keyboard="clr-namespace:Tango.Touch.Keyboard"
+                    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
+                    >
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../Resources/Colors.xaml" />
+        <ResourceDictionary Source="../Resources/Fonts.xaml" />
+        <ResourceDictionary Source="../Styles/TouchButton.xaml" />
+        <ResourceDictionary Source="../Styles/TouchIconButton.xaml" />
+
+        <ResourceDictionary>
+            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
+            <converters:NullObjectToBooleanConverter x:Key="NullObjectToBooleanConverter" />
+        </ResourceDictionary>
+    </ResourceDictionary.MergedDictionaries>
+    
+    <SolidColorBrush x:Key="TransparentBrush" Color="Transparent" />
+
+    <Style TargetType="local:TouchNumericUpDownConrol">
+        <Setter Property="Background" Value="{StaticResource TangoNotificationBarMaskBrush}"/>
+        <Setter Property="Height" Value="32"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:TouchNumericUpDownConrol">
+                    <StackPanel Orientation="Horizontal">
+                        <StackPanel.Resources>
+
+                            <Style x:Key="emptyButton" TargetType="RepeatButton" >
+                                <Setter Property="Background" Value="Transparent" />
+                                <Setter Property="Focusable" Value="False"></Setter>
+                                <Setter Property="Foreground" Value="{StaticResource TangoMidAccentBrush}" />
+                                <Setter Property="Stylus.IsPressAndHoldEnabled" Value="False"/>
+                                <Setter Property="Template">
+                                    <Setter.Value>
+                                        <ControlTemplate TargetType="RepeatButton">
+                                            <Border Margin="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
+                                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
+                                            </Border>
+                                        </ControlTemplate>
+                                    </Setter.Value>
+                                </Setter>
+                                <Style.Triggers>
+                                    <Trigger Property="RepeatButton.IsPressed" Value="True">
+                                        <Setter Property="Background" Value="Transparent" />
+                                        <Setter Property="Foreground" Value="{StaticResource TangoKeyboardKeyLightBrush}" />
+                                    </Trigger>
+                                    <EventTrigger RoutedEvent="RepeatButton.TouchDown">
+                                        <EventTrigger.Actions>
+                                            <BeginStoryboard>
+                                                <Storyboard>
+                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background">
+                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"></DiscreteObjectKeyFrame>
+                                                    </ObjectAnimationUsingKeyFrames>
+                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground">
+                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TangoKeyboardKeyLightTextBrush}"></DiscreteObjectKeyFrame>
+                                                    </ObjectAnimationUsingKeyFrames>
+                                                </Storyboard>
+                                            </BeginStoryboard>
+                                        </EventTrigger.Actions>
+                                    </EventTrigger>
+                                    <EventTrigger RoutedEvent="RepeatButton.TouchLeave">
+                                        <EventTrigger.Actions>
+                                            <BeginStoryboard>
+                                                <Storyboard>
+                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background">
+                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"></DiscreteObjectKeyFrame>
+                                                    </ObjectAnimationUsingKeyFrames>
+                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground">
+                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TangoKeyboardKeyDarkTextBrush}"></DiscreteObjectKeyFrame>
+                                                    </ObjectAnimationUsingKeyFrames>
+                                                </Storyboard>
+                                            </BeginStoryboard>
+                                        </EventTrigger.Actions>
+                                    </EventTrigger>
+                                </Style.Triggers>
+                            </Style>
+                        </StackPanel.Resources>
+                        <Border Background="Transparent" BorderBrush="{StaticResource TangoGrayBrush}"  BorderThickness="0.8" CornerRadius="2" Width="54">
+
+                            <local:TouchNumericTextBox x:Name="Number_PART" Margin="0 4 0 0" FontSize="20"  HorizontalContentAlignment="Center" VerticalAlignment="Center" BorderBrush="{TemplateBinding BorderBrush}" VerticalContentAlignment="Center"
+                                                Value="{Binding Value,RelativeSource={RelativeSource AncestorType=local:TouchNumericUpDownConrol}}"  Minimum="{Binding MinValue,RelativeSource={RelativeSource AncestorType=local:TouchNumericUpDownConrol}}" Maximum="{Binding MaxValue,RelativeSource={RelativeSource AncestorType=local:TouchNumericUpDownConrol}}"/>
+
+                        </Border>
+                        <Border  Margin="10 0 0 0"   BorderBrush="{StaticResource TangoGrayBrush}"  BorderThickness="0.8" Width="80">
+                            <StackPanel Orientation="Horizontal">
+                                <RepeatButton Background="Transparent"  Margin="8 0 8 0" Padding="2" Style="{StaticResource emptyButton}" 
+                                              Command="{Binding Path=DecrementCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:TouchNumericUpDownConrol}, Mode=TwoWay}">
+                                    <local:TouchIcon Icon="Minus" Width="16" Height="3"/>
+                                </RepeatButton>
+                                <Rectangle Margin="1 0 0 0" Width="0.8" Fill="{StaticResource TangoGrayBrush}"></Rectangle>
+                                <RepeatButton Background="Transparent"  Margin="8 0 0 0" Padding="4" Style="{StaticResource emptyButton}" 
+                                              Command="{Binding Path=IncrementCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:TouchNumericUpDownConrol}, Mode=TwoWay}">
+                                    <local:TouchIcon Icon="Plus" Width="16"/>
+                                </RepeatButton>
+                            </StackPanel>
+                        </Border>
+                    </StackPanel>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>
\ No newline at end of file
diff --git a/Software/Visual_Studio/Tango.Touch/Controls/TouchSlider.xaml b/Software/Visual_Studio/Tango.Touch/Controls/TouchSlider.xaml
index 77df523f5..e5e6fd17a 100644
--- a/Software/Visual_Studio/Tango.Touch/Controls/TouchSlider.xaml
+++ b/Software/Visual_Studio/Tango.Touch/Controls/TouchSlider.xaml
@@ -100,6 +100,37 @@
         </ControlTemplate.Triggers>
     </ControlTemplate>
 
+    <ControlTemplate x:Key="SliderHorizontalInvisibleTrack" TargetType="{x:Type local:TouchSlider}">
+        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
+            <Grid>
+                <Border x:Name="TrackBackground" Height="0" Background="{StaticResource TangoGrayBrush}" Grid.Row="1" VerticalAlignment="Center">
+                    <Canvas Margin="-15 0 0 0">
+                        <Rectangle x:Name="PART_SelectionRange" Fill="{StaticResource TangoPrimaryAccentBrush}" Height="{Binding RelativeSource={RelativeSource AncestorType=Canvas},Path=ActualHeight}" Visibility="Hidden"/>
+                    </Canvas>
+                </Border>
+                <Track x:Name="PART_Track" Grid.Row="1">
+                    <Track.DecreaseRepeatButton>
+                        <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/>
+                    </Track.DecreaseRepeatButton>
+                    <Track.IncreaseRepeatButton>
+                        <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/>
+                    </Track.IncreaseRepeatButton>
+                    <Track.Thumb>
+                        <Thumb x:Name="Thumb" Focusable="False" OverridesDefaultStyle="True" Template="{Binding RelativeSource={RelativeSource AncestorType=local:TouchSlider},Path=ThumbTemplate,TargetNullValue={StaticResource SliderThumbHorizontalDefault}}"/>
+                    </Track.Thumb>
+                </Track>
+            </Grid>
+        </Border>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsSelectionRangeEnabled" Value="true">
+                <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
+            </Trigger>
+            <Trigger Property="IsEnabled" Value="false">
+                <Setter Property="Fill" TargetName="PART_SelectionRange" Value="{StaticResource TangoGrayBrush}"/>
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
     <!--Vertical Thumb-->
 
     <ControlTemplate x:Key="SliderThumbVerticalDefault" TargetType="{x:Type Thumb}">
@@ -197,4 +228,18 @@
         </Style.Triggers>
     </Style>
 
+    <Style x:Key="TouchSliderHInvisibleTrack" TargetType="{x:Type local:TouchSlider}" BasedOn="{StaticResource {x:Type local:TouchSlider}}">
+        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="BorderBrush" Value="Transparent"/>
+        <Setter Property="local:LightTouchScrollViewer.PreventScroll" Value="True"></Setter>
+        <Setter Property="IsSelectionRangeEnabled" Value="True"></Setter>
+        <Setter Property="SelectionStart" Value="{Binding RelativeSource={RelativeSource Self},Path=Minimum}"></Setter>
+        <Setter Property="SelectionEnd" Value="{Binding RelativeSource={RelativeSource Self},Path=Value}"></Setter>
+        <Setter Property="Height" Value="40"></Setter>
+        <Setter Property="Foreground" Value="{StaticResource TangoPrimaryAccentBrush}"/>
+        <Setter Property="Template" Value="{StaticResource SliderHorizontalInvisibleTrack}"/>
+    </Style>
+
+
 </ResourceDictionary>
\ No newline at end of file