Fly Views

Aug 23, 2013 at 6:32 AM

I was hoping someone might be able to explain to me how FlyViews are anchored so that you can change where they show up using the IFlyoutService.ShowFlyout.

So far when I call them, they only appear from the right edge of the screen. if I change the property flowDirection property on the view, it seem to start from the centre of the screen flowing right.

What I would like to do is to open it from the left edge of the screen.

Is there a way of doing this?

If so what do I need to see on the View/ViewModel to accomplish this?

Thank you
Aug 23, 2013 at 6:54 PM

The position of the Flyout is determined by two properties set in the Open method of the FlyoutView class.
The following part of the method sets the location of the Flyout using the Left property:
if (flowDirection == FlowDirection.LeftToRight)
    _popup.SetValue(Canvas.LeftProperty, Window.Current.Bounds.Width - FlyoutSize);
    _popup.SetValue(Canvas.LeftProperty, FlyoutSize);
Based on my understanding, by setting the Canvas.LeftProperty to 0 the Flyout should appear on the left.

The next part of the method sets the flowing direction from which the Flyout is "unfolded:"
_popup.ChildTransitions = new TransitionCollection();
_popup.ChildTransitions.Add(new PaneThemeTransition()
    Edge = (SettingsPane.Edge == SettingsEdgeLocation.Right) ? EdgeTransitionLocation.Right : EdgeTransitionLocation.Left
By setting the Edge property of the transition to EdgeTransitionLocation.Left, the "unfolding direction" of the Flyout can be changed so that it appears from the left.

Based on this, I believe you could change the FlyoutView and FlyoutService so that they would receive an extra parameter in their Open methods to decide the location of the Flyout. Then, the aforementioned properties could be changed as explained above based on the value of this parameter.

I hope this helps,

Damian Cherubini