I have created a Popup by using the following code, but I can not figure out how to center it
I tried to automatically change the margin on runtime, but I could not figure out how to do it, but do anybody has an idea of how to center the popup?
It does not has a standard-dimension cause I need to globalize my program
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Name="MainGrid">
<Popup x:Uid="LoginPopup" IsOpen="True" Name="LoginPopup">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="10" Grid.Column="0" Grid.Row="0" Text="App Name" Grid.ColumnSpan="2" Style="{StaticResource HeaderTextStyle}" />
<TextBlock Margin="10" Grid.Column="0" Grid.Row="1" Text="Username" Style="{StaticResource ResourceKey=SubheaderTextStyle}" />
<TextBox Margin="10" Grid.Column="1" Grid.Row="1" Name="InputUsername" />
<TextBlock Margin="10" Grid.Column="0" Grid.Row="2" Text="Password" Style="{StaticResource ResourceKey=SubheaderTextStyle}" />
<PasswordBox Margin="10" Grid.Column="1" Grid.Row="2" Name="InputPassword" />
<StackPanel Margin="10" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Orientation="Horizontal">
<Button Name="Login" x:Uid="LoginPopupLogin" />
<Button Name="Cancel" x:Uid="LoginPopupCancel" />
</StackPanel>
</Grid>
</Popup>
</Grid>
UPDATE
I tried with user1603313's answer below, but it did not do the trick, as it says the size of the grid inside the popup is NaN.
I also tried to move the method into the grid, but it didn't do the trick either
The method I am talking about is this with the grid updated properly
private void LoginPopup_Loaded_1(object sender, RoutedEventArgs e)
{
LoginPopup.HorizontalOffset = (Window.Current.Bounds.Width - gdChild.ActualWidth) / 2;
LoginPopup.VerticalOffset = (Window.Current.Bounds.Height - gdChild.ActualHeight) / 2;
}
Here's a solution to you problem. i am rewriting the xaml code and along with the modification and you can find the explanation after the code.
<Popup x:Uid="LoginPopup" IsOpen="True" Name="LoginPopup" Loaded="LoginPopup_Loaded_1">
<Grid Background="Red" x:Name="gdChild" Height="Auto" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="10" Grid.Column="0" Grid.Row="0" Text="App Name" Grid.ColumnSpan="2" Style="{StaticResource HeaderTextStyle}" />
<TextBlock Margin="10" Grid.Column="0" Grid.Row="1" Text="Username" Style="{StaticResource ResourceKey=SubheaderTextStyle}" />
<TextBox Margin="10" Grid.Column="1" Grid.Row="1" Name="InputUsername" />
<TextBlock Margin="10" Grid.Column="0" Grid.Row="2" Text="Password" Style="{StaticResource ResourceKey=SubheaderTextStyle}" />
<PasswordBox Margin="10" Grid.Column="1" Grid.Row="2" Name="InputPassword" />
<StackPanel Margin="10" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Orientation="Horizontal">
<Button Name="Login" x:Uid="LoginPopupLogin" />
<Button Name="Cancel" x:Uid="LoginPopupCancel" />
</StackPanel>
</Grid>
</Popup>
Here I have added an event Loaded="LoginPopup_Loaded_1" to the xaml of the popup
Here's the event code in C#
private void LoginPopup_Loaded_1(object sender, RoutedEventArgs e)
{
LoginPopup.HorizontalOffset = (Window.Current.Bounds.Width - gdChild.ActualWidth) / 2;
LoginPopup.VerticalOffset = (Window.Current.Bounds.Height - gdChild.ActualHeight) / 2;
}
Explanation :
HorizontalOffset gets the distance between the left side of the application window and the left side of the popup.
Similarly vertical offset gets the distance between the top of the window and top of the popup
SINCE we have to center align it so we have to subtract half the width and the height of the popup from the the width and the height of the application window ( center of the popup is half the distance of the popup from it's top and left boundary )
the code is written in Loaded="LoginPopup_Loaded_1" event because this event is called when the element is rendered in the application window and Grid is taken because it is the container Grid of all the child elements.
i hope m clear :)
Re : And is it possible to run Loaded, when the screen is rotated? – The87Boy 24 mins ago
Answer to this is yes you can execute the same set of code by creating a method and call that method on Window.Current.SizeChanged += Current_SizeChanged;
void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
//call custom method from loaded event as well as size changed event
}
about the x:name and name attribute u asked what I'll explain will be same as what written in the below link
x:name and name difference silverlight
and also go through this link for WPF
In WPF, what are the differences between the x:Name and Name attributes?
As per my general understanding the Name is a property of the Class (ex: Grid or TextBlock and many more) but classes which do not have a name attribute needs to be accessed some how (ex: StoryBoard etc) so for that purpose x:name is provided. During the initializecomponent method call the x:name's and name are mapped to the class using FindName(string) method for them to become accessible.
now what happens internally is a long story cut short
MainPage.xaml -> MainPage.g.i.cs -> MainPage.xaml.cs
