WPF User control moving out of one grid cell to another grid cell

Question

So I made my own user control,  and the problem I am having is that when my animation is called my canvas is resized to account for adding of a menu box,  and this is causing my GearIconBtn  to move.  Ideally I would like the GearIconBtn  to stay at the bottom center of the user control but I can't seem to get it to do that.

here is my user xaml code:

<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:VideoPlayerLib" xmlns:HC="clr-namespace:HMIControls;assembly=HMIControls"
             xmlns:HI="clr-namespace:HmiControlComponents;assembly=HMIControlComponents" x:Class="VideoPlayerLib.ForwardBackwardControl"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="154" >


    <UserControl.Resources>
        <Storyboard x:Key="OpenMenuSB">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuControlCanvas" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MenuControlCanvas" Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MenuControlCanvas" Storyboard.TargetProperty="(FrameworkElement.Height)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="339"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ForwardBackCanvas" Storyboard.TargetProperty="(FrameworkElement.Width)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="34"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="154"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ForwardBackCanvas" Storyboard.TargetProperty="(FrameworkElement.Height)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="26"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="346"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="GearIconBtn" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="315.556"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="GearIconBtn" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="53.778"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>


    <Canvas x:Name="ForwardBackCanvas"  SizeChanged="ForwardBackCanvas_SizeChanged"   Height="26"  Width="34" >
        <Canvas x:Name="MenuControlCanvas" Height="0"  Width="0"  Opacity="0"  Grid.Row="1" Visibility="Collapsed"   >
            <Rectangle Height="309" Width="144" RadiusX="6" RadiusY="6" HorizontalAlignment="Center" VerticalAlignment="Top" Fill="#FF191818">
                <Rectangle.Effect>
                    <DropShadowEffect RenderingBias="Quality" Opacity="0.5" Direction="0"/>
                </Rectangle.Effect>
            </Rectangle>
            <Path x:Name="LinePath" Data="M0,32.75 L200.01266,32.75" Fill="#FFF4F4F5" HorizontalAlignment="Center" Height="1" Stroke="White" Stretch="Fill" Canvas.Top="32.75" VerticalAlignment="Center" Width="145" Canvas.Left="-0.498"/>
            <TextBlock Canvas.Left="23.873" TextWrapping="Wrap" Text="Play Back Speed:" Canvas.Top="10" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <Button x:Name = "Speed010Btn" Style="{DynamicResource PlayBackButtonStyle}" Content="0.10" Height="19" Canvas.Top="33.75" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="Speed010Btn_Click"/>
            <Button x:Name = "Speed025Btn" Style="{DynamicResource PlayBackButtonStyle}" Content="0.25" Height="19" Canvas.Top="57" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="Speed025Btn_Click"/>
            <Button x:Name = "Speed05Btn"  Style="{DynamicResource PlayBackButtonStyle}" Content="0.5" Height="19" Canvas.Top="81" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="Speed05Btn_Click"/>
            <Button x:Name = "Speed075Btn" Style="{DynamicResource PlayBackButtonStyle}" Content="0.75" Height="19" Canvas.Top="105" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="Speed075Btn_Click" />
            <Button x:Name = "SpeedNormalBtn" Style="{DynamicResource PlayBackButtonStyle}" Content="Normal" Height="19" Canvas.Top="129" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="SpeedNormalBtn_Click" />
            <Button x:Name = "Speed125Btn" Style="{DynamicResource PlayBackButtonStyle}" Content="1.25" Height="19" Canvas.Top="153" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="Speed125Btn_Click" />
            <Button x:Name = "Speed15Btn" Style="{DynamicResource PlayBackButtonStyle}" Content="1.5" Height="19" Canvas.Top="177" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="Speed15Btn_Click" />
            <Button x:Name = "Speed175Btn" Style="{DynamicResource PlayBackButtonStyle}" Content="1.75" Height="19" Canvas.Top="201" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="Speed175Btn_Click"/>
            <Button x:Name = "Speed2Btn" Style="{DynamicResource PlayBackButtonStyle}" Content="2" Height="19" Canvas.Top="225" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="Speed2Btn_Click" />
            <Button x:Name = "Speed25Btn" Style="{DynamicResource PlayBackButtonStyle}" Content="2.5" Height="19" Canvas.Top="249" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="Speed25Btn_Click" />
            <Button x:Name = "Speed35Btn" Style="{DynamicResource PlayBackButtonStyle}" Content="3.5" Height="19" Canvas.Top="273" Width="144" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Times New Roman" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Click="Speed35Btn_Click" />
        </Canvas>
        <HI:GearIcon x:Name="GearIconBtn"   Canvas.Bottom="0"  Canvas.Top="0"  Height="26"  Width="34" FillColor="White" >
            <HI:GearIcon.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </HI:GearIcon.RenderTransform>
            <HI:GearIcon.Style>
                <Style TargetType="{x:Type HI:GearIcon}">
                    <EventSetter Event="MouseDown" Handler="GearIconBtn_MouseDown" />
                </Style>
            </HI:GearIcon.Style>
        </HI:GearIcon>
    </Canvas>

I have this in my code behind:

  private void ForwardBackCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
        {

            double buttonWidth = GearIconBtn.ActualWidth;
            double buttonHeight = GearIconBtn.ActualHeight;

            double canvasWidth = GearIconBtn.ActualWidth;
            double canvasHeight = GearIconBtn.ActualHeight;

            Canvas.SetLeft(GearIconBtn, (canvasWidth - buttonWidth) / 2);
            Canvas.SetTop(GearIconBtn, canvasHeight - buttonHeight);

        }

but it does not seem to do anything

Here is my MouseDown event:

   private void GearIconBtn_MouseDown(object sender, MouseButtonEventArgs e)
        {
            IsOpenMenuSB = !IsOpenMenuSB;
            var openMenuSB = (Storyboard)Resources["OpenMenuSB"];

            if (IsOpenMenuSB)
            {
                openMenuSB.Begin();
                KeepGearIconBtnATCenterBottom();
            }
            else
            {
                openMenuSB.Stop();
            }
        }

It moves differently depending on how it is set up

So this :

  <Grid x:Name="MainVideoControls"   MouseEnter="MainVideoControls_MouseEnter">
        <Rectangle  Fill="Black" />
        <MediaElement x:Name="MediaPlayerTool" Height="auto" Width="auto"  Focusable="True"  PreviewKeyDown="MediaPlayerTool_PreviewKeyDown"   MediaOpened="VideoPlayerMe_MediaOpened" MediaEnded="MediaPlayerTool_MediaEnded">
            <MediaElement.Effect>
                <DropShadowEffect BlurRadius="15" Direction ="-90" Opacity="0.59" RenderingBias ="Quality" ShadowDepth ="2" Color ="DarkBlue" />
            </MediaElement.Effect>
        </MediaElement>
        <Grid x:Name="OtherVideoControls">
            <Grid.ColumnDefinitions >
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="auto" />

            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <Button x:Name="PreviousVideoButton"  ToolTip="Previous" Click="PreviousVideoButton_Click"  HorizontalAlignment="Left"  VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource PlayBackButtonStyle}" >
                <local:BackButton   Height="25"  Width="25"   />
            </Button>

            <Grid Grid.Column="1">
                <Path x:Name="Path"  HorizontalAlignment="Center" VerticalAlignment="Center"  Width="54" Height="54" Stretch="Fill" Fill="#BF8046CF" Data="F1 M 644.608,348C 644.608,374.509 624.45,393.333 597.941,393.333C 571.432,393.333 551.274,374.509 551.274,348C 551.274,321.491 571.432,300 597.941,300C 624.45,300 644.608,321.491 644.608,348 Z " />
                <local:Playbutton x:Name="PlayBtn2" Height="27" Width="27" HorizontalAlignment="Center" VerticalAlignment="Center"  PlayState="Stop"  PreviewMouseLeftButtonUp="PlayBtn_PreviewMouseLeftButtonUp" />
            </Grid>

            <Label x:Name="DisplayNameLbl"  Grid.ColumnSpan="2"  Grid.Column="0"  Grid.Row="3"   VerticalAlignment="Bottom"  HorizontalContentAlignment="Left" Foreground="White" FontSize="20" />
            <Slider x:Name="VideoPositionControl" Style="{StaticResource Horizontal_Slider}"  Grid.Row="1"  Grid.ColumnSpan="3"  VerticalAlignment="Bottom"  FontSize="16"   ValueChanged="VideoPositionControl_ValueChanged" PreviewMouseLeftButtonDown="VideoPositionControl_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="VideoPositionControl_PreviewMouseLeftButtonUp"   />
            <Button x:Name="NextVideoButton" HorizontalAlignment="Right" VerticalAlignment="Center"   Grid.Column="3"   Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource PlayBackButtonStyle}" Click="NextVideoButton_Click" >
                <local:BackButton   Height="25"  Width="25"  RenderTransformOrigin="0.5,0.5"  >
                    <local:BackButton.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="-1"/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </local:BackButton.RenderTransform>
                </local:BackButton>
            </Button>

            <!-- ... -->
            <Grid Grid.Row="3"  Height="auto"  Width="auto" Grid.Column="1" Grid.RowSpan="3"  HorizontalAlignment="Center" VerticalAlignment="Bottom"  >
                <Grid.ColumnDefinitions >
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                </Grid.ColumnDefinitions>
                <Rectangle x:Name="ToolBarRec"  Grid.Column="0"  Height="30" Grid.ColumnSpan="12" Fill="#FF3F3D3D" RadiusX="4.167" RadiusY="4.167"  VerticalAlignment="Bottom"  >
                    <Rectangle.Effect>
                        <DropShadowEffect/>
                    </Rectangle.Effect>
                </Rectangle>
                <local:Playbutton x:Name="PlayBtn1" Height="25"  Width="25"  Grid.Column="0"  PlayState="Stop"  PreviewMouseLeftButtonUp="PlayBtn_PreviewMouseLeftButtonUp" VerticalAlignment="Bottom" />
                <Label x:Name="DisplayMediaTimespanLbl"   Grid.Column="1"     Foreground="White" FontSize="20" VerticalAlignment="Bottom" />
                <local:VolumeScrollBar  x:Name="VolumeSld"   Grid.Column="2" Width="auto"  Grid.ColumnSpan="3" OnVolumeChanged="VolumeSld_OnVolumeChanged"  Margin="0,0,10,0" VerticalAlignment="Bottom" />

                <Canvas Grid.Column="5" Grid.Row="0"   VerticalAlignment="Bottom"  Margin="0,0,35,0">
                    <local:ForwardBackwardControl x:Name="SpeedControl" Canvas.Left="0" Canvas.Bottom="0" ToolTip="SpeedBack Control" />
                </Canvas>
                
                <Button x:Name="ReplayAllVideosBtn"  Grid.Column="6"   Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource PlayBackButtonStyle}" Click="ReplayAllVideosBtn_Click" Margin="0,0,10,0" VerticalAlignment="Bottom" >
                    <local:RepeatPlaylistIcon Height="25" Width="25"  />
                </Button>
                <Button x:Name="SingleRepeatVideosBtn"   Grid.Column="7"   Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource PlayBackButtonStyle}" Click="SingleRepeatVideosBtn_Click" VerticalAlignment="Bottom" Margin="0,0,10,0">
                    <local:SingleRepeatIcon Height="25" Width="25"  />
                </Button>
                <HC1:MultipleImageSnapButton   x:Name="FrameGrabberbtn"  NumberOfImages = "1"    Grid.Column="8"  Height = "25" Width = "25" PreviewMouseUp="FrameGrabberbtn_PreviewMouseUp"  NumberOfImageseChanged="FrameGrabberbtn_NumberOfImageseChanged" VerticalAlignment="Bottom" Margin="0,0,10,0"   />
                <HC:TrashcanButton x:Name="Deletebtn"  FillColor="White" FillBarColor="Blue"  Grid.Column="9"   Height="25"   Width="25" PreviewMouseUp="Deletebtn_PreviewMouseUp" ToolTip="Delete current media file"  HorizontalAlignment="Center"   VerticalAlignment="Bottom" Margin="0,0,10,0" />
            </Grid>

            <local:ForwardBackwardControl x:Name="SpeedControl2" Grid.Row="0" Grid.Column="1"   Grid.RowSpan="3"  ToolTip="SpeedBack Control"  VerticalAlignment="Bottom"  />
        </Grid>

    </Grid>

SpeedControl2 move up

but SpeedControl moves to the right

IDK why