Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating the slider toggle control for Windows Phone 7 - external state change

DZone's Guide to

Creating the slider toggle control for Windows Phone 7 - external state change

· Mobile Zone
Free Resource

In my last article I showed how to create a slider toggle control on your own (also known as ToggleSwitch) but it lacked one major feature - external property changes. Well, in fact you are able to change the IsOn property from an external call, but it won't affect the control itself - the slider won't move.

There is a solution to this problem and it is called DependencyProperty.Basically what I need is register a property that will be tracked for changes. In order to do this, I will have to modify a bit the code I've used in my previous article. 

NOTE: All operations mentioned here are performed inside the main MyControl class, that defines the control behavior.

First of all, I need to add the DependencyProperty:

public static readonly DependencyProperty IsOnProperty = DependencyProperty.Register("IsOn",typeof(bool), typeof(MyControl),
new PropertyMetadata(new PropertyChangedCallback(PropertyWasChanged)));

Notice that I am passing a void - the PropertyWasChanged callback. It will be triggered every time the property is changed (no matter what direction it goes). Before I get to the callback, I need to modify my base IsOn property to link it to the dependency one:

public bool IsOn
{
get
{
return (bool)GetValue(IsOnProperty);
}
set
{
SetValue(IsOnProperty, value);
}
}

So let's take a look at the callback:

private static void PropertyWasChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
PerformStateCheck((MyControl)d);
}

d is the DependencyObject passed to the callback, and in this case it will be the current MyControl instance that has the property changed. And here is one more method that I didn't mention anywhere - PerformStateCheck. This is the method that will trigger the Storyboard animations (as I said, the code from the previous article goes through a complete overhaul when it comes to linking properties).

Here is how it looks like:

static void PerformStateCheck(MyControl c)
{
if (grid == null)
{
grid = (Grid)VisualTreeHelper.GetChild(c, 0);
resourceDict = grid.Resources;
}

if (c.IsOn)
{
sBoard = resourceDict["mainAnimator"] as Storyboard;
sBoard.Begin();
}
else
{
sBoard = resourceDict["reverseAnimator"] as Storyboard;
sBoard.Begin();
}
}

From the last article, this piece of code was put directly in the Click event handler. Not anymore, since the animation won't be triggered by MyControl_Click anymore, but rather when the IsOn property is changed (i.e. when the callback is triggered). The state is checked against the passed MyControl instance - you can see in the callback snippet that I am passing the calling instance when checking. I must mention that grid, resourceDict and sBoard are static - a required modification given the nature of the calls I am using (it all starts with the DependencyProperty's PropertyChangedCallback).

Of course, you still need to change the control state on click. Since the property and the callback are already wired, all you have to do is change the current state to the opposite one:

void MyControl_Click(object sender, RoutedEventArgs e)
{
((MyControl)sender).IsOn = !((MyControl)sender).IsOn;
}

Now it works! You can trigger the property change from the host page, and the control state will change accordingly.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}