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.

Image

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.
  1. <Grid>
  2. <Image Name="image"/>
  3. </Grid>
4. Now go to code behind of the control ToggleImage.Xaml.cs copy the following code and paste it.
  1. using System;
  2. using Windows.UI.Xaml;
  3. using Windows.UI.Xaml.Controls;
  4. using Windows.UI.Xaml.Input;
  5. using Windows.UI.Xaml.Media.Imaging;
  6. // The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
  7. namespace MyProject.Controls
  8. {
  9. public sealed partial class ToggleImage: UserControl
  10. {
  11. public delegate void CheckedChangeHandler(bool isChecked);
  12. public event CheckedChangeHandler CheckedChange;
  13. private BitmapImage _checkedImage;
  14. private BitmapImage _unCheckedImage;
  15. public ToggleImage()
  16. {
  17. this.InitializeComponent();
  18. this.Tapped += ToggleImage_OnTapped;
  19. this.Loaded += ToggleImage_Loaded;
  20. this.Unloaded += ToggleImage_Unloaded;
  21. }#
  22. region Checked Image Dependency Property
  23. /// <summary>
  24. /// Set image to show on checked.
  25. /// </summary>
  26. public string CheckedImagePath
  27. {
  28. get
  29. {
  30. return (string) GetValue(CheckedImagePathProperty);
  31. }
  32. set
  33. {
  34. SetValue(CheckedImagePathProperty, value);
  35. }
  36. }
  37. /// <summary>
  38. /// Dependency property Register Image.
  39. /// </summary>
  40. public static readonly DependencyProperty CheckedImagePathProperty = DependencyProperty.Register("CheckedImagePath", typeof (string), typeof (ToggleImage), new PropertyMetadata(null));#
  41. endregion Checked Image Dependency Property# region Unchecked Image Dependency Property
  42. /// <summary>
  43. /// Set image to show on unchecked.
  44. /// </summary>
  45. public string UncheckedImagePath
  46. {
  47. get
  48. {
  49. return (string) GetValue(UncheckedImagePathProperty);
  50. }
  51. set
  52. {
  53. SetValue(UncheckedImagePathProperty, value);
  54. }
  55. }
  56. /// <summary>
  57. /// Dependency property Register Image.
  58. /// </summary>
  59. public static readonly DependencyProperty UncheckedImagePathProperty = DependencyProperty.Register("UncheckedImagePath", typeof (string), typeof (ToggleImage), new PropertyMetadata(null));#
  60. endregion Unchecked Image Dependency Property# region IsChecked Dependency Property
  61. /// <summary>
  62. /// Get or Set check/unchecked status.
  63. /// </summary>
  64. public bool IsChecked
  65. {
  66. get
  67. {
  68. return (bool) GetValue(IsCheckedProperty);
  69. }
  70. set
  71. {
  72. SetValue(IsCheckedProperty, value);
  73. }
  74. }
  75. /// <summary>
  76. /// Handles image selection changed.
  77. /// </summary>
  78. public static readonly DependencyProperty IsCheckedProperty = DependencyProperty.Register("IsChecked", typeof (bool), typeof (ToggleImage), new PropertyMetadata(false, OnCheckedStatusChanged));
  79. /// <summary>
  80. /// Handles checked status change.
  81. /// </summary>
  82. /// <param name="d">
  83. /// The <see cref="DependencyObject"/> on which
  84. /// the property has changed value.
  85. /// </param>
  86. /// <param name="e">
  87. /// Event data that is issued by any event that
  88. /// tracks changes to the effective value of this property.
  89. /// </param>
  90. private static void OnCheckedStatusChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  91. {
  92. var target = (ToggleImage) d;
  93. target.OnCheckedStatusChanged();
  94. }
  95. /// <summary>
  96. /// Handles checked status changed.
  97. /// </summary>
  98. private void OnCheckedStatusChanged()
  99. {
  100. if (_checkedImage != null & _unCheckedImage != null) image.Source = IsChecked ? _checkedImage : _unCheckedImage;
  101. if (CheckedChange != null) CheckedChange.Invoke(IsChecked);
  102. }#
  103. endregion IsChecked Dependency Property# region Private Methods
  104. void ToggleImage_Loaded(object sender, RoutedEventArgs e)
  105. {
  106. if (!string.IsNullOrEmpty(UncheckedImagePath))
  107. {
  108. _unCheckedImage = new BitmapImage(new Uri(UncheckedImagePath, UriKind.RelativeOrAbsolute));
  109. image.Source = _unCheckedImage;
  110. }
  111. if (!string.IsNullOrEmpty(CheckedImagePath)) _checkedImage = new BitmapImage(new Uri(CheckedImagePath, UriKind.RelativeOrAbsolute));
  112. }
  113. void ToggleImage_Unloaded(object sender, RoutedEventArgs e)
  114. {
  115. this.Tapped -= ToggleImage_OnTapped;
  116. this.Loaded -= ToggleImage_Loaded;
  117. this.Unloaded -= ToggleImage_Unloaded;
  118. _checkedImage = null;
  119. _unCheckedImage = null;
  120. image = null;
  121. }
  122. void ToggleImage_OnTapped(object sender, TappedRoutedEventArgs e)
  123. {
  124. IsChecked = !IsChecked;
  125. }#
  126. endregion Private Methods
  127. }
  128. }
5. Now Build your project.
How to Consume ImageControl in your page?
  1. <Page
  2. x:Class="MyProject.Page1"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:control="using:MyProject.Controls"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d">
  9. <Grid>
  10. <control:ToggleImage Width="40" VerticalAlignment="Top" UncheckedImagePath="ms-appx:///Assets/UncheckedImage.png" CheckedImagePath="ms-appx:///Assets/CheckedImage.png"/>
  11. </Grid>
  12. </Page>