如何在UWP的Button Click事件中启动C#动画？

你的代码存在三个关键错误，直接导致了“组件未安装”异常，逐个修正即可解决：

错误1：动画目标名称不匹配 #

Storyboard中指定的Storyboard.TargetName="miButton"与Button实际的x:Namemiboton不一致，系统找不到目标元素，触发异常。

错误2：使用了无效的动画属性 #

Button放在Grid容器中，(Canvas.Left)是Canvas的附加属性，仅当Button作为Canvas直接子元素时才生效。Grid内的元素位移应使用TranslateTransform，这是通用的元素位移方案。

错误3：Storyboard位置导致后台无法访问 #

你将Storyboard放在Button.Resources中，这种情况下后台代码无法直接通过x:Name访问该资源，需调整其位置。

修正后的完整代码 #

XAML代码

<Page
    x:Class="App3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="800" Height="800">

    <Page.Resources>
        <LinearGradientBrush x:Key="mibrush">
            <GradientStop Color="Red" Offset="0"/>
            <GradientStop Color="Black" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="btnbrush">
            <GradientStop Color="Yellow" Offset="0"/>
            <GradientStop Color="Orange" Offset="1"/>
        </LinearGradientBrush>

        <!-- 将Storyboard移到Page.Resources中，后台可直接通过x:Name访问 -->
        <Storyboard x:Name="buttonAnimation">
            <!-- 目标改为Button的TranslateTransform，动画属性为X轴位移 -->
            <DoubleAnimation 
                Storyboard.TargetName="btnTransform" 
                Storyboard.TargetProperty="X" 
                To="200" 
                Duration="0:0:5" 
                AutoReverse="True"/>
        </Storyboard>
    </Page.Resources>

    <Grid Background="{StaticResource mibrush}" BorderThickness="10">
        <!-- 给Button添加TranslateTransform用于位移动画 -->
        <Button x:Name="miboton" Content="Button" Click="Button_Click" Height="150" Margin="444,598,0,0" Width="200">
            <Button.RenderTransform>
                <TranslateTransform x:Name="btnTransform"/>
            </Button.RenderTransform>
        </Button>
    </Grid>
</Page>

C#代码

namespace App3
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs args)
        {
            buttonAnimation.Begin();
        }
    }
}

另一种简化方案（无需XAML Storyboard） #

如果不想在XAML中定义Storyboard，可直接在后台代码中创建并启动动画：

private void Button_Click(object sender, RoutedEventArgs args)
{
    // 创建位移变换
    var translateTransform = new TranslateTransform();
    miboton.RenderTransform = translateTransform;

    // 创建X轴位移动画
    var animation = new DoubleAnimation
    {
        To = 200,
        Duration = TimeSpan.FromSeconds(5),
        AutoReverse = true
    };

    // 设置动画目标和属性
    Storyboard.SetTarget(animation, translateTransform);
    Storyboard.SetTargetProperty(animation, "X");

    // 创建Storyboard并启动
    var storyboard = new Storyboard();
    storyboard.Children.Add(animation);
    storyboard.Begin();
}

这种方式无需修改XAML资源部分，适合快速测试动画逻辑。

内容的提问来源于stack exchange，提问作者fjsantosaorin