Added my Controls Library !

Implemented Tech VU Item.

10 files changed, 655 insertions, 0 deletions

diff --git a/Software/Visual_Studio/Tango.Visuals/Knob/Knob.xaml b/Software/Visual_Studio/Tango.Visuals/Knob/Knob.xaml
new file mode 100644
index 000000000..9c70ad3b9
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Visuals/Knob/Knob.xaml
@@ -0,0 +1,58 @@
+<UserControl x:Class="Tango.Visuals.Knob"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:Tango.Visuals"
+             mc:Ignorable="d" RenderOptions.BitmapScalingMode="Fant" Height="{Binding RelativeSource={RelativeSource Self},Path=ActualWidth}">
+    <Grid x:Name="mainGrid">
+        <Grid>
+            <Grid.Background>
+                <RadialGradientBrush x:Name="imgGlow"
+		Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.40" RadiusY="0.40"  Opacity="0"
+		SpreadMethod="Pad" ColorInterpolationMode="SRgbLinearInterpolation" >
+                    <GradientStop Color="Transparent" Offset="1" />
+                    <GradientStop Color="#FFFFFFFF" Offset="0.06" />
+                </RadialGradientBrush>
+            </Grid.Background>
+        </Grid>
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="28*"/>
+                <RowDefinition Height="133*"/>
+                <RowDefinition Height="28*"/>
+            </Grid.RowDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="15*"/>
+                <ColumnDefinition Width="69*"/>
+                <ColumnDefinition Width="15*"/>
+            </Grid.ColumnDefinitions> 
+ 
+            <Grid x:Name="ellipseGrid" Grid.Column="1" Grid.Row="1" RenderTransformOrigin="0.5 0.5">
+                <Image RenderOptions.BitmapScalingMode="Fant" x:Name="img" Margin="0 0 0 0" Grid.Column="1" Grid.Row="1" Stretch="Fill">
+                </Image> 
+                <Ellipse x:Name="maskEllipse" Margin="2">
+                    <Ellipse.Fill>
+                        <RadialGradientBrush
+		Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.55" RadiusY="0.55"  Opacity="0"
+		SpreadMethod="Pad" ColorInterpolationMode="ScRgbLinearInterpolation" >
+                            <GradientStop Color="Gainsboro" Offset="1" />
+                            <GradientStop Color="Transparent" Offset="0.6" />
+                        </RadialGradientBrush>
+                    </Ellipse.Fill>
+                </Ellipse>
+                <Ellipse x:Name="glowEllipse" StrokeThickness="1" Margin="2 2 2 2" Opacity="0">
+                    <!--<Ellipse.Effect>
+                        <DropShadowEffect x:Name="glowEffect" Color="Orange" ShadowDepth="0" BlurRadius="20" Opacity="0"/>
+                    </Ellipse.Effect>-->
+
+                </Ellipse>
+                <Grid.RenderTransform>
+                    <RotateTransform Angle="-140"></RotateTransform>
+                </Grid.RenderTransform>
+            </Grid>
+            <Thumb x:Name="moveThumb" Opacity="0" Grid.Column="1" Grid.Row="1"></Thumb>
+
+        </Grid>
+    </Grid>
+</UserControl>
diff --git a/Software/Visual_Studio/Tango.Visuals/Knob/Knob.xaml.cs b/Software/Visual_Studio/Tango.Visuals/Knob/Knob.xaml.cs
new file mode 100644
index 000000000..dab75f2a4
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Visuals/Knob/Knob.xaml.cs
@@ -0,0 +1,562 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Reflection;
+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.Effects;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+using Tango.Visuals;
+
+namespace Tango.Visuals
+{
+    /// <summary>
+    /// <para><img class="classImage" src="../Media/VolumeKnob.png" /></para>
+    /// Represents a knob control.
+    /// </summary>
+    public partial class Knob : UserControl
+    {
+        private List<Line> lines;
+        private Line markLine;
+        private Brush oldTicksHighlightBrush;
+        private double initialAngle;
+        private bool _showBigMarkers;
+        private bool _showSmallMarkers;
+        private double _initialValue;
+
+        #region Events
+
+        /// <summary>
+        /// Occurs when the knob's value has changed.
+        /// </summary>
+        public event EventHandler<DoubleValueChangedEventArgs> ValueChanged;
+
+        #endregion
+
+        #region Private Methods
+
+        private void SetValueFromMouse(double angle)
+        {
+            if (angle < -140)
+            {
+                angle = -140;
+            }
+            if (angle > 140)
+            {
+                angle = 140;
+            }
+
+            double value = angle + 140;
+            value = ((value) * 100) / 280;
+            value = (value * (Maximum - Minimum)) / 100;
+            value += Minimum;
+
+            if (value < Minimum)
+            {
+                Value = Minimum;
+            }
+            else if (value > Maximum)
+            {
+                Value = Maximum;
+            }
+            else
+            {
+                Value = value;
+            }
+        }
+
+        private void SetAngle(double angle)
+        {
+            if (ellipseGrid != null)
+            {
+                ellipseGrid.RenderTransformOrigin = new Point(0.5, 0.5);
+                ellipseGrid.RenderTransform = new RotateTransform(angle);
+                ellipseGrid.InvalidateMeasure();
+            }
+        }
+
+        private void LightMarkers()
+        {
+            if (ellipseGrid != null)
+            {
+                RotateTransform rotate = ellipseGrid.RenderTransform as RotateTransform;
+                double currentAngle = rotate.Angle;
+
+                if (lines != null)
+                {
+                    foreach (Line m in lines)
+                    {
+                        RotateTransform t = m.RenderTransform as RotateTransform;
+                        if (currentAngle >= t.Angle)
+                        {
+                            m.Stroke = TicksHighlightBrush;
+                        }
+                        else
+                        {
+                            m.Stroke = TicksBrush;
+                        }
+                    }
+                }
+            }
+        }
+
+        private void RenderMarkers()
+        {
+            lines = new List<Line>();
+
+            double angleChange = 280 / 20;
+            double markChange = 5;
+            double counter = 0;
+            int marksCounter = 0;
+
+            mainGrid.Children.OfType<Line>().ToList().ForEach(x => mainGrid.Children.Remove(x));
+            ellipseGrid.Children.OfType<Line>().ToList().ForEach(x => mainGrid.Children.Remove(x));
+
+            if (_showSmallMarkers)
+            {
+                for (int i = 0; i < 21; i++)
+                {
+                    Line line = new Line();
+                    line.StrokeThickness = TicksWidth;
+                    line.Stroke = TicksBrush;
+                    line.X1 = this.ActualWidth / 2;
+                    if ((marksCounter == markChange || marksCounter == 0) && _showBigMarkers)
+                    {
+                        line.Y1 = 0;
+                        marksCounter = 0;
+                    }
+                    else
+                    {
+                        line.Y1 = 3;
+                    }
+                    line.X2 = this.ActualWidth / 2;
+                    line.Y2 = TicksHeight;
+                    mainGrid.Children.Add(line);
+                    line.RenderTransform = new RotateTransform(counter - 140, this.ActualWidth / 2, this.ActualHeight / 2);
+                    counter += angleChange;
+                    marksCounter++;
+                    lines.Add(line);
+                }
+            }
+
+            ellipseGrid.Children.Remove(markLine);
+            markLine = new Line();
+            markLine.StrokeThickness = 2;
+            markLine.Stroke = TicksHighlightBrush;
+            markLine.X1 = ellipseGrid.ActualWidth / 2;
+            markLine.Y1 = 5;
+            markLine.X2 = markLine.X1;
+            markLine.Y2 = (ellipseGrid.ActualWidth / 2) * 0.8;
+            ellipseGrid.Children.Add(markLine);
+        }
+
+        private static BitmapSource GetImageFromApplicationResource(String resourcePath)
+        {
+            String callingAssembly = Assembly.GetCallingAssembly().GetName().Name;
+            Uri uri = new Uri("/" + callingAssembly + ";component/" + resourcePath, UriKind.Relative);
+            System.Windows.Resources.StreamResourceInfo info = Application.GetResourceStream(uri);
+
+            var bitmapImage = new BitmapImage();
+            bitmapImage.BeginInit();
+            bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
+            bitmapImage.StreamSource = info.Stream;
+            bitmapImage.EndInit();
+            return bitmapImage;
+        }
+
+        #endregion
+
+        #region Virtual Methods
+
+        /// <summary>
+        /// Called when the value changed.
+        /// </summary>
+        protected virtual void OnValueChanged()
+        {
+            try
+            {
+                if (Value < Minimum)
+                {
+                    Value = Minimum;
+                }
+
+                if (Value > Maximum)
+                {
+                    Value = Maximum;
+                }
+
+                double angle = ((Value - Minimum) * 100) / (Maximum - Minimum);
+                angle = ((angle * 280) / 100) - 140;
+
+                SetAngle(angle);
+                LightMarkers();
+            }
+            catch { }
+
+            if (ValueChanged != null) ValueChanged(this, new DoubleValueChangedEventArgs(Value));
+        }
+
+        /// <summary>
+        /// Invoked before the value has changed.
+        /// </summary>
+        /// <param name="value">The value.</param>
+        /// <returns></returns>
+        protected virtual object OnCoerceValue(double value)
+        {
+            var v = SnapToValues ? Math.Round(value, SnapPercision) : value;
+            return v;
+        }
+
+        /// <summary>
+        /// Draws the knob.
+        /// </summary>
+        protected virtual void OnDrawKnob()
+        {
+            try
+            {
+                RenderMarkers();
+                LightMarkers();
+
+                if (KnobType == KnobType.MetroDark)
+                {
+                    img.Source = GetImageFromApplicationResource("Knob/volumeKnobMetroDark.png");
+                }
+                else if (KnobType == KnobType.MetroLight)
+                {
+                    img.Source = GetImageFromApplicationResource("Knob/volumeKnobMetroLight.png");
+                }
+                else if (KnobType == KnobType.Dark)
+                {
+                    img.Source = GetImageFromApplicationResource("Knob/volumeKnobDark.png");
+                }
+                else if (KnobType == KnobType.Light)
+                {
+                    img.Source = GetImageFromApplicationResource("Knob/volumeKnobLight.png");
+                }
+                else if (KnobType == KnobType.Complex)
+                {
+                    img.Source = GetImageFromApplicationResource("Knob/volumeKnobComplex.png");
+                }
+
+
+            }
+            catch { }
+        }
+
+        #endregion
+
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the ticks highlight brush.
+        /// </summary>
+        public Brush TicksHighlightBrush
+        {
+            get { return (Brush)GetValue(TicksHighlightBrushProperty); }
+            set { SetValue(TicksHighlightBrushProperty, value); }
+        }
+        public static readonly DependencyProperty TicksHighlightBrushProperty =
+            DependencyProperty.Register("TicksHighlightBrush", typeof(Brush), typeof(Knob), new PropertyMetadata(Brushes.Red, OnPropertiesChanged));
+
+        /// <summary>
+        /// Gets or sets the ticks brush.
+        /// </summary>
+        public Brush TicksBrush
+        {
+            get { return (Brush)GetValue(TicksBrushProperty); }
+            set { SetValue(TicksBrushProperty, value); }
+        }
+        public static readonly DependencyProperty TicksBrushProperty =
+            DependencyProperty.Register("TicksBrush", typeof(Brush), typeof(Knob), new PropertyMetadata(Brushes.DimGray, OnPropertiesChanged));
+
+        /// <summary>
+        /// Gets or sets the type of the knob.
+        /// </summary>
+        public KnobType KnobType
+        {
+            get { return (KnobType)GetValue(KnobTypeProperty); }
+            set { SetValue(KnobTypeProperty, value); }
+        }
+        public static readonly DependencyProperty KnobTypeProperty =
+            DependencyProperty.Register("KnobType", typeof(KnobType), typeof(Knob), new PropertyMetadata(KnobType.Dark, OnPropertiesChanged));
+
+        /// <summary>
+        /// Gets or sets amount of change when using keyboard arrows.
+        /// </summary>
+        public double Change
+        {
+            get { return (double)GetValue(ChangeProperty); }
+            set { SetValue(ChangeProperty, value); }
+        }
+        public static readonly DependencyProperty ChangeProperty =
+            DependencyProperty.Register("Change", typeof(double), typeof(Knob), new PropertyMetadata(0.01));
+
+        /// <summary>
+        /// Gets or sets the width of the ticks.
+        /// </summary>
+        public double TicksWidth
+        {
+            get { return (double)GetValue(TicksWidthProperty); }
+            set { SetValue(TicksWidthProperty, value); }
+        }
+        public static readonly DependencyProperty TicksWidthProperty =
+            DependencyProperty.Register("TicksWidth", typeof(double), typeof(Knob), new PropertyMetadata(3.0, OnPropertiesChanged));
+
+        /// <summary>
+        /// Gets or sets the height of the ticks.
+        /// </summary>
+        public double TicksHeight
+        {
+            get { return (double)GetValue(TicksHeightProperty); }
+            set { SetValue(TicksHeightProperty, value); }
+        }
+        public static readonly DependencyProperty TicksHeightProperty =
+            DependencyProperty.Register("TicksHeight", typeof(double), typeof(Knob), new PropertyMetadata(10.0, OnPropertiesChanged));
+
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        public double Value
+        {
+            get { return (double)GetValue(ValueProperty); }
+            set { SetValue(ValueProperty, SnapToValues ? Math.Round(value, SnapPercision) : value); }
+        }
+        public static readonly DependencyProperty ValueProperty =
+            DependencyProperty.Register("Value", typeof(double), typeof(Knob), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, (d, e) => (d as Knob).OnValueChanged(), (d, value) => (d as Knob).OnCoerceValue((double)value)));
+
+        /// <summary>
+        /// Gets or sets the minimum value.
+        /// </summary>
+        public double Minimum
+        {
+            get { return (double)GetValue(MinimumProperty); }
+            set { SetValue(MinimumProperty, value); }
+        }
+        public static readonly DependencyProperty MinimumProperty =
+            DependencyProperty.Register("Minimum", typeof(double), typeof(Knob), new PropertyMetadata(0.0, OnPropertiesChanged));
+
+        public bool SnapToValues
+        {
+            get { return (bool)GetValue(SnapToValuesProperty); }
+            set { SetValue(SnapToValuesProperty, value); }
+        }
+        public static readonly DependencyProperty SnapToValuesProperty =
+            DependencyProperty.Register("SnapToValues", typeof(bool), typeof(Knob), new PropertyMetadata(false));
+
+        public int SnapPercision
+        {
+            get { return (int)GetValue(SnapPercisionProperty); }
+            set { SetValue(SnapPercisionProperty, value); }
+        }
+        public static readonly DependencyProperty SnapPercisionProperty =
+            DependencyProperty.Register("SnapPercision", typeof(int), typeof(Knob), new PropertyMetadata(1));
+
+        /// <summary>
+        /// Gets or sets the maximum value.
+        /// </summary>
+        public double Maximum
+        {
+            get { return (double)GetValue(MaximumProperty); }
+            set { SetValue(MaximumProperty, value); }
+        }
+        public static readonly DependencyProperty MaximumProperty =
+            DependencyProperty.Register("Maximum", typeof(double), typeof(Knob), new PropertyMetadata(1.0, OnPropertiesChanged));
+        private static void OnPropertiesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            (d as Knob).OnDrawKnob();
+            (d as Knob).OnValueChanged();
+        }
+
+        #endregion
+
+        #region Constructors
+
+        public Knob()
+        {
+            _showSmallMarkers = true;
+            InitializeComponent();
+            this.Loaded += Knob_Loaded;
+            moveThumb.AddHandler(Thumb.MouseEnterEvent, new MouseEventHandler(ellipseGrid_MouseEnter), true);
+            moveThumb.AddHandler(Thumb.MouseLeaveEvent, new MouseEventHandler(ellipseGrid_MouseLeave), true);
+            this.PreviewKeyDown += Knob_PreviewKeyDown;
+            this.PreviewMouseDown += Knob_PreviewMouseDown;
+            this.Focusable = true;
+
+            KnobType = KnobType.MetroLight;
+
+            this.IsEnabledChanged += Knob_IsEnabledChanged;
+
+            moveThumb.DragStarted += moveThumb_DragStarted;
+            moveThumb.DragDelta += moveThumb_DragDelta;
+
+            this.SizeChanged += VolumeKnob_SizeChanged;
+        }
+
+        #endregion
+
+        #region Event Handlers
+
+        /// <summary>
+        /// Handles the SizeChanged event of the VolumeKnob control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="SizeChangedEventArgs"/> instance containing the event data.</param>
+        private void VolumeKnob_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            OnDrawKnob();
+        }
+
+        /// <summary>
+        /// Handles the DragDelta event of the moveThumb control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="DragDeltaEventArgs"/> instance containing the event data.</param>
+        private void moveThumb_DragDelta(object sender, DragDeltaEventArgs e)
+        {
+            double angle = 0;
+
+            angle = e.VerticalChange * -1;
+
+            angle = this.initialAngle + angle;
+
+            this.SetValueFromMouse(angle);
+        }
+
+        /// <summary>
+        /// Handles the DragStarted event of the moveThumb control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="DragStartedEventArgs"/> instance containing the event data.</param>
+        private void moveThumb_DragStarted(object sender, DragStartedEventArgs e)
+        {
+            Point startPoint = Mouse.GetPosition(ellipseGrid);
+
+            RotateTransform t = ellipseGrid.RenderTransform as RotateTransform;
+            if (t != null)
+            {
+                this.initialAngle = t.Angle;
+            }
+        }
+
+        /// <summary>
+        /// Handles the IsEnabledChanged event of the Knob control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
+        private void Knob_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
+        {
+            if (e.NewValue == e.OldValue) return;
+
+            if (IsEnabled)
+            {
+                TicksHighlightBrush = oldTicksHighlightBrush;
+                RenderMarkers();
+            }
+            else
+            {
+                oldTicksHighlightBrush = TicksHighlightBrush;
+                TicksHighlightBrush = Brushes.Gray;
+                RenderMarkers();
+            }
+        }
+
+        /// <summary>
+        /// Handles the PreviewMouseDown event of the Knob control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="MouseButtonEventArgs"/> instance containing the event data.</param>
+        private void Knob_PreviewMouseDown(object sender, MouseButtonEventArgs e)
+        {
+            this.FocusVisualStyle = null;
+            this.Focusable = true;
+            this.Focus();
+        }
+
+        /// <summary>
+        /// Handles the PreviewKeyDown event of the Knob control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="KeyEventArgs"/> instance containing the event data.</param>
+        private void Knob_PreviewKeyDown(object sender, KeyEventArgs e)
+        {
+            if (e.Key == Key.Up && Value < Maximum)
+            {
+                Value += Change;
+            }
+            else if (e.Key == Key.Down && Value > Minimum)
+            {
+                Value -= Change;
+            }
+
+            this.Focusable = true;
+            this.Focus();
+            e.Handled = true;
+        }
+
+        /// <summary>
+        /// Handles the Loaded event of the Knob control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="RoutedEventArgs"/> instance containing the event data.</param>
+        private void Knob_Loaded(object sender, RoutedEventArgs e)
+        {
+            OnDrawKnob();
+        }
+
+        /// <summary>
+        /// Handles the MouseLeave event of the ellipseGrid control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        private void ellipseGrid_MouseLeave(object sender, MouseEventArgs e)
+        {
+            DoubleAnimation maskAni = new DoubleAnimation(0, new Duration(TimeSpan.FromMilliseconds(200)));
+
+            maskEllipse.Fill.BeginAnimation(RadialGradientBrush.OpacityProperty, maskAni);
+
+            DoubleAnimation glowAni = new DoubleAnimation(0, new Duration(TimeSpan.FromMilliseconds(200)));
+            glowEllipse.BeginAnimation(OpacityProperty, glowAni);
+
+            //DoubleAnimation efxAni = new DoubleAnimation(0, new Duration(TimeSpan.FromMilliseconds(200)));
+            //glowEffect.BeginAnimation(OpacityProperty, efxAni);
+
+            DoubleAnimation glow = new DoubleAnimation(0, new Duration(TimeSpan.FromMilliseconds(200)));
+            imgGlow.BeginAnimation(RadialGradientBrush.OpacityProperty, glow);
+        }
+
+        /// <summary>
+        /// Handles the MouseEnter event of the ellipseGrid control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        private void ellipseGrid_MouseEnter(object sender, MouseEventArgs e)
+        {
+            DoubleAnimation maskAni = new DoubleAnimation(0.5, new Duration(TimeSpan.FromMilliseconds(200)));
+
+            maskEllipse.Fill.BeginAnimation(RadialGradientBrush.OpacityProperty, maskAni);
+
+            DoubleAnimation glowAni = new DoubleAnimation(1, new Duration(TimeSpan.FromMilliseconds(200)));
+            glowEllipse.BeginAnimation(OpacityProperty, glowAni);
+
+            //DoubleAnimation efxAni = new DoubleAnimation(1, new Duration(TimeSpan.FromMilliseconds(200)));
+            //glowEffect.BeginAnimation(OpacityProperty, efxAni);
+
+            DoubleAnimation glow = new DoubleAnimation(0.5, new Duration(TimeSpan.FromMilliseconds(200)));
+            imgGlow.BeginAnimation(RadialGradientBrush.OpacityProperty, glow);
+
+        }
+
+        #endregion
+    }
+}
diff --git a/Software/Visual_Studio/Tango.Visuals/Knob/KnobType.cs b/Software/Visual_Studio/Tango.Visuals/Knob/KnobType.cs
new file mode 100644
index 000000000..42ad47aee
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Visuals/Knob/KnobType.cs
@@ -0,0 +1,35 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Tango.Visuals
+{
+    /// <summary>
+    /// Represents enumeration of various <see cref="Knob"/> styles.
+    /// </summary>
+    public enum KnobType
+    {
+        /// <summary>
+        /// Dark knob theme.
+        /// </summary>
+        Dark,
+        /// <summary>
+        /// Light knob theme.
+        /// </summary>
+        Light,
+        /// <summary>
+        /// Light metro knob theme.
+        /// </summary>
+        MetroLight,
+        /// <summary>
+        /// Dark metro knob theme.
+        /// </summary>
+        MetroDark,
+        /// <summary>
+        /// Complex knob theme.
+        /// </summary>
+        Complex
+    }
+}
diff --git a/Software/Visual_Studio/Tango.Visuals/Knob/completeKnobBright.png b/Software/Visual_Studio/Tango.Visuals/Knob/completeKnobBright.png
new file mode 100644
index 000000000..d8340deb2
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Visuals/Knob/completeKnobBright.png
diff --git a/Software/Visual_Studio/Tango.Visuals/Knob/completeKnobDark.png b/Software/Visual_Studio/Tango.Visuals/Knob/completeKnobDark.png
new file mode 100644
index 000000000..213fffe23
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Visuals/Knob/completeKnobDark.png
diff --git a/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobComplex.png b/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobComplex.png
new file mode 100644
index 000000000..131f19191
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobComplex.png
diff --git a/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobDark.png b/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobDark.png
new file mode 100644
index 000000000..ec265344d
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobDark.png
diff --git a/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobLight.png b/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobLight.png
new file mode 100644
index 000000000..f9d51a128
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobLight.png
diff --git a/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobMetroDark.png b/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobMetroDark.png
new file mode 100644
index 000000000..4a2c665a8
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobMetroDark.png
diff --git a/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobMetroLight.png b/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobMetroLight.png
new file mode 100644
index 000000000..8dd498dfe
--- /dev/null
+++ b/Software/Visual_Studio/Tango.Visuals/Knob/volumeKnobMetroLight.png