How to hide “Flyout Panel” as it slides out of UserControl RRS feed

  • General discussion

  • I have a simple control I created which Flys in and out.  When I built it, I was just testing it in MainPage.xaml.  It was docked on the left side of the screen, and when it did the “Fly Out” action, it simple moved to the left until it was out of sight.  Perfect – All is good. Not – In a real application, it will be used inside of other user controls which make various child screens, and they can be positioned anywhere.  In this case, the user control hosting the flyout panel is on the right side, so when the flyout panel is in the “out” position, it’s visible in the left side of the screen.  You can see this in the attached screenshot.  The left side uses a button for its content.  You can see the blue panel on the left side.  It should be completely hidden right now. How can I hide this?  I was going to attach the project for source code, and anyone can use this as its pretty nice and simple, except for this issue…,  but I didnt see a way to attach anything.





    Wednesday, October 10, 2012 3:05 PM

All replies

  • http://visualstudiomagazine.com/articles/2008/08/11/creating-a-flyout-stackpanel-using-silverlight-animations.aspx

    Thursday, October 11, 2012 4:24 AM
  • Thanks but that does not work in this case.  Dan's example makes the panel fly-out >>> above the screen where it can not be viewed.  That's easy.  Please look at my screenshot.  In my case, the panel "flies-out" to the left which happens be another visible area.  therefore, when the panel is in the "Out" position, you can still see it (as shown in the screenshot).  In the screenshot, the panel is currently in the "Out" position and somehow I must hide it there.

    Any other ideas?

    Thursday, October 11, 2012 12:22 PM
  • To make things more clear, here are screenshots of the 3 states:

    State #1)  Panel should be hiden on the left side where the red X is.  all that is visible is a sliver of the "Flyout Button" whish has only 3 dots "..." visible.


    State #2)  Mouse over the "Flyout Button" button.  It moved to the right so it's 100% visible and ready for a mouse click.  The mouse click will trigger an event which will cuase the "Flyout Panel" to slide to the right.


    and finally, State #3)  the "Flyout Panel" in the "In" position.


    Thursday, October 11, 2012 12:47 PM