Why is my UI object moving slightly below the actual goal?

I am making an UWP project, and while I was browsing through my settings app on windows, I realised there is a blue line moving whenever I press a button. I wanted to remake it in UWP for my project, because it looks good. But whenever the animation plays, it moves a couple of 100 epx below the actual button.

Why?

Xaml script:

<Page
    x:Class="Library.Views.MainMenuView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Library.Helpers"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationBackgroundBrush}">

    <Grid>
        <Border HorizontalAlignment="Left" MaxWidth="400" MinWidth="200" Width="Auto" Height="Auto" Background="{ThemeResource ControlBackgroundBrush}" BorderBrush="{ThemeResource ControlHoveredBorderBrush}" BorderThickness="1" CornerRadius="0,8,8,0" >
            <StackPanel x:Name="Buttons">
                    <Button x:Name="Home" Style="{StaticResource UIButtonStyle}" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                            <Image Source="/Assets/HomeNoBGRes.png" Width="35" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
                            <TextBlock Text="Home" FontSize="20" Width="240"/>
                        </StackPanel>
                    </Button>
                    <Button x:Name="Projects" Style="{StaticResource UIButtonStyle}" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                            <Image Source="/Assets/ProjectsNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
                            <TextBlock Text="My Projects" FontSize="20" Width="240"/>
                        </StackPanel>
                    </Button>
                    <Border Background="{ThemeResource ControlHoveredBackgroundBrush}" Width="270" Height="5" CornerRadius="3" HorizontalAlignment="Center"/>
                    <Button x:Name="Documents" Style="{StaticResource UIButtonStyle}" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                            <Image Source="/Assets/DocsNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
                            <TextBlock Text="Documents" FontSize="20" Width="240"/>
                        </StackPanel>
                    </Button>
                    <Button x:Name="Paper" Style="{StaticResource UIButtonStyle}" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                            <Image Source="/Assets/PaperNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
                            <TextBlock Text="Paper" FontSize="20" Width="240"/>
                        </StackPanel>
                    </Button>
                </StackPanel>
        </Border>
        <Border x:Name="SelectionIndicator" Visibility="Collapsed" Background="{ThemeResource SystemAccentColor}" Height="30" Width="5" CornerRadius="3" HorizontalAlignment="Left" Margin="5,0,0,0"/>
    </Grid>
</Page>

and the C# animating function:

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (SelectionIndicator.Visibility == Visibility.Collapsed) SelectionIndicator.Visibility = Visibility.Visible;

            if (sender is  Button clickedButton) 
            { 
                double indicatorLeft = clickedButton.TransformToVisual(Buttons).TransformPoint(new Point(0, 0)).Y;

                if (SelectionIndicator.RenderTransform is null || !(SelectionIndicator.RenderTransform is CompositeTransform)) SelectionIndicator.RenderTransform = new CompositeTransform();

                CompositeTransform transform = SelectionIndicator.RenderTransform as CompositeTransform;

                Storyboard storyboard = new Storyboard();
                DoubleAnimation moveAnimation = new DoubleAnimation
                {
                    To = indicatorLeft,
                    Duration = TimeSpan.FromSeconds(0.5),
                    EnableDependentAnimation = true,
                    EasingFunction = new CircleEase { EasingMode= EasingMode.EaseInOut },
                };

                Storyboard.SetTarget(moveAnimation, transform);
                Storyboard.SetTargetProperty(moveAnimation, "TranslateY");

                storyboard.Children.Add(moveAnimation);

                storyboard.Begin();
            }
        }

Here is a picture showcasing my problem:

I tried adding a grid to the border because maybe it was caused because they weren't in the same container, but no.

Thanks in advance!

(To moderators: don't remove my thanks in advances, these are meant to thank the people who actually help me)

Solution

The reason for this behavior is that the SelectionIndicator is centered on the left by default, and its position can be seen after setting Visibility="Visible".

It is recommended to add VerticalAlignment="Top" in SelectionIndicator. and use StackPanel with Orientation="Horizontal".

The following is my test code, with some styles deleted.

<Grid>
  <StackPanel Orientation="Horizontal">
      
      <Border x:Name="SelectionIndicator" Visibility="Collapsed" Background="{ThemeResource SystemAccentColor}" Height="40" Width="5" CornerRadius="3" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,0,0,0"/>
      
      <Border HorizontalAlignment="Left" MaxWidth="400" MinWidth="200" Width="Auto" Height="Auto" BorderThickness="1" CornerRadius="0,8,8,0" >
          <StackPanel x:Name="Buttons">
              <Button x:Name="Home" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
                  <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                      <Image Source="/Assets/HomeNoBGRes.png" Width="35" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
                      <TextBlock Text="Home" FontSize="20" Width="240"/>
                  </StackPanel>
              </Button>
              <Button x:Name="Projects"  Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
                  <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                      <Image Source="/Assets/ProjectsNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
                      <TextBlock Text="My Projects" FontSize="20" Width="240"/>
                  </StackPanel>
              </Button>
              <Border Width="270" Height="5" CornerRadius="3" HorizontalAlignment="Center"/>
              <Button x:Name="Documents"  Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
                  <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                      <Image Source="/Assets/DocsNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
                      <TextBlock Text="Documents" FontSize="20" Width="240"/>
                  </StackPanel>
              </Button>
              <Button x:Name="Paper" Width="300" Height="40" FontSize="20" HorizontalAlignment="Center" Margin="5,8,12,8" Click="Button_Click">
                  <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                      <Image Source="/Assets/PaperNoBGRes.png" Width="30" Height="30" Margin ="0,0,10,0" Stretch="Fill"/>
                      <TextBlock Text="Paper" FontSize="20" Width="240"/>
                  </StackPanel>
              </Button>
          </StackPanel>
      </Border>
      
  </StackPanel>