Flyout or Popup to display addition info

Question

I want display popup on top my app with additional information, my info is Listview with ~500 items I've tried both:

• problem with flyout -> it has probably scrollViewer inside so my listview doesn't Virtualize correctly everything else is ok. There is my code:

  Flyout myFlyout = new Flyout();
  myFlyout.Placement = FlyoutPlacementMode.Full;
  myFlyout.Content = myListView;
  myFlyout.ShowAt(this);   
  

• problem with popup -> it isn't centered, verticalAlignment doesn't work, horizontal neither

  Popup myPopup = new Popup();
  myPopup.Child = myListView;
  myPopup.IsOpen = true;
  

So which way should I go, try to edit Template of flyout or center my popup by setting vertical and horizontal offset? Or there's better way to display popup like window with info like list of items or such other

Answer 1

By default, Flyout has a ScrollViewer inside. You can find its template at FlyoutPresenter styles and templates. You can edit it and use new template by setting Flyout.FlyoutPresenterStyle property if you need.

If you want to use Popup's HorizontalAlignment and VerticalAlignment property, you need add Popup as a child of an element in the visual tree. For example:

Popup myPopup = new Popup();
//MainGrid is the top Grid in the Page
MainGrid.Children.Add(myPopup);
myPopup.HorizontalAlignment = HorizontalAlignment.Center;
myPopup.VerticalAlignment = VerticalAlignment.Center;
myPopup.Child = myListView;
myPopup.IsOpen = true;

But plesae note that this actually dose not make the Popup centered. It make the Popup's upper left corner centered. In the Remarks section of Popup class, it says:

You position the Popup by setting the HorizontalOffset and VerticalOffset properties. The Popup is offset relative to its immediate parent container.

I think while using HorizontalAlignment.Center and VerticalAlignment.Center, it set the HorizontalOffset and VerticalOffset to the half of its parent's width and height.

And in the Remarks section, it also says:

Do not use a Popup if a Flyout, MenuFlyout, ToolTip or MessageDialog is more appropriate.

So I think in your case using Flyout is a better way.