How to position a button using grid row and column definitions? - xaml

Question

I've set up a Windows Phone 8.1 project and right now I'm trying to place a button, in the centered horizontally near the bottom of the layout.
So far I've figured out the following to center the button on the layout, but the
Grid.Row setting doesn't seem to have any effect on the vertical positioning as I expected.
Does anyone know how I can position the button towards the bottom of the screen? At the moment its in the center but half way up the screen, needs to be towards the bottom of the screen.
<Page x:Class="LC_Points.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:LC_Points"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding Source={StaticResource Locator},
Path=MainViewModel}"
mc:Ignorable="d">
<Grid>
<Button Grid.Row="2"
Content="Calculate"
HorizontalAlignment="Center"/>
</Grid>
</Page>

Answer 1

Before you set Grid.Row property of an element, first you have to define the rows of the Grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="1" Content="Click Me!" />
</Grid>
If you change the Height properties of the RowDefinitions, you can easily position the Button vertically.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="90*"></RowDefinition>
<RowDefinition Height="10*"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="1" Content="Click Me!" />
</Grid>
10* means 10% of the Grid. Sum of the stars has to be equal 100.