同时缩放和移动项目

时间:2014-01-21 02:40:13

标签: wpf silverlight windows-phone-8

我正在尝试创建一个可以将元素缩放并移动到特定位置的故事板。基本的想法是有一排6张小卡,点击一张将放大到更详细的图像,从小卡的位置和大小开始,最后是一张大的中心卡。

卡片不会在我指定的X,Y位置结束,我相信因为scaletransform也在移动它。我看到矩阵变换可能有效,但至少在WP8中无法使其工作。这是我的原始代码,卡是用于起始位置的小卡片,项目是要缩放和移动的大型详细卡片

    private void ZoomIn(UIElement item, UIElement card)
    {

        // setup
        var _Scale = new ScaleTransform
        {
            ScaleX = 1,
            ScaleY = 1,
            CenterX = item.RenderSize.Width / 2,
            CenterY = item.RenderSize.Height / 2,   
        };

        var transform = card.TransformToVisual(Application.Current.RootVisual as FrameworkElement);
        Point absolutePosition = transform.Transform(new Point(0, 0));

        var _Translate = new TranslateTransform();

        var _Group = new TransformGroup();
        _Group.Children.Add(_Scale);
        _Group.Children.Add(_Translate);
        item.RenderTransform = _Group;

        // animate
        var _Storyboard = new Storyboard { };

        // scale X
        var _ScaleAnimateX = new DoubleAnimation
        {
            To = 1.0,
            From=0.5,
            Duration = TimeSpan.FromSeconds(.25)
        };
        _Storyboard.Children.Add(_ScaleAnimateX);
        Storyboard.SetTarget(_ScaleAnimateX, _Scale);
        Storyboard.SetTargetProperty(_ScaleAnimateX,
            new PropertyPath(ScaleTransform.ScaleXProperty));

        // scale Y
        var _ScaleAnimateY = new DoubleAnimation
        {
            To = 1.0,
            From = 0.5,
            Duration = TimeSpan.FromSeconds(.25)
        };
        _Storyboard.Children.Add(_ScaleAnimateY);
        Storyboard.SetTarget(_ScaleAnimateY, _Scale);
        Storyboard.SetTargetProperty(_ScaleAnimateY,
            new PropertyPath(ScaleTransform.ScaleYProperty));


        // translate (location X)
        var _TranslateAnimateX = new DoubleAnimation
        {
            From = absolutePosition.X,
            To = 300,
            Duration = TimeSpan.FromSeconds(.25)
        };
        _Storyboard.Children.Add(_TranslateAnimateX);
        Storyboard.SetTarget(_TranslateAnimateX, _Translate);
        Storyboard.SetTargetProperty(_TranslateAnimateX,
            new PropertyPath(TranslateTransform.XProperty));

        // translate (location Y)
        var _TranslateAnimateY = new DoubleAnimation
        {
            From = absolutePosition.Y,
            To = 40,
            Duration = TimeSpan.FromSeconds(.25)
        };

        _Storyboard.Begin();
    }

1 个答案:

答案 0 :(得分:0)

我找到了解决方案,带有缩放卡的面板没有水平/垂直对齐,我将其设置为左/顶部,使用了CenterX / CenterY为0,并且移动现在像素完美