locked
How to animate Popup position/offset? RRS feed

  • Question

  • Hi,

    I am working on a Win 8.1 app. An UserControl shows a Popup that includes a TextBox. When the TextBox gets focus the Popup needs to be moved up to not hide the TextBox with the Keyboard:


    public class MyUserControl {
       private InputPane inputPane;
       private Popup popup;
       private Storyboard storyboard;
       private DoubleAnimation animation;
    
       public BookingEditor() {
          popup = new Popup();
    
          inputPane = InputPane.GetForCurrentView();
          inputPane.Showing += inputPane_Showing;
          inputPane.Hiding += inputPane_Hiding;
    
          animation = new DoubleAnimation();
          animation.Duration = new Duration(TimeSpan.FromSeconds(1.5));
          //animation.From = 0;
          //animation.To = -500;
    
          PowerEase easing = new PowerEase();
          easing.Power = 3.0;
          easing.EasingMode = EasingMode.EaseOut;
    
          animation.EasingFunction = easing;
          storyboard = new Storyboard();
          storyboard.Children.Add(animation);
          Storyboard.SetTarget(animation, popup);
          Storyboard.SetTargetProperty(animation, "VerticalOffset");
       }
    
       void inputPane_Hiding(InputPane sender, InputPaneVisibilityEventArgs args) {
          storyboard.SkipToFill();
          animation.From = popup.VerticalOffset;
          animation.To = 0;
          storyboard.Begin();
       }
    
       void inputPane_Showing(InputPane sender, InputPaneVisibilityEventArgs args) {
          storyboard.SkipToFill();
          animation.From = popup.VerticalOffset;
          animation.To = popup.VerticalOffset - sender.OccludedRect.Height;
          storyboard.Begin();
       }
    
       public void Show() {
          PopupContentControl pcControl = new PopupContentControl();
    
          popup.Child = pcControl;
          popup.IsOpen = true;
       }
    }

    inputPane_Showing/Hider are triggered corrently, but the position of the Popup does not change. Any ideas why?

    Tuesday, January 28, 2014 2:01 PM

Answers

  • Hi Agenor,

    The default code for Popup, Flyout and MenuFlyout doesn't use the animations, these types have their own built-in animations that exist outside of the templates and styles. Popup has a ChildTransitions  property that starts out as null, and if you want you can add PopupThemeTransition there. The reason you might do that is to adjust FromHorizontalOffset or FromVerticalOffset.

    More information please read Animating popup UI

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, January 29, 2014 3:14 AM
    Moderator