locked
Align Popup to the center of the screen RRS feed

  • Question

  • I am trying to show my popup in the center of the screen without feeding any margin information.

    The most obvious way is to set Horizontal and Vertical alignments to Center. But to my surprise this is not working.

    <Popup HorizontalAlignment="Center" VerticalAlignment="Center"   x:Name="menuItemPopup">

    ...

    </Popup>


    George Peter

    Monday, September 24, 2012 8:08 AM

Answers

  • Hi George,

       Two points.  First, if you are adding the above described popup to a panel that will honor the vertical/horizontal alignments requested, this should "just work".  I.e. if you have a Grid and you put a popup as its child, this grid will center that popup.  If the grid is at the root of the tree and takes up the whole window, your popup is thus centered within that window.

    Secondly, if that's not an option, you can do a little math to calculate the center of the screen, but realize that the HorizontalOffset and VerticalOffset properties of Popup are additive, i.e. they are in addition to the default layout of the popup.  So you may need to set Alignments to Left/Top to use this approach depending on the panel in use.

    Here's a snippet:

                Popup yourPopup = new Popup() { Height = 99, Width = 99, IsOpen = true, 
                    // Alignments needed since the  offset properties are relative to the default layout coordinates
                    HorizontalAlignment= Windows.UI.Xaml.HorizontalAlignment.Left, VerticalAlignment=Windows.UI.Xaml.VerticalAlignment.Top};
                yourPopup.Child = new Ellipse() { Height = 99, Width = 99, Fill = new SolidColorBrush(Colors.Blue) };
                CoreWindow yourContainingWindow = Window.Current.CoreWindow;
                Rect windowBounds = yourContainingWindow.Bounds;
                Point windowCenter = new Point(windowBounds.Left + (windowBounds.Width / 2.0), windowBounds.Top + (windowBounds.Height / 2.0));
                yourPopup.SetValue(Popup.HorizontalOffsetProperty, windowCenter.X - (yourPopup.ActualWidth / 2.0));
                yourPopup.SetValue(Popup.VerticalOffsetProperty, windowCenter.Y - (yourPopup.ActualHeight / 2.0));
    
    // now add it to some panel... 

    If that doesn't help, please live-drive up a repro app and I'll gladly show you how to fix it.

    -Matt


    XAML SDET Lead : Input / DirectManipulation / Accessibility


    Monday, September 24, 2012 5:54 PM

All replies

  • Hi George,

       Two points.  First, if you are adding the above described popup to a panel that will honor the vertical/horizontal alignments requested, this should "just work".  I.e. if you have a Grid and you put a popup as its child, this grid will center that popup.  If the grid is at the root of the tree and takes up the whole window, your popup is thus centered within that window.

    Secondly, if that's not an option, you can do a little math to calculate the center of the screen, but realize that the HorizontalOffset and VerticalOffset properties of Popup are additive, i.e. they are in addition to the default layout of the popup.  So you may need to set Alignments to Left/Top to use this approach depending on the panel in use.

    Here's a snippet:

                Popup yourPopup = new Popup() { Height = 99, Width = 99, IsOpen = true, 
                    // Alignments needed since the  offset properties are relative to the default layout coordinates
                    HorizontalAlignment= Windows.UI.Xaml.HorizontalAlignment.Left, VerticalAlignment=Windows.UI.Xaml.VerticalAlignment.Top};
                yourPopup.Child = new Ellipse() { Height = 99, Width = 99, Fill = new SolidColorBrush(Colors.Blue) };
                CoreWindow yourContainingWindow = Window.Current.CoreWindow;
                Rect windowBounds = yourContainingWindow.Bounds;
                Point windowCenter = new Point(windowBounds.Left + (windowBounds.Width / 2.0), windowBounds.Top + (windowBounds.Height / 2.0));
                yourPopup.SetValue(Popup.HorizontalOffsetProperty, windowCenter.X - (yourPopup.ActualWidth / 2.0));
                yourPopup.SetValue(Popup.VerticalOffsetProperty, windowCenter.Y - (yourPopup.ActualHeight / 2.0));
    
    // now add it to some panel... 

    If that doesn't help, please live-drive up a repro app and I'll gladly show you how to fix it.

    -Matt


    XAML SDET Lead : Input / DirectManipulation / Accessibility


    Monday, September 24, 2012 5:54 PM
  • A note to add, in order for the popup to align correctly in the parent the width and height of the popup class must be set. Specifying the content dimensions will allow the popup to expand to the content but the popup-to-parent alignment will not work as intended.
    • Edited by maeneak Saturday, May 18, 2013 3:07 PM
    Saturday, May 18, 2013 3:05 PM