Image Toggle Button Control

In this blog you will learn about Image Toggle Button Control in Universal Windows Apps.

Custom Image Toggle Button

The behavior is one kind of Check Box, You need to provide a default image (unchecked image) to visible in Default mode (Unchecked Mode), again you need to provide Checked Image when user will check toggle the button that time it will reflect on UI.

How to create Toggle Image Control?

1. Add New Custom Control in your Project: Right Click on your project → Add → New Item.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Select User Control from Add New Item window → Specify any name for control (Toggle Image) and click on Add button.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 




3. Now open ToggleImage.Xaml page and add Image control on page.

<Grid>
   <Image Name="image"/>
</Grid>

4. Now go to code behind of the control ToggleImage.Xaml.cs copy the following code and paste it.

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media.Imaging;
// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
namespace MyProject.Controls
{
    public sealed partial class ToggleImage: UserControl
    {
        public delegate void CheckedChangeHandler(bool isChecked);
        public event CheckedChangeHandler CheckedChange;
        private BitmapImage _checkedImage;
        private BitmapImage _unCheckedImage;
        public ToggleImage()
        {
            this.InitializeComponent();
            this.Tapped += ToggleImage_OnTapped;
            this.Loaded += ToggleImage_Loaded;
            this.Unloaded += ToggleImage_Unloaded;
        }#
        region Checked Image Dependency Property
        /// <summary>
        /// Set image to show on checked.
        /// </summary>
        public string CheckedImagePath
        {
            get
            {
                return (string) GetValue(CheckedImagePathProperty);
            }
            set
            {
                SetValue(CheckedImagePathProperty, value);
            }
        }
        /// <summary>
        /// Dependency property Register Image.
        /// </summary>
        public static readonly DependencyProperty CheckedImagePathProperty = DependencyProperty.Register("CheckedImagePath", typeof (string), typeof (ToggleImage), new PropertyMetadata(null));#
        endregion Checked Image Dependency Property# region Unchecked Image Dependency Property
        /// <summary>
        /// Set image to show on unchecked.
        /// </summary>
        public string UncheckedImagePath
        {
            get
            {
                return (string) GetValue(UncheckedImagePathProperty);
            }
            set
            {
                SetValue(UncheckedImagePathProperty, value);
            }
        }
        /// <summary>
        /// Dependency property Register Image.
        /// </summary>
        public static readonly DependencyProperty UncheckedImagePathProperty = DependencyProperty.Register("UncheckedImagePath", typeof (string), typeof (ToggleImage), new PropertyMetadata(null));#
        endregion Unchecked Image Dependency Property# region IsChecked Dependency Property
        /// <summary>
        /// Get or Set check/unchecked status.
        /// </summary>
        public bool IsChecked
        {
            get
            {
                return (bool) GetValue(IsCheckedProperty);
            }
            set
            {
                SetValue(IsCheckedProperty, value);
            }
        }
        /// <summary>
        /// Handles image selection changed.
        /// </summary>
        public static readonly DependencyProperty IsCheckedProperty = DependencyProperty.Register("IsChecked", typeof (bool), typeof (ToggleImage), new PropertyMetadata(false, OnCheckedStatusChanged));
        /// <summary>
        /// Handles checked status change.
        /// </summary>
        /// <param name="d">
        /// The <see cref="DependencyObject"/> on which
        /// the property has changed value.
        /// </param>
        /// <param name="e">
        /// Event data that is issued by any event that
        /// tracks changes to the effective value of this property.
        /// </param>
        private static void OnCheckedStatusChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
            {
                var target = (ToggleImage) d;
                target.OnCheckedStatusChanged();
            }
            /// <summary>
            /// Handles checked status changed.
            /// </summary>
        private void OnCheckedStatusChanged()
        {
            if (_checkedImage != null & _unCheckedImage != null) image.Source = IsChecked ? _checkedImage : _unCheckedImage;
            if (CheckedChange != null) CheckedChange.Invoke(IsChecked);
        }#
        endregion IsChecked Dependency Property# region Private Methods
        void ToggleImage_Loaded(object sender, RoutedEventArgs e)
        {
            if (!string.IsNullOrEmpty(UncheckedImagePath))
            {
                _unCheckedImage = new BitmapImage(new Uri(UncheckedImagePath, UriKind.RelativeOrAbsolute));
                image.Source = _unCheckedImage;
            }
            if (!string.IsNullOrEmpty(CheckedImagePath)) _checkedImage = new BitmapImage(new Uri(CheckedImagePath, UriKind.RelativeOrAbsolute));
        }
        void ToggleImage_Unloaded(object sender, RoutedEventArgs e)
        {
            this.Tapped -= ToggleImage_OnTapped;
            this.Loaded -= ToggleImage_Loaded;
            this.Unloaded -= ToggleImage_Unloaded;
            _checkedImage = null;
            _unCheckedImage = null;
            image = null;
        }
        void ToggleImage_OnTapped(object sender, TappedRoutedEventArgs e)
        {
            IsChecked = !IsChecked;
        }#
        endregion Private Methods
    }
}

5. Now Build your project.

 

How to Consume ImageControl in your page? 

<Page
   x:Class="MyProject.Page1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:control="using:MyProject.Controls"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d">
   <Grid>
      <control:ToggleImage Width="40" VerticalAlignment="Top" UncheckedImagePath="ms-appx:///Assets/UncheckedImage.png" CheckedImagePath="ms-appx:///Assets/CheckedImage.png"/>
   </Grid>
</Page>