按钮动画问题

Question

我问了一个关于添加TabItem的上一个问题，我被告知使用Buttons会更好，只是动画给他们。所以我今天继续研究这个问题，但我遇到了一个问题。

这是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"，但这不起作用。