XAML ListView on wrong positon in the grid - xaml

Question

I am trying to make the listview in the picture to the third row on the grid, which is below the slider controls. Unfortunately it is not taking its position as per the definition. Please advise
Here is the definition:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> <!--Top date-->
<RowDefinition Height="10"/> <!--Just space between top date & slider controls-->
<RowDefinition Height="Auto"/> <!--Slider row-->
<RowDefinition Height="*"/> <!--Favorite shifts list view-->
</Grid.RowDefinitions>
<TextBlock x:Name="tbDate" Grid.Row="0" Text="Mon 28 April" Foreground="White" HorizontalAlignment="Center" FontSize="23" Margin="6,0,0,0" Style="{StaticResource MessageDialogTitleStyle}"/>
<Grid Grid.Row="2" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="88.333"/>
<ColumnDefinition Width="Auto" MinWidth="193.333"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnAddToFavs" Grid.Column="0" Content="ADD" Click="btnAddToFavs_Click"/>
<StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Center" Margin="0,0,0.333,0" Width="88">
<Slider x:Name="sliderStartTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" Margin="0,31,0,-332" Style="{StaticResource SliderStartStyle}" IsDirectionReversed="True" HorizontalAlignment="Center" />
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftStart" Text="{Binding Value, Converter={StaticResource sliderValueToHoursConverter}, ElementName=sliderStartTime}" Foreground="Red" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Center" Margin="0.333,0,0,0" Width="88">
<Slider x:Name="sliderEndTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" Margin="0,31,0,-332" Style="{StaticResource SliderEndStyle}" IsDirectionReversed="True" HorizontalAlignment="Center" Value="48" />
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftEnd" Text="{Binding Value, Converter={StaticResource sliderValueToHoursConverter}, ElementName=sliderEndTime}" Foreground="Green" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</StackPanel>
</Grid>
<ListView x:Name="lvFavShifts" Grid.Row="3" Foreground="Red" FontSize="40" MaxHeight="300" Margin="0,40" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="12" Background="#FFC2CEDC" Grid.Column="0" Grid.ColumnSpan="5" CornerRadius="15"/>
<Button x:Name="btnSetShift" Content="Set" Background="Green" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
<TextBlock x:Name="tbFavShiftStart" Grid.Column="1" Text="{Binding theStartTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbHyphen" Grid.Column="2" Text="-" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbFavShiftEnd" Grid.Column="3" Text="{Binding theEndTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<Button x:Name="btnDeleteShift" Content="Delete" Background="Red" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

Answer 1

Ive changed your code a bit to hopefully get a better result. Its not ideal but should be more easily tweaked for desired result.
The main change is that the Margins like
<Slider x:Name="sliderStartTime" Margin="0,31,0,-332" />
have gone as they are a recipe for disaster on varying screen sizes. Have a look and see what you think.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/> //its ok to set height here
<!--Top date-->
<RowDefinition Height="10"/>
<!--Just space between top date & slider controls-->
<RowDefinition Height="Auto"/>
<!--Slider row-->
<RowDefinition Height="*"/>
<!--Favorite shifts list view-->
</Grid.RowDefinitions>
<TextBlock x:Name="tbDate" Grid.Row="0" Text="Mon 28 April" Foreground="White" HorizontalAlignment="Center" FontSize="23" Margin="6,0,0,0" Style="{StaticResource MessageDialogTitleStyle}"/>
<Grid Grid.Row="2" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/> //adaptable fit to varying screen sizes
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnAddToFavs" Grid.Column="0" Content="ADD" />
<StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Center" Width="88">
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftStart" Text="30" Foreground="Red"
FontSize="13" FontFamily="Nirmala UI"
Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Slider x:Name="sliderStartTime" Orientation="Vertical" LargeChange="0" Maximum="48"
SmallChange="0"
IsDirectionReversed="True" HorizontalAlignment="Center" Height="300"
/> // Slider has a reasonable height. You probably want control of this on phones
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Center" Width="88">
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftEnd" Text="22" Foreground="Green" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Slider x:Name="sliderEndTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" IsDirectionReversed="True" HorizontalAlignment="Center"
VerticalAlignment="Stretch" Value="48" Height="300" />
</StackPanel>
</Grid>
<ListView x:Name="lvFavShifts" Grid.Row="3" Foreground="Red"
FontSize="40" Margin="0,40" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="12" Background="#FFC2CEDC" Grid.Column="0" Grid.ColumnSpan="5"
CornerRadius="15"/>
<Button x:Name="btnSetShift" Content="Set" Background="Green" Grid.Column="0"
HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
<TextBlock x:Name="tbFavShiftStart" Grid.Column="1" Text="{Binding theStartTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbHyphen" Grid.Column="2" Text="-" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbFavShiftEnd" Grid.Column="3" Text="{Binding theEndTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<Button x:Name="btnDeleteShift" Content="Delete" Background="Red" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>