WPF - Create a custom toggle control with touch and binding support with Blend for Visual Studio 2013

In this article, I create a new toggle control using the following steps:

  • 1.  Import Photoshop file to get look and feel
  • 2.  Create control and template using standard toggle button
  • 3.  Add touch support
  • 4.  Add dependency properties for binding support


1.  Start in Expression Blend for Visual Studio 2013 by importing a template created in Photoshop to get the basic look of the button.  After importing, I will rename and group things to my liking.

File –>Import->Import Adobe Photoshop File


2.  Add a standard toggle feature to a page in Expression Blend and right click on it to choose Make into a User Controlimage

Name the new control whatever you want.  For this demonstration, I will use DemoCustomToggle.

To template it to look like what you want, right click on the toggle control in the new user control you just created.  Choose  Edit Template –> Create Empty

A window will pop up for Create ControlTemplate Resource.  Name it whatever you want for my purpose, I am going to use CustomToggleTemplate.  Below the name, you will see a dialog for “Define in” and the choices are Application or This Document.  Choosing Application will allow you to re-use the resource created throughout the application.  For this demo, I am going to place it in this document.

At this point, you will see a blank screen with a blank grid and the bread crumb (shown as 1 in the figure below) will say that you are in the template.  Paste your objects from your import above and manipulate them to get the default view for your toggle.  In my case, I added On and Off wording and set On to be collapsed by default.  I also added some gradient shading and color to my objects.  When you are done, you should see something like what is shown below.


1.  BreadCrumb  2. Base Grid for this Template 3. Added content to make the switch look like you want for the default including the other switch position content with that content being collapsed.

Now it is time to open up the States Panel.  To do this, click the tab at the top (shown as 1 in the image below).  If it is not showing, click window in the file menu and check States


The states panel contains all the relevant states for the control you are manipulating.  In my case, I want the switch to appear to switch to the on position and the text to change when the use changes to the Checked state (shown as IsChecked in the control).  To do this, click Checked (2) and change properties on any object you want to in order to get to the desired result.  In my case, I moved the button position to the right and set OffText to Collapsed and changed the OnText to Visible.  It is very important to pay attention to the red around the Design Window (3) with the words, ___ Recording is on.  This indicates any changes you make are being recorded for that state.  Objects that have been changed will show a red dot next to them in the Objects and Timeline window (4).  You can click on each state to see what your control will look like in that state.  When you are done making changed, switch back to base by clicking it (5) .  Then to get out of working on the template, click the base object in the breadcrumb (6).

At this point, your control should work as expected.

3.  At this point, the control works with a mouse but does not respond to touch.  To add touch support, use the UIElement Events. I used TouchMove to figure out the eventual value based on the direction of the touch gesture and TouchLeave to record the new value.

In the XAML, wire up your events:

   1: "Fill"> 
   3: "CustomToggle" Content="ToggleButton" 
   4: Template="{DynamicResource CustomToggleTemplate}" 
   7: TouchMove="Control_TouchMove" TouchLeave="Control_TouchLeave" 
   8: FontFamily="Verdana" Height="80" Width="200"/> 

The Code behind should contain

   1: private Point LastPosition { get; set; }
   2: private Point CurrentPosition { get; set; }
   3: private bool TouchSetValue { get; set; }
   5: private void Control_TouchMove(object sender, TouchEventArgs e)
   6: {
   7: var tp = e.GetTouchPoint(null);
   8: CurrentPosition = tp.Position; 
   9: if (CurrentPosition.X < LastPosition.X)
  10: {
  11:   TouchSetValue = false;
  12: }
  13: else if (CurrentPosition.X > LastPosition.X)
  14: { 
  15:   TouchSetValue = true;
  16: }
  17: LastPosition = tp.Position;
  18: } 
  20: private void Control_TouchLeave(object sender, TouchEventArgs e)
  21: { 
  22:   CustomToggle.IsChecked = TouchSetValue;
  23: }

The IsChecked Property can be set in the TouchMove event but it will be triggered multiple times which is why I chose to use a variable and set the IsChecked on the TouchLeave Event.

4.  At this point, your control will now work with a mouse and touch.  Now we need to expose the properties we want to use with out control.  We will create dependency properties.  For this example, we will just expose an IsSwitchedOn property and bind it to the IsChecked property.

   1: public static DependencyProperty IsSwitchedOnProperty = DependencyProperty.Register("IsSwitchedOn", typeof(bool?), typeof(CustomToggleControl), null);
   2:         public bool? IsSwitchedOn
   3:         {
   4:             get
   5:             {
   6:                 return (bool?)GetValue(IsSwitchedOnProperty);
   7:             }
   8:             set
   9:             {
  10:                 SetValue(IsSwitchedOnProperty, value);
  11:             }
  13:         }

In the XAML, we need to bind the IsChecked property to the new exposed IsSwitchedOn property in the control

IsChecked="{Binding IsSwitchedOn, ElementName=UserControl, Mode=TwoWay}"

To learn more about Dependency Properties, start here http://msdn.microsoft.com/en-us/library/ms753358(v=vs.110).aspx

Now your control is ready to be used.


# re: WPF - Create a custom toggle control with touch and binding support with Blend for Visual Studio 2013
Gravatar I am pretty happy to read your post.
Left by Allen dave on 12/11/2013 1:34 AM
Comments have been closed on this topic.