Tal Tal - 1 month ago 12
C# Question

Vertical Alignment doesn't work XAML

How do I center a Windows Store app so that it is in the middle of the screen, including all its content, using XAML/C#?

I tried this:

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">


But it seems that the
vertical alignment
doesn't work and the grid is staying at the top of the screen.

EDIT: I want the red section to be in the center of the screen:

enter image description here

<Grid RequestedTheme="Light" Loaded="Grid_Loaded" Background="{ThemeResource AppBarItemBackgroundThemeBrush}">
<Grid.Resources>
<Storyboard x:Name="FadeImageStoryboard">
<DoubleAnimation From="0"
To="1"
Duration="0:0:0.7"
Storyboard.TargetName="BackgroundImage"
Storyboard.TargetProperty="Opacity" />
</Storyboard>
</Grid.Resources>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Image Source="assets/113h.jpg" Stretch="Fill" x:Name="BackgroundImage" RequestedTheme="Light" Margin="0,-10,0,10" />
<Button x:Name="backButton" Style="{StaticResource NavigationBackButtonNormalStyle}"
Margin="23,45,0,0"
VerticalAlignment="Top"
Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button" Click="backButton_Click"/>
<StackPanel x:Name="Container">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBox Margin="363,172,368,308" PlaceholderText="Last Name" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="LastName"/>

<Button Content="Sign-Up" HorizontalAlignment="Left" Margin="360,417,0,0" VerticalAlignment="Top" Width="257" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
</StackPanel>
</Grid>

Answer

Your Grid is wrapped in a StackPanel. That means its centering within the stack panel. Which, given how StackPanel works, doesn't really make much sense anyways.

Take the Grid out (make it a child of the root Grid) and the centering will work as you expect.

 <Grid RequestedTheme="Light" Loaded="Grid_Loaded" Background="{ThemeResource AppBarItemBackgroundThemeBrush}">
   ...
   //No StackPanel!
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> 
        <TextBox Margin="363,172,368,308" PlaceholderText="Last Name" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="LastName"/>      
        <Button Content="Sign-Up" HorizontalAlignment="Left" Margin="360,417,0,0" VerticalAlignment="Top" Width="257" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
    </Grid>
    ....
</Grid>