How to Z-Index(Z-Sorting) windows 8 UIElements in 3D Perspective?

Question

In general you can apply 3-D effects(x,y,z,rotationX,rotationY,rotationZ...) to any UIElement using the so called "Perspective Transforms":

<Image x:Name="img1" HorizontalAlignment="Left" Height="200" Width="200" Source="img1.jpg">
        <Image.Projection>
            <PlaneProjection CenterOfRotationY="3" RotationX="40"/>
        </Image.Projection>
</Image>

but with no Z-Index(Z-Sorting)! when UIElements overlapped they don't render properly in perspective.

in AS3 I use this function to zsort objects :

public function zSort():void
    {
        var i:uint;
        var zList:Array = [];
        for (i=0; i<this.numChildren; i++)
        {
            var mtx:Matrix3D = this.getChildAt(i).transform.getRelativeMatrix3D(this.parent);
            zList.push( { sp:this.getChildAt(i), z:mtx.position.z } );
        }
        zList.sortOn("z", Array.NUMERIC | Array.DESCENDING);
        for (i=0; i<this.numChildren; i++)
        {
            this.setChildIndex(zList[i].sp, i);
        }
    }

Is there similar solutions in c#? or things work deferent in windows 8?

I found this Silverlight tutorial "Using projection to build a 3D carousel in Silverlight 3" images seems to be zindex automatically witch is not what happen in WINRT?

score 0 · Answer 1 · edited Sep 19 '13 at 02:16

0

If you place your Image in a Canvas, you will be able to set the zIndex dependency property.

edited Sep 19 '13 at 02:16

Dave Clemmer

3,741
12
49
72

answered Aug 06 '12 at 01:23

JP Alioto

44,864
6
88
112

But how to zindex them in perspective? like images in 3D carousel or in a rotating cube? – isa Aug 06 '12 at 12:44

How to Z-Index(Z-Sorting) windows 8 UIElements in 3D Perspective?

1 Answers1