Question

我承认我是Silverlight的新手，但你必须从某个地方开始。

这是我的问题：我有XAML代码，可以在我的网页上创建一个Canvas。我动态地（在后面的代码中）创建了24个较小的画布对象（称为tile），并且可以在较大的画布内正确定位和移动这些tile。我想现在为瓷砖的运动设置动画，而不是让它们从一个位置“跳跃”到另一个位置。在XAML内部，我为其中一个磁贴创建了一个Storyboard和一个DoubleAnimation。单击DoubleAnimation / Storyboard中指定的特定磁贴可生成正确的动画。现在我希望能够通过代码隐藏中的代码动态更改XAML中动画的属性。具体来说，我想更改“From”，“To”，“Storyboard.TargetName”和“Storyboard.TargetProperty”值。这将允许我使用单个动画来控制所有24个图块的移动（一次一个）。下面是XAML，下面是我试图正常工作的代码。

XAML

<Canvas x:Name="LayoutRoot" Background="BlanchedAlmond" Height="700" Width="1405">
    <Image Source="bkcolor.png" Canvas.Left="600" Height="500" Width="500" Stretch="UniformToFill" Canvas.Top="100"></Image>
    <Canvas x:Name="myContainer" Canvas.Left = "50" Canvas.Top="100">
        <!---->
        <Canvas.Resources>
            <Storyboard x:Name="MoveTileAnimation">
                <DoubleAnimation x:Name="myDoubleAnimation"
                    From="400" To="300" 
                    Duration="00:00:1" 
                    Storyboard.TargetName="Tile23"
                    Storyboard.TargetProperty="(Canvas.Top)">
                    <DoubleAnimation.EasingFunction>
                        <PowerEase Power="3" EasingMode="EaseInOut" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </Canvas.Resources>
        <!---->
    </Canvas>
</Canvas>

代码背后的

C＃代码

private void MainPage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Canvas c = sender as Canvas;
    // New location is specified by nx, ny
    int nx = 200;
    int ny = 300;

    // Old Location
    int ox = 200;
    int oy = 200;

    // "Tile Moves Up" -- Other case removed for clarity

    //----------------------------------------------
    // Code below is known to work correctly
    //----------------------------------------------
    // Set the "To" and "From" properties
    myDoubleAnimation.From = Convert.ToDouble(oy);
    myDoubleAnimation.To = Convert.ToDouble(ny);


    //----------------------------------------------
    // Code below does not function correctly
    //----------------------------------------------
    MoveTileAnimation.SetValue(Storyboard.TargetNameProperty, c.Name);  // c.Name is the
                                                                    // name of the tile
                                                                    // that was clicked
    MoveTileAnimation.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath(Canvas.TopProperty)); // Need to switch between Top and Left
    //----------------------------------------------


    MoveTileAnimation.Begin(); // This works if the TargetNameProperty in
                               // the XAML matches the Tile Name

    //----------------------------------------------
    // Code below is known to work correctly
    //----------------------------------------------
    // Move the Tile to its new position
    tileCanvas[nCanvasID].SetValue(Canvas.TopProperty, Convert.ToDouble(ny));
    tileCanvas[nCanvasID].SetValue(Canvas.LeftProperty, Convert.ToDouble(nx));
}

我不想创建96个故事板，以便能够在4个方向中的每个方向移动24个图块。如果我可以更改“TargetNameProperty”工作，那么减少到4个故事板。如果我也可以改变“TargetPropertyProperty”的工作，我就完成了一个故事板。

提前致谢，约翰

Answer 1

此链接指向包含可重复使用的故事板代码的文章。这是一篇旧文章，但今天仍然适用 - 也许这些课程会帮助你。 http://www.codeproject.com/Articles/24543/Creating-and-Reusing-Dynamic-Animations-in-Silverl

在C＃代码隐藏中动态更改Storyboard（在XAML中创建）的属性

XAML

C＃代码

1 个答案: