Wpf 按钮动画问题

我问了一个关于添加一个

选项卡项的问题，我被告知使用
按钮
会更好，只需为它们添加动画即可。所以我今天继续研究这个问题，但我遇到了一个问题

这是我拥有的
XAML

<Button Height="43" HorizontalAlignment="Left" IsEnabled="True" IsHitTestVisible="True" Margin="363,309,0,519" Name="home_btn" VerticalAlignment="Stretch" Width="346" >
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Image Name="Normal" Source="Images/Normal1.png" />
                        <Image Name="Hover" Source="Images/Hover1.png" Opacity="0"/>
                        <Image Name="Pressed" Source="Images/view3.png" Opacity="0" Width="346" />
                    </Grid>
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="MouseDownTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimation Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Width" From="274" To="300" Duration="00:00:00">
                            </DoubleAnimation>

                        </Storyboard>
                        <Storyboard x:Key="MouseUpTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>
                        <Storyboard x:Key="MouseEnterTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>
                        <Storyboard x:Key="MouseExitTimeLine">

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>
                    </ControlTemplate.Resources>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ButtonBase.IsPressed" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseDownTimeLine}"/>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseUpTimeLine}"/>
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseEnterTimeLine}"/>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseExitTimeLine}"/>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>



当我将鼠标悬停在第一个图像上时，它将触发第二个图像。这两者之间的区别只是颜色，所以这不是问题所在

当我点击按钮时，我想在方框旁边出现一个箭头（因此我需要画布变大），我在Photoshop中创建了我的图像，第三个图像变大了，但它不起作用，这就是发生的情况


正如你从第二张图片中看到的，我想从左边对齐，从右边出来。我尝试了
HorizontalAlignment=“Left”
，但这不起作用。
不确定“从左对齐，从右出来”在视觉上是什么意思，请给出一个您想要的示例，我们可以为您解决问题。但同时，我会抛弃这些图像，只使用xaml路径来保持它的整洁，避免额外的文件。StackPanel方向=水平是否有用？