How to handle RoutedEvents in WinRT Popup

Question

I am playing a Little with Windows 8 and building Windows Store Apps. Currently I am trying to create a popup. I want to tap on a button on a (primitive) user control which is hosted as the Child of a Windows::UI::Xaml::Controls::Primitives::Popup.
When I tapped on the button I want to do something and eventually close the popup. As I read here

---

Routed events outside the visual tree

... If you want to handle routed events from a Popup or ToolTip, place the handlers on specific UI elements that are within the Popup or ToolTip and not the Popup or ToolTip elements themselves. Don't rely on routing inside any compositing that is performed for Popup or ToolTip content. This is because event routing for routed events works only along the main visual tree. ...

---

I then created an ugly solution as to pass the popup (as parent) to my custom control.

void Rotate::MainPage::Image1_RightTapped_1(Platform::Object^ sender, Windows::UI::Xaml::Input::RightTappedRoutedEventArgs^ e)
{
    Popup^ popup = ref new Popup();
    ImagePopup^ popupchild = ref new ImagePopup(popup); //pass parent's reference to child 
    popupchild->Tapped += ref new TappedEventHandler(PopupButtonClick);
    popup->SetValue(Canvas::LeftProperty, 100);
    popup->SetValue(Canvas::TopProperty, 100);
    popup->Child = popupchild;
    popup->IsOpen = true;
}

void PopupButtonClick(Platform::Object^ sender, Windows::UI::Xaml::Input::TappedRoutedEventArgs^ e){
    ImagePopup^ imgPop = static_cast<ImagePopup^>(sender);
    if(imgPop != nullptr){
        imgPop->CloseParent();
        e->Handled = true;
    }
    e->Handled = false;
}

Is there any other way around? Thank you.

Answer 1

In the namespace Windows::UI::Popups there is the PopupMenu-class which provides exactly what I need. It creates a popup that is similar to a context-menu in classic Desktop-Applications.

First, create a new object using simply

Windows::UI::Popups::PopupMenu^ popupmenu = ref new Windows::UI::Popups::PopupMenu();

Afterwards, populate the popup with up to six items using

popupmenu->Commands->Append(ref new Windows::UI::Popups::UICommand("Do Something",
[this](IUICommand^ command){
//your action here
}));

Eventually, use the popup with your designated UIElement like

popupmenu->ShowAsync(Windows::Foundation::Point(xArg, yArg));

The documentation is available on MSDN (rather poor, though). A sample project can be obtained from here.

Answer 2

You could put the popup at the root of your UserControl like so:

<UserControl
    x:Class="App15.MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App15"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid>
        <Popup
            x:Name="popup"
            IsOpen="True">
            <Button
                Content="Close"
                Click="Button_Click" />
        </Popup>
    </Grid>
</UserControl>

Then hide it from within the UserControl:

void App15::MyUserControl::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    popup->IsOpen = false;
}

It isn't really a better approach, just different. I think you should probably use HorizontalOffset instead of Canvas.Left positioning and it is also often better to make the popup a child of some panel to get correct layout updates and soft keyboard behavior with TextBox controls hosted in popups.