You've probably noticed a new style of toggle button in
some Windows Phone 7 screens. Here they are on the page that lets you set date
and time, blown up to almost double size:

If you experiment with these controls a bit, you'll find
that you can toggle the switch just by tapping it, but you can also move the
larger block back and forth with your finger, although it will tend to snap into
position either at the left or right.

I'm not going to try to duplicate that more complex
movement. My version will respond only to taps. For that reason I call it TapSlideToggle. The
button is a UserControl derivative in the
Petzold.Phone.Silverlight library. (I should note
that something similar could be implemented entirely in a template applied to
the existing ToggleButton,
and the Silverlight for Windows Phone Toolkit implements this control under the
name ToggleSwitchButton .) Here's the complete XAML file of my version:

To somewhat mimic the normal ToggleButton (but without the three-state
option) the code-behind file defines an IsChecked dependency property of type
bool and two events named Checked and Unchecked. One or the other of these
events is fired when the IsChecked property changes value:

The static property-changed handler calls an instance handler of the same
name, which alters the visuals in the XAML just a little bit and then fires one
of the two events. The only methods missing from the code above are the
overrides of two Manipulation events. Here they are:

Each of the two TapSlideToggle instances has both its Checked and Unchecked
events set to the same handler, but different handlers are used for the two
instances. This allows each handler to determine the state of the button by
obtaining the IsChecked property and accessing the corresponding TextBlock:

The Windows Presentation Foundation has a panel I often find useful called
UniformGrid. As the name suggests, the UniformGrid divides its area into cells, each of which has the same
dimensions.

By default,
UniformGrid automatically determines a number of rows and columns by taking the
ceiling of the square root of the number of children. For example, if there are
20 children, UniformGrid calculates 5 rows and columns (even though it might
make more sense to have 5 rows and 4 columns, or 4 rows and 5 columns). You can
override this calculation by explicitly setting the Rows or Columns property of
UniformGrid to a non-zero number.

My version of UniformGrid is called UniformStack. It doesn't have a Rows or
Columns property but it does have an Orientation propertyâ€”the same property
defined by StackPanel-to indicate
whether the children of the panel will be arranged vertically or horizontally.

Here's the portion of the UniformStack class that defines the single
dependency property and the property-changed handler:

Well, it's not entirely clear. Certainly the panel has no choice but to offer
to each child a Width of infinity. After that, one reasonable solution is to
return a size from MeasureOverride with a Width that is five times the Width
of the widest child.

The first UniformStack with a Vertical orientation simply divides the content
area into two equal areas. (See how much easier it is to use than a regular
Grid?) The top half contains another UniformStack with nothing in it (yet). The
bottom one contains a UniformStack with a Horizontal orientation for a Button
and a TextBlock.

Clicking the Button causes the code-behind file to add 10 more
Rectangle elements to the UniformStack named barChartPanel:

Notice that each Rectangle has a little half-pixel Margin on the right so
there's at least some spacing between the bars. Still, I think you'll be
surprised how many you can put in there before the display logic gives up:

Attached Properties

You now know almost everything you need to define your own attached
properties. The project named CanvasCloneDemo contains a class named CanvasClone.
The class defines two DependencyProperty fields named LeftProperty and
TopProperty:

After defining the DependencyProperty fields, you need static methods to
access the attached properties. These method names begin with Set and Get
followed by the attached property names, in this case, Left and Top,

These methods get called either explicitly from code or implicitly from the
XAML parser. The first argument will be the object on which the attached
property is being setâ€”in other words, the first argument will probably be a
child of CanvasClone. The body of the method uses that argument to call SetValue
and GetValue on the child. These are the same methods defined by
DependencyObject to set and get
dependency properties.