Alexandru Circus Alexandru Circus - 1 year ago 166
C# Question

How to center a popup in window (Windows store apps)

I have a custom popup (as a user control) which I load programatically. I'm not able to center it on x axis, only on vertical. The popup is not added onto an xaml file, but it is added on the root window.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using System.Windows;
using Windows.UI.Core;

// The User Control item template is documented at

namespace QSTLibrary.WIN8.Tools
public sealed partial class CustomProgressRingPopup : UserControl

public CustomProgressRingPopup()

public string Text
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }

// Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
new PropertyMetadata("", OnTextChanged));

public void OpenPopup()
this.ParentPopup.IsOpen = true;

public void ClosePopup()
this.ParentPopup.IsOpen = false;

private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
var instance = d as CustomProgressRingPopup;
var newValue = e.NewValue as string;
if (instance != null && newValue != null)
instance.CustomTextBlock.Text = newValue;

private void OnPopupLoaded(object sender, RoutedEventArgs e)
this.ParentPopup.HorizontalOffset = (Window.Current.Bounds.Width - gdChild.ActualWidth) / 2;
this.ParentPopup.VerticalOffset = (Window.Current.Bounds.Height - gdChild.ActualHeight) / 2;

userControl xaml:


<Popup x:Name="ParentPopup" HorizontalAlignment="Center" VerticalAlignment="Center" Loaded="OnPopupLoaded">
<Grid x:Name="gdChild" Height="auto" Width="auto" Background="Blue" Margin="20">
<ProgressRing x:Name="CustomProgressRing" Height="40" Width="40" IsActive="true" Grid.Column="0" Margin="20"/>
<TextBlock x:Name="CustomTextBlock" Height="auto" Width="auto" FontSize="25" Grid.Column="1" Margin="20"/>

Here is how I use it external:

_loginProgressRingPopup.Text = "Logging in";

Answer Source

I've added the LayoutUpdate callback of the popup in the cs file and works now.

private void OnLayoutUpdated(object sender, object e)
            if(gdChild.ActualWidth == 0 && gdChild.ActualHeight == 0)

            double ActualHorizontalOffset = this.ParentPopup.HorizontalOffset;
            double ActualVerticalOffset = this.ParentPopup.VerticalOffset;

            double NewHorizontalOffset = (Window.Current.Bounds.Width - gdChild.ActualWidth) / 2;
            double NewVerticalOffset = (Window.Current.Bounds.Height - gdChild.ActualHeight) / 2;

            if (ActualHorizontalOffset != NewHorizontalOffset || ActualVerticalOffset != NewVerticalOffset)
                this.ParentPopup.HorizontalOffset = NewHorizontalOffset;
                this.ParentPopup.VerticalOffset = NewVerticalOffset;

and the popup from XAML:

<Popup x:Name="ParentPopup" LayoutUpdated="OnLayoutUpdated">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download