如何在C＃中向頁面資源添加一個故事板動畫，然后稍后再次調用它？

Question

HubPage是我的登錄頁面。 在Hubpage.xaml上，我有一個3x3的網格，其中包含一個矩形，即我所說的“單元”。 在HubPage.xaml.cs中，尤其是在HubPage（）構造函數中，我為每個單元創建一個故事板：

CreateStoryboardForCell("Column0Row0");
CreateStoryboardForCell("Column0Row1");
...
CreateStoryboardForCell("Column2Row2");

我想將一個故事板添加到Page.Resources中，通常我會在XAML中這樣做，但是我正在嘗試從C＃中進行操作。 現在，這是CreateStoryboardForCell實現：

    private void CreateStoryboardForCell(string cellName)
    {
        // Create two DoubleAnimations, one for scaleX and one for scaleY, and set their properties.
        Duration duration = new Duration(TimeSpan.FromSeconds(0.2));
        DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
        DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
        myDoubleAnimation1.Duration = duration;
        myDoubleAnimation2.Duration = duration;

        Storyboard sb = new Storyboard();
        sb.Duration = duration;

        sb.Children.Add(myDoubleAnimation1);
        sb.Children.Add(myDoubleAnimation2);

        // Set the targets of the animations
        Storyboard.SetTarget(myDoubleAnimation1, Column0Row0);
        Storyboard.SetTarget(myDoubleAnimation2, Column0Row0);

        // Set the attached properties of ScaleX and ScaleY
        // to be the target properties of the two respective DoubleAnimations
        Storyboard.SetTargetProperty(myDoubleAnimation1, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");
        Storyboard.SetTargetProperty(myDoubleAnimation2, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");
        myDoubleAnimation1.To = 15;
        myDoubleAnimation2.To = 22;

        // Make the Storyboard a resource.
        try
        {
            pageRoot.Resources.Add("story" + cellName, sb);
        }
        catch (Exception e)
        {
            Status.Text = "Error adding storyboard resource for cell" + cellName + ": " + e.Message;
        }
    }

pageRoot來自Hubpage.xaml：頁面x：Name =“ pageRoot”，等等。添加資源時沒有出現異常，但是設置斷點時看不到資源，因此我假定它已成功添加，因為我可以看到計數在增加，並且沒有引發異常。

繼續，我為每個列單元格都有一個單擊處理程序，在這里我可以推斷行和列號，並嘗試啟動早先添加到頁面資源中的相應故事板。 這是代碼：

    private void Column1_Cell_Click(object sender, RoutedEventArgs e)
    {

        Rectangle rect = sender as Rectangle;
        int x = (int)rect.GetValue(Grid.RowProperty);
        int y = (int)rect.GetValue(Grid.ColumnProperty);
        string storyboardName = "storyColumn" + y + "Row" + x;
        Storyboard storyboard = (Storyboard)FindName(storyboardName);

        storyboard.Begin();
    }

但是FindName調用始終返回一個空的故事板。 我在這里想念什么？

Answer 1

請嘗試使用此代碼。我一直使用此代碼來查找情節提要。

這是代碼：

FrameworkElement element = new FrameworkElement();
Storyboard sb=new Storyboard ();
sb = element.FindResource("Please write here Storyboard Key") as Storyboard;
sb.Begin(target element name , true);

Answer 2

我已經為您編寫了此代碼。希望對您有所幫助

這是代碼：

   <Grid>       
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="Column0Row0"/>
        <ColumnDefinition x:Name="Column0Row1"/>
        <ColumnDefinition x:Name="Column0Row2"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Rectangle Fill="Pink" x:Name="rectangle" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"/>
    <Rectangle Grid.Column="1" Grid.Row="1" Fill="Coral" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"/>
    <Rectangle Grid.Column="2"  Grid.Row="2" Fill="Orange" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"/>
</Grid>

背后的代碼：

private void CreateStoryboardForCell(Rectangle target)
    {
        ScaleTransform trans = new ScaleTransform();
        target.RenderTransform = trans;
        DoubleAnimation anim = new DoubleAnimation(1, 2, TimeSpan.FromMilliseconds(1000));
        trans.BeginAnimation(ScaleTransform.ScaleXProperty, anim);
        trans.BeginAnimation(ScaleTransform.ScaleYProperty, anim);

    }

    private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        CreateStoryboardForCell((Rectangle)sender);            
    }     

Answer 3

如果BeginStoryboard在WinRT中不支持，則可以使用以下代碼。我在codedehind中創建了動畫。也許您可以解決此類問題；我對此問題進行了一些研究。 我嘗試了這段代碼。

這是代碼：

private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Storyboard storyboard = new Storyboard();

        ScaleTransform scale = new ScaleTransform(1.0, 1.0);
        animatedRectangle.RenderTransformOrigin = new Point(0.5, 0.5);
        animatedRectangle.RenderTransform = scale;

        DoubleAnimation scaleAnimation1 = new DoubleAnimation(1, 2, TimeSpan.FromMilliseconds(1000));
        DoubleAnimation scaleAnimation2 = new DoubleAnimation(1, 2, TimeSpan.FromMilliseconds(1000));
        storyboard.Children.Add(scaleAnimation1);
        storyboard.Children.Add(scaleAnimation2);

        Storyboard.SetTargetProperty(scaleAnimation1, new PropertyPath("RenderTransform.ScaleX"));
        Storyboard.SetTargetProperty(scaleAnimation2, new PropertyPath("RenderTransform.ScaleY"));


        Storyboard.SetTarget(scaleAnimation1, animatedRectangle);
        Storyboard.SetTarget(scaleAnimation2, animatedRectangle);

        storyboard.Begin();         

    }