Question

我有画布。在画布中我有3个网格。我无法为它们制作动画。我想用网格制作幻灯片。

这是我的xamll代码：

<Canvas x:Name="canvas1" Width="200" Height="300" Background="AliceBlue">
        <Grid Canvas.Left="0" Canvas.Right="200" Background="Red" Name="grid1">
        </Grid>
        <Grid Canvas.Left="200" Canvas.Right="400" Background="Blue" Name="grid2">
        </Grid>
        <Grid Canvas.Left="400" Canvas.Right="600" Background="Black" Name="grid3">
        </Grid>
        <Button Panel.ZIndex="1" Width="50" Height="50" Content="NEXT" Click="Button_Click">
        </Button>
    </Canvas>

这是我的c＃代码：

private void Button_Click(object sender, RoutedEventArgs e)
        {
            TranslateTransform trans = new TranslateTransform();
            TranslateTransform trans2 = new TranslateTransform();
            grid1.RenderTransform = trans;
            grid2.RenderTransform = trans2;
            Storyboard storyboard = new Storyboard();
            DoubleAnimation da = new DoubleAnimation();
            DoubleAnimation da1 = new DoubleAnimation();

            da = new DoubleAnimation(200, 0, TimeSpan.FromSeconds(1));
            da1 = new DoubleAnimation(0, -200, TimeSpan.FromSeconds(1));


            Storyboard.SetTarget(da1, grid1);
            Storyboard.SetTargetProperty(da1, new PropertyPath("RenderTransform.(TranslateTransform.X)"));

            Storyboard.SetTarget(da, grid2);
            Storyboard.SetTargetProperty(da, new PropertyPath("RenderTransform.(TranslateTransform.X)"));

            storyboard.Children.Add(da1);
            storyboard.Children.Add(da);

            //this.BeginStoryboard(storyboard, HandoffBehavior.SnapshotAndReplace, true);
            FrameworkElement sd = new FrameworkElement();
            sd.BeginStoryboard(storyboard, HandoffBehavior.Compose, true);
        }

目前，我想仅为2个网格制作动画。我按下按钮，什么也没发生。我需要从代码中设置动画。

Answer 1

我是怎么做到的：

在“画布”外面按下按钮并将“画布”放置在一个网格中，该网格具有“画布”内对象大小的剪辑，我将200x200设置为示例：

<Grid Width="200" Height="200">
    <Grid.Clip>
        <RectangleGeometry  Rect="0,0,200,200"/>
    </Grid.Clip>
    <Canvas x:Name="canvas1"  Background="AliceBlue" >
        <Canvas.RenderTransform>
            <TranslateTransform/>
        </Canvas.RenderTransform>
        <Grid Canvas.Left="0" Canvas.Right="200" Width="200" Height="200" Background="Red" Name="grid1">
        </Grid>
        <Grid Canvas.Left="200" Canvas.Right="400" Width="200" Height="200" Background="Blue" Name="grid2">
        </Grid>
        <Grid Canvas.Left="400" Canvas.Right="600" Width="200" Height="200" Background="Black" Name="grid3">
        </Grid>
        <Grid Canvas.Left="400" Canvas.Right="600" Width="200" Height="200" Background="Orange" Name="grid4">
        </Grid>
    </Canvas>
    <Button VerticalAlignment="Bottom" Width="50" Height="50" Content="NEXT" Click="Button_Click">
    </Button>
</Grid>

现在是按钮事件的逻辑

 private void Button_Click(object sender, RoutedEventArgs e)
    {
        var offsetX = (canvas1.RenderTransform as TranslateTransform).X;
        var finalX = offsetX - 200;
        Storyboard sb = new Storyboard();

        var da = new DoubleAnimation(offsetX, finalX, TimeSpan.FromSeconds(1));

        Storyboard.SetTarget(da, canvas1);
        Storyboard.SetTargetProperty(da, new PropertyPath("RenderTransform.(TranslateTransform.X)"));

        sb.Children.Add(da);
        sb.Begin();
    }

我认为很容易理解，只有一个故事板。我希望这是你案件的解决方案。

如何在画布中为网格设置动画

1 个答案: