How to center Popup in Metro style app in c#

Question

Is there any way to show a Popup in Windows 8 Metro centered?

Setting VerticalAlignment and HorizontalAlignment to "Center", and VerticsalOffset and HorizontalOffset to 0 causes howing popup with left-up corner in the center of the screen.

Is there any way to do it nicely?

To make this problem harder, this popup has different size in snapped view, where is also should be centered.

Any thoughts?

Answer 1

Hope this helps, how about placing the popup in a canvas then manipulate the canvas...

XAML

<Canvas x:Name="myCanvas"
            HorizontalAlignment="Center"
            Height="127"
            VerticalAlignment="Center"
            Width="191"/>
    <Button Content="myButton"
            Height="100"
            Width="100"
            Click="myButton_Click"/>

C#

 private void myButton_Click(object sender, RoutedEventArgs e)
    {
        Popup myPopup = new Popup();
        myPopup.IsOpen = true;

        TextBox myTextbox = new TextBox();
        myTextbox.Text = "Your Message Here";

        myPopup.Child = myTextbox;

        myCanvas.Children.Add(myPopup);
    }

Just have fun trying...

Answer 2

I also added the following code to my xaml.cs (code behind) file:

(see the xaml I posted previously)

I then just wire up any test button's _Tapped event with the myPopup() function below.

I still haven't quite got the hang of Stackpanel to get the message centered, etc, but I'm getting there!

    async void messageBox(String msg)
    {
        MessageDialog dialog = new MessageDialog(msg,"Alert");
        await dialog.ShowAsync();
    }

   private void pButton_Clicked(object sender, RoutedEventArgs e)
    {
        PLPopup.IsOpen = false;

        String str = pInputBox.Text;

        hidePopup();

        messageBox(str);
    }

    void hidePopup()
    {
        pCanvas.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        pStackPanel.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        pText.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        pInputBox.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        pButton.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
    }

    void showPopup()
    {
        pCanvas.Visibility = Windows.UI.Xaml.Visibility.Visible;
        pStackPanel.Visibility = Windows.UI.Xaml.Visibility.Visible;
        pText.Visibility = Windows.UI.Xaml.Visibility.Visible;
        pInputBox.Visibility = Windows.UI.Xaml.Visibility.Visible;
        pButton.Visibility = Windows.UI.Xaml.Visibility.Visible;
    }

    private void myPopup(object sender, RoutedEventArgs e)
    {
        Brush myBrush = new SolidColorBrush(Windows.UI.Colors.Black);

        topAppBar.IsOpen = false;
        bottomAppBar.IsOpen = false;

        myBrush.Opacity = .5;

        PLPopup = new Popup();
        PLPopup.IsOpen = true;

        //PLPopup.Child = myTextbox;

        pCanvas.Background = myBrush;
        pCanvas.Children.Add(PLPopup);

        pCanvas.Width = this.ActualWidth;
        pCanvas.Height = this.ActualHeight;

        showPopup();
    }

Answer 3

I put this at the end of the main Grid in my Xaml, after everything else so it's sure to come to the front.

<Canvas x:Name="pCanvas" HorizontalAlignment="Center" VerticalAlignment="Center">
    <StackPanel x:Name="pStackPanel">

        <TextBlock x:Name="pText" Text="Enter Name of Playlist:" Margin="25,12" Width="300" />

        <TextBox x:Name="pInputBox" Margin="25,12" Width="300" />

        <Button x:Name="pButton" Content="OK" Height="30" Width="100" Click="pButton_Clicked" Margin="6,12" />

    </StackPanel>
</Canvas>