Question

On my main window, I have several different buttons and fields that are already working. They are basically a calculator that hides the calculations from the user.

However, I would like to add a button that says “How does it work?” and which slides a new pane in from the side when pressed.

I am doing this on the Windows Phone 7 emulator, but I am using Silverlight.

Answer 1

If you want to home brew this it would be fairly trivial. I would just use the VisualStateManager. Have 2 states for your “How does it work” pane.

1. HowDoIWork_Visible
2. HowDoIWork_Hidden

To accomplish the sliding effect you’ll need to have the position the pane off the screen. So I would add a TranslateTransform to the RenderTransform property of the pane. Its “X” attribute set would originally be set to the negative width of your pane. For more info see TranslateTransform:

For the HowDoIWork_Visible state set the X property of the TranslateTransform to 0. and the Visibility to “Visible” or the Opacity to “1.0”.

Now create the HowDoIWork_Hidden state so you can once again hide the pane. Set the pane’s Visibility to “Collapsed” or its Opacity to “0.0”. Also set the X property of the TranslateTransform back to the Width.

When the user clicks the Button you just need to call:

VisualStateManager.GoToState("HowDoIWork_Visible");

To hide the pane again:

VisualStateManager.GoToState("HowDoIWork_Hidden");

Other ideas…

You may also be able to adapt the Silverlight Toolkit’s Accordion to do what you want:
http://silverlight.codeplex.com/wikipage?title=Silverlight%20Toolkit%20Control%20Overview%20Pg1&referringTitle=Home

If you’re not stuck on the sliding in effect the ChildWindow provides an easy way to open up a dialog type view.
http://www.wintellect.com/CS/blogs/jprosise/archive/2009/04/29/silverlight-3-s-new-child-windows.aspx