(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Perspective 3D in Silverlight

(9 votes)
Nikolay Raychev
>
Nikolay Raychev
Joined Mar 28, 2008
Articles:   22
Comments:   58
More Articles
20 comments   /   posted on Mar 18, 2009
Categories:   General

This article is compatible with the latest version of Silverlight.

Introduction

A new feature in Silverlight is the Perspective Transforms. With its help you can simulate rotating an object in 3D space. Note that this is not a real 3D, Silverlight does not support 3D yet.

Overview

Let's start with a little demo: 


And let's describe the things step by step. You have an UIElement, in our situation an image. The X axis of the element is from left to right, the Y axis is going up and down and the Z axis is going in and out of the surface of the image.

If we want to rotate the image on the X axis we are just setting the RotationX of the UIElement.Projection as follows:


<Image x:Name="imgTarantula" Width="400" 
    HorizontalAlignment="Center" VerticalAlignment="Center"   
    Source="http://terraristic.net/photos/Acanthoscurria_geniculata/Acanthoscurria_geniculata_1.jpg">  
    <Image.Projection>
        <PlaneProjection RotationX="45"></PlaneProjection>
    </Image.Projection>
</Image> 

And we have the following result:

Similarly if we want to rotate the image on the Y axis we are setting the RotationY:

<Image.Projection> 
    <PlaneProjection RotationY="45"></PlaneProjection> 
</Image.Projection> 

The result:



And for the Z axis - the RotationZ:

<Image.Projection> 
    <PlaneProjection RotationZ="45"></PlaneProjection> 
</Image.Projection> 

The result:



You can also combine the rotations:

<Image.Projection> 
    <PlaneProjection RotationX="45" RotationY="45"></PlaneProjection> 
</Image.Projection> 

The result:


You can create an animation by just adding a Storyboard with the help of which you can control the Projection angles. In the demo above I used the following Storyboard:

<UserControl x:Class="PerspectiveTransforms.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
    Width="500" Height="400">  
    <UserControl.Resources> 
        <Storyboard x:Name="sbRotateImage">
            <DoubleAnimation BeginTime="00:00:00"
              Storyboard.TargetName="imgTarantula"
              Storyboard.TargetProperty="(UIElement.Projection).(RotationX)"
              RepeatBehavior="Forever" AutoReverse="True"
              From="45" To="-45">
            </DoubleAnimation> 
        </Storyboard> 
    </UserControl.Resources> 
    <Grid x:Name="LayoutRoot">  
        <Image x:Name="imgTarantula" Width="400" 
            HorizontalAlignment="Center" VerticalAlignment="Center"   
            Source="http://terraristic.net/photos/Acanthoscurria_geniculata/Acanthoscurria_geniculata_1.jpg">  
            <Image.Projection> 
                <PlaneProjection RotationX="45"></PlaneProjection> 
            </Image.Projection> 
        </Image> 
    </Grid> 
</UserControl> 

Code behind:

public MainPage()  
{  
    InitializeComponent();  
 
    this.sbRotateImage.Begin();  

There are several more sets of parameters:

Center of Rotation parameters:

  • CenterOfRotationX
  • CenterOfRotationY
  • CenterOfRotationZ

The values of the first two parameters range from 0 to 1 and are relative to the width and height of the UIElement. The value of the last parameter is absolute. The default values of the CenterOfRotationX and CenterOfRotationY are 0.5 while the default value of the CenterOfRotationZ is 0.

Let's demonstrate them with an example. If you don't set any of these parameters and you are rotating by the Z axis the image rotates as if you have pinned a photo in the center and are rotating this photo around the pin. If you want to change the location of the pin you can use the CenterOfRotationX and CenterOfRotationY. By setting both of them to 0 you move the pin to the upper left corner:

<Image.Projection> 
    <PlaneProjection RotationZ="45"   
        CenterOfRotationX="0" CenterOfRotationY="0" 
        LocalOffsetZ="0" GlobalOffsetZ="0" > 
    </PlaneProjection> 
</Image.Projection> 

By analogy if you want to change the center of rotation while rotating by the X axis you can set the CenterOfRotationY and CenterOfRotationZ parameters. And if you want to change the center of rotation while rotating by the Y axis you can set the CenterOfRotationX and CenterOfRotationZ parameters.

Local offset parameters:

  • LocalOffsetX
  • LocalOffsetY
  • LocalOffsetZ

Global offset parameters:

  • GlobalOffsetX
  • GlobalOffsetY
  • GlobalOffsetZ

Think about the global frame of reference as described in the beginning: the X axis is from left to right, the Y axis is going up and down and the Z axis is going in and out of the surface of the screen. Imagine that every UIElement has its own local frame of reference which is the same as the global one when no rotation is applied. When the object rotates its local frame of reference rotates with the object. The local offsets are offsets by the local frame of reference while the global ones are by the global one.

Conclusion

With the use of Perspective Transforms you can easily simulate some 3D effects. Any comments are welcome.


Subscribe

Comments

  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by thomas on Mar 20, 2009 12:11
    will be the projection feature also be available for the next wpf version?
  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by Fallon Massey on Mar 24, 2009 14:42
    This appears to mean that we don't have to do texture mapping.

    Just put the texture into the image, and apply the transform?  Is it that easy?
  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by funny on Apr 05, 2009 10:56
    good job, I have a problem maybe you can help me. If  I set an element with it's default RotateY property to 90 and it's default LocalOffsetZ property to 100, then I want it roate around x-axis, how to do?It doesnot roate as I espect. can you help me?very thanks
  • nikolayraychev

    RE: Perspective 3D in Silverlight 3


    posted by nikolayraychev on Apr 06, 2009 05:05

    thomas, in WPF you can take advantage of the real 3D so you do not need to use the projections.

    Fallon Massey, yes, you don't need to use texture mappings any more.

    funny, if you explain in details what's your expected behavior I'll try to help you.

  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by Rob on Jun 30, 2009 17:15
    Can't install silverlight on my machine.... SOS from MS
  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by Mohamed Soumare on Oct 30, 2009 20:21
    Excellent tutorial
  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by John on Mar 25, 2010 08:25

    hi for example i want to give a property to image ; projection rotationy=45

     

    how can i give it with c# codes?

  • nikolayraychev

    RE: Perspective 3D in Silverlight 3


    posted by nikolayraychev on Apr 15, 2010 12:21

    Hi John,

    Try this code:

    this.imgTarantula.Projection = new PlaneProjection();
    this.imgTarantula.Projection.SetValue(PlaneProjection.RotationYProperty, (double)45);
  • -_-

    Demo Link???


    posted by Saminathan on May 21, 2010 09:45

    where is the live demo link..?

    Suggestion : Better to place at the top..

  • -_-

    Demo Link???


    posted by Saminathan.P on May 21, 2010 09:47
    where?
  • nikolayraychev

    RE: Perspective 3D in Silverlight 3


    posted by nikolayraychev on May 21, 2010 10:15

    Hi Saminathan.P,

    The demo is in the article but you need the proper version of Silverlight installed (At least Silverlight 3).

  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by Muhammad Ravoof on Jun 07, 2010 14:34
    Nice to see this.its realy amazing to watch this
  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by Guy on Jan 28, 2011 17:23
    Spiders...  Ick.  Hate'em.
  • -_-

    RE: Perspective 3D in Silverlight


    posted by Kalashnikov on Apr 03, 2011 11:07

    Guys try these.. 

    http://kalashnikovtechnoblogs.blogspot.com/2011/04/creating-3d-charts-using-silverlight-3.html

  • malihtongtong2000

    Re: Perspective 3D in Silverlight


    posted by malihtongtong2000 on Feb 14, 2015 15:06
    I am really impressed by reading this article. In future, you should be giving information about it more. I must have to admire you for this extra ordinary piece of work. kredit Honda Mobilio Tangerang
  • Cheryl

    Re: Perspective 3D in Silverlight


    posted by Cheryl on Apr 29, 2015 13:47

    Mau info toko tas online di Bandung yang menjual berbagai macam tas untuk keperluan wanita dan anak-anak seperti tas-tas wanita yang branded dari berbagai merek terkenal seperti Louis Vuitton, Prada, Brussels, Furla, Chanel, Hermes, dan banyak lagi tas branded wanita lainnya dengan bermacam model seperti dompet, slingbag, handbag dan tote bag, yang trendy dengan harga yang terjangkau? Silahkan cek di Bee Bagshop grosir tas online di Bandung yang menjual tas-tas dengan moel dan warna yang bervariasi dengan harga yang murah. Selain tas wanita, kami juga menjual tas sekolah anak model selempang dan ransel yang juga branded tiruan seperti jansport dan kipling dengan banyak variasi model dan warna, dijamin putra-putri anda menyukainya.

    Bagi yang ingin merawat kulit wajah tanpa harus repot dan mahal, simak tips kecantikan berikut yang mudah dan murah. Coba Sabun Amoorea. Manfaat sabun ajaib amoorea ini diantaranya untuk berbagai permasalahan kulit anda, seperti jerawat, scars (bekas jerawat), mengencangkan kulit, membuat kulit tampak lebih cerah dan segar, mengatasi lingkar hitam di bawah mata (mata panda), dll. Untuk melihat review sabun amoorea ini klik di sini. Simak juga testimoni yang sudah menggunakan sabun ini, simak selengkapnya. Meski harga sabun amoorea ini cukup terjangkau, produk ini aman, karena terbuat dari 100% bahan alami dan sudah ada ijin dari BPOM sehingga anda tidak perlu khawatir dan ragu memakainya. Jika aman (tidak berbahaya) apakah memakai sabun amoorea ada efek sampingnya? Reaksi apa yang timbul saat pertama menggunakannya? Simak info lengkapnya di sini.

    How To Get Rid Of Acne and Scars site generally tell about  tips for beauty and health skin, and especially tell anything about acne, myths, acne and scars treatments , not only on your face (including acne and scars on your body such as chest and back)which may help you to war against acne and the scars to leaves on your face and body (back and chest), through naturally, home remedies, and medical treatment. Some people believe that natural treatment is most safe. But its seems would take time longer then medical treatment. In my oppinion, using medical treatment is more effective and you'll see the result faster. To find what the best treatment for your acne, better you understand what causes of acne. The following are some factors which can cause acne: Hormones, diet, stress, medication, clothing, environment factors, genes, and cosmetics. For back or chest acne cases, it may caused by your tight clothes. To get rid of acne on back or chest, it's good to wear synthetic loose clothing, such as cotton linen, to prevent excessive rubbing and irritation on the skin. Another treatment that can help you to get rid of back or chest acne is keep your body always clean, with take a bath regularly, preferably with an anti-bacterial soap or a salicylic acid-based cleanser is highly recommended. When acne goes, it will leaves behind the red on skin, and seems impossible to heal it fast overnight. So, it would be better to do something which may offer some remarkable effects on the redness from acne. If you choose naturally treatment,  just take a cube of ice, garlic, or lemon juice mixed with rose water, choose one of them, then apply to your reddish part of your face for a while. Do this continously and measured, then see the result. Below this, some good habits which may help you to get rid of acne scars naturally and fast are: first, drinking lots of water to makes your skin well hydrated, and finally make you skin regenerate faster.  Second, eat the food that containing much the essential vitamins and mineral to help repairing scars skin from the inside. Third, naturally treatment to get rid of acne scar, by applying aloe vera on scars, may help to avoid more scarring, soothe inflamation, and make your skin keep smooth. Fourth, treat your acne scars with natural ingredient, tomato. Its containing much vitamin A, which very efficient in repairing scars skin.  If you want to get rid of acne scars ons faster than naturally or home remedies treatments, using the latest product of technology, such as laser treatment and chemical peeling, or even you can choose microdermabration that guaranteed more effective than other treatments.

    Ada banyak bermacam permasalahan kulit di wajah, salah satu yang paling menggangu adalah jerawat, apalagi jika yang muncul adalah jerawat batu yang ukurannya besar dan menyebabkan rasa sakit. Solusi mengenai berbagai cara menghilangkan jerawat batu ini banyak sekali ditemukan, mulai dari pengobatan alami, maupun secara medis. Untuk kasus jerawat batu ini, sebaiknya anda bisa mengambil tindakan pengobatan yang tepat, untuk kasus jerawat batu disarankan langsung saja ambil perawatan medis, karena beresiko tinggi meninggalkan bekas berupa bopeng di wajah, jika salah menangani. Dengan langsung mengambil tindakan medis, setidaknya akan meminimalisasi resiko timbulnya scars bopeng di wajah yang mana scars jenis ini relatif sulit dihilangkan. Tidak seperti scars berupa noda/ flek hitam. meski tidak mudah juga, namun berkali-kali lipat jauh lebih mudah dan murah dibandingkan dengan mengatasi bopeng bekas jerawat. Perawatan alami yang dapat anda tempuh untuk mengobati jerawat ataupun scars yang berupa noda hitam/ flek bekas jerawat, anda dapat mencoba dengan menggunakan bahan alami misalnya jeruk nipis atau madu yang sudah sangat terkenal khasiatnya yang untuk kesehatan dan kecantikan kulit. Dengan perawatan alami, cenderung lebih aman, hanya saja untuk perawatan ini biasanya dibutuhkan waktu yang lebih lama serta ketelatenan untuk mengatasinya. FYI, Jeruk nipis ini yang tidak hanya dapat memudarkan flek hitam di wajah, tetapi juga dapat memutihkan dan mencerahkan kulit anda. Namun jika anda tidak memiliki cukup kesabaran, sebaiknya langsung saja konsultasi dengan dokter. Untuk menentukan metode pengobatan jerawat dan scars ini biasanya dokter akan melihat tingkat keparahan dari jerawat/ scars anda, bisa dengan pemberian obat minum seperti anti biotik, obat oles (salep), peeling, mikrodermabrasi, laser atau metode pengobatan lainnya. Namun sebelum anda memutuskan menggunakan salah satu treatment tersebut sebaiknya telah jelas terlebih dahulu mengenai efek samping yang ditimbulkan.

    Seiring dengan semakin tingginya pengguna internet dari waktu ke waktu, hal ini menciptakan peluang bisnis tersendiri. Diataranya peluang bejualan tas murah secara online, buatan konveksi-konveksi lokal. Di Bandung cukup banyak konveksi tas yang membuat beraneka macam tas dan dompet tiruan atau kw. Model-model dari tas wanita ini kebanyakan menjiplak tas dan dompet wanita dari brand terkenal luar negeri seperti merek-merek LV atau Louis Vuitton, Hermes, Chanel, Furla, dll yang sangat terkenal. Tas tiruan seperti ini familiar disebut tas replika/ kw, dengan beraneka tingkatanya: Kw I, Kw II, dll. Tas-tas wanita branded ini di Bee Bagshop dijual dengan harga yang bevariasi antara 66-300 ribuan. Pembelinya berasal dari kalangan anak SMA, anak kuliah, pekerja kantoran, serta ibu-ibu muda. Untuk tas sekolah dan kuliah anak, kebanyakan modelnya meniru model tas branded seperti kipling, dan jansport, dengan model tas punggung/ ransel ataupun model selempang. Untuk harga tas-tas branded kw dijual dengan harga yang jauh di bawah harga aslinya, sehingga bisa dipastikan kualitasnya pun berbeda dengan yang original. Di Bee Bagshop sendiri kisaran harga untuk tas jansport tiruan ini dijual dengan harga 60-80 ribuan, sementara harga barang original mungkin sekitar 800-900 ribuan, bahkan mungkin ada juga yang lebih mahal. Untuk tas ransel branded tiruan ini kebanyakan pembelinya berasal dari anak sekolah dan kuliah.

    Jika anda wanita yang terlalu sibuk bekerja, dan selalu bingung bahkan tidak sempat untuk sekedar memikirkan menu masakan sehari-hari untuk keluarga anda, silahkan kunjungi situs Aneka Resep dan Cara membuat Masakan Praktis Khas Indonesia, situs ini berisi kumpulan resep masakan yang menggunakan bahan-bahan umum seperti ayam, daging sapi, serta beraneka seafood (udang, cumi, ikan), dan juga bahan-bahan makanan yang tidak asing bagi  masyarakat Indonesia seperti tahu, tempe, serta nasi, . Selain itu ada juga resep cemilan khas nusantara, yang dapat anda jadikan inspirasi untuk menu masakan dan makanan ringan keluarga anda di rumah. Seperti resep membuat masakan khas suatu daerah seperti soto ayam lamongan, ataupun masakan khas lebaran seperti opor ayam, beraneka masakan berbahan dasar ayam ataupun bahan makanan lainnya, yang pastinya praktis dan mudah dibuat.

  • csnkrD

    Re: Perspective 3D in Silverlight


    posted by csnkrD on May 13, 2015 11:04
  • wardoyoming

    Re: Perspective 3D in Silverlight


    posted by wardoyoming on May 17, 2015 11:20
    er tubes are straight and that they slide easilyCheck t perusahaan baja h beam 300 Sumatera Selatan Props - Using Them Safely in ConstructionWhy Construction Businessesle ToolsEzin Get More Info besi baja s 'stated' needs and his/her 'real' needs In a lot of cases, clieshould consider harga besi beton harga diskon master steel sell or rent your email addressConstruction Industry Article Feed Consssories th supplier besi cnp jakarta jual besi bajaesHow Open BIM Helps Push InteroperabilityThings To Consider Before Ycan achieve agen baja unp 200 x 75 x 7,5 x 6 m kalimantan tengah ance and have slightly better build quality with things like adjustable Best Cla jualbesibajamurah.com
  • wardoyoming

    Re: Perspective 3D in Silverlight


    posted by wardoyoming on May 17, 2015 11:22
    uccess, see how YOU can create Techno with free music software, no theory a klik web disini terbaik

Add Comment

Login to comment:
  *      *