使用Silverlight 3 中的PlaneProjection实现3D效果

  Silverlight 3中加入许多新的特性，其中最令人激动的新特性之一就是Plane Projection，利用它可以使任何UIElement元素在3D空间中旋转，实现简单的3D旋转效果。
下面是简单的实现一个图片在3D空间中沿着Y轴旋转的效果，当然只需要简单修改一下即可实现沿着X轴和Z轴旋转的效果。

< UserControl x:Class ="PlaneProjDemo.MainPage"
     xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
     xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
     Width ="480" Height ="360" >
     < Grid x:Name ="LayoutRoot" Background ="White" >
         < StackPanel >
             < Image Margin ="15,5,15,5" x:Name ="imageFlip" Width ="470" Height ="350" >
                 < Image.Projection >
                     < PlaneProjection x:Name ="Rotator" />
                 </ Image.Projection >
             </ Image >
         </ StackPanel >
     </ Grid >
</ UserControl >

 

 

using ... System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.Windows.Threading;

namespace PlaneProjDemo
... {
    public partial class MainPage : UserControl
    ...{
        private double _increment = 2.0;
        private BitmapImage _front = new BitmapImage(new Uri("Images/Front.jpg", UriKind.Relative));
        private BitmapImage _back =  new BitmapImage(new Uri("Images/Back.jpg", UriKind.Relative));
        private DispatcherTimer _timer = new DispatcherTimer();
        private double _angle = 0.0;
        private bool _isfront = true;

        public MainPage()
        ...{
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
            _timer.Interval = TimeSpan.FromMilliseconds(50);
            _timer.Tick += new EventHandler(_timer_Tick);
        }

        void MainPage_Loaded(object sender, EventArgs e)
        ...{
            _timer.Start();
        }

        void _timer_Tick(object sender, EventArgs e)
        ...{
            _angle -= _increment;

            if (_angle < 0.0)
                _angle += 360.0;
            
            if (_angle == 270.0)
            ...{
    imageFlip.Source = _isfront ? _back : _front;
                _isfront = !_isfront;
                _angle = 90.0;
            }

            Rotator.RotationY = _angle;
        }
    }
}

 

本效果的DEMO下载地址：

http://download.youkuaiyun.com/source/2350880

 

下面给个MSDN的控件连接把，里面每个控件的效果属性，都得到了很好的演示：

http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=GlobalOffsetAnimation_1