ToggleButton.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace UI_Kit
{
    /// <summary>
    /// Follow steps 1a or 1b and then 2 to use this custom control in a XAML file.
    ///
    /// Step 1a) Using this custom control in a XAML file that exists in the current project.
    /// Add this XmlNamespace attribute to the root element of the markup file where it is
    /// to be used:
    ///
    ///     xmlns:MyNamespace="clr-namespace:UI_Kit"
    ///
    ///
    /// Step 1b) Using this custom control in a XAML file that exists in a different project.
    /// Add this XmlNamespace attribute to the root element of the markup file where it is
    /// to be used:
    ///
    ///     xmlns:MyNamespace="clr-namespace:UI_Kit;assembly=UI_Kit"
    ///
    /// You will also need to add a project reference from the project where the XAML file lives
    /// to this project and Rebuild to avoid compilation errors:
    ///
    ///     Right click on the target project in the Solution Explorer and
    ///     "Add Reference"->"Projects"->[Browse to and select this project]
    ///
    ///
    /// Step 2)
    /// Go ahead and use your control in the XAML file.
    ///
    ///     <MyNamespace:CodedToggle/>
    ///
    /// </summary>
    public class CodedToggle : ToggleButton
    {
        public CodedToggle()
        {
            this.IsChecked = false;
            this.Height = 47;
            this.Width = 94;
            // DefaultStyleKeyProperty.OverrideMetadata(typeof(CodedToggle), new FrameworkPropertyMetadata(typeof(CodedToggle)));
            ControlTemplate template = new ControlTemplate();
            FrameworkElementFactory grid = new FrameworkElementFactory(typeof(Grid)); grid.Name = "Container";
            FrameworkElementFactory active = new FrameworkElementFactory(typeof(Border)); active.Name = "Active";
            FrameworkElementFactory inactive = new FrameworkElementFactory(typeof(Border)); inactive.Name = "Inactive";
            FrameworkElementFactory button = new FrameworkElementFactory(typeof(Ellipse)); button.Name="ToggleButton";

            inactive.SetBinding(Border.CornerRadiusProperty, new Binding("Height") { RelativeSource = new RelativeSource(RelativeSourceMode.TemplatedParent), Converter = new HalfRadius() });
            inactive.SetBinding(Border.WidthProperty, new Binding("Width") { RelativeSource = new RelativeSource(RelativeSourceMode.TemplatedParent) });
            inactive.SetBinding(Border.HeightProperty, new Binding("Height") { RelativeSource = new RelativeSource(RelativeSourceMode.TemplatedParent), Converter = new LessHeight() });
            inactive.SetValue(Border.BackgroundProperty, new SolidColorBrush(Color.FromArgb(255, 68, 68, 68)));
            inactive.SetValue(Border.HorizontalAlignmentProperty, HorizontalAlignment.Left);

            active.SetBinding(Border.CornerRadiusProperty, new Binding("Height") { RelativeSource = new RelativeSource(RelativeSourceMode.TemplatedParent), Converter = new HalfRadius() });
            active.SetValue(Border.WidthProperty, this.Height);
            active.SetBinding(Border.HeightProperty, new Binding("Height") { RelativeSource = new RelativeSource(RelativeSourceMode.TemplatedParent), Converter = new LessHeight() });
            active.SetBinding(Border.BackgroundProperty, new Binding("Background") { RelativeSource = new RelativeSource(RelativeSourceMode.TemplatedParent) });
            active.SetValue(Border.HorizontalAlignmentProperty, HorizontalAlignment.Left);

            button.SetBinding(Ellipse.WidthProperty, new Binding("Height") { RelativeSource = new RelativeSource(RelativeSourceMode.TemplatedParent) });
            button.SetBinding(Ellipse.HeightProperty, new Binding("Height") { RelativeSource = new RelativeSource(RelativeSourceMode.TemplatedParent) });
            button.SetValue(Ellipse.FillProperty, new SolidColorBrush(Colors.White));
            button.SetValue(Ellipse.StrokeProperty, null);
            button.SetValue(Ellipse.HorizontalAlignmentProperty, HorizontalAlignment.Left);
            button.AddHandler(Ellipse.MouseDownEvent, new MouseButtonEventHandler(Toggle));

            grid.AppendChild(inactive);
            grid.AppendChild(active);
            grid.AppendChild(button);

            template.VisualTree = grid;
            this.Template = template;
        }
        void Toggle(object sender, EventArgs e)
        {
            DependencyObject active = GetTemplateChild("Active");
            DependencyObject button = GetTemplateChild("ToggleButton");
            Storyboard sb = new Storyboard();

            ThicknessAnimation ta = new ThicknessAnimation();
            Storyboard.SetTargetProperty(ta, new PropertyPath("Margin"));
            Storyboard.SetTarget(ta, button);
            ta.Duration = TimeSpan.FromSeconds(0.2);


            DoubleAnimation da = new DoubleAnimation();
            Storyboard.SetTargetProperty(da, new PropertyPath("Width"));
            Storyboard.SetTarget(da, active);
            da.Duration = TimeSpan.FromSeconds(0.2);

            if ((bool)IsChecked)
            {
                ta.To = new Thickness(0);
                da.To = (double)button.GetValue(Ellipse.WidthProperty);
            }
            else
            {
                ta.To = new Thickness(this.Width - (double)button.GetValue(Ellipse.WidthProperty), 0, 0, 0);
                da.To = this.Width;
            }

            IsChecked = !IsChecked;
            sb.Children.Add(ta);
            sb.Children.Add(da);
            sb.Begin();
        }
    }
}