Design Based DOT NET

好讀書，不求甚解，每有會意，便欣然忘食。http://zdd.me/geeks

2009-06-20

使用Silverlight 3 中的PlaneProjection實現3D效果

Silverlight 3中加入许多新的特性，其中最令人激动的新特性之一就是Plane Projection，利用它可以使任何UIElement元素在3D空间中旋转，实现简单的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;
        }
    }
}

示例代码下载

為了你的幸福，我一直在努力！