Submit My Question - Recent Questions - Recent Answer

Msdn Tech >> Silverlight (formerly WPF/E) >> Silverlight (formerly WPF/E) Developer Issues

Z-Index

From what I've seen there's not currently support for Z-Index on UIElements. Am I missing something though? Is there a way to set the Z-Index of an element?

[158 byte] By [DanWahlin] at [2007-12-31]

«« Auto Updater
»» We will be delaying the release of Sandcastle February CTP until March 5, 2007

# 1

I dont know if it planned in v1 wpf/e, but you can layer UI currently using TranslateTransform eg: http://msdn2.microsoft.com/en-us/library/ms742305.aspx

Or it can be done currently by doing via css http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2006/12/15/9035.aspx

slyi at 2007-9-6 >

top of Msdn Tech,Silverlight (formerly WPF/E),Silverlight (formerly WPF/E) Developer Issues...

# 2

Correct. The CTP does not include any z-index property support. The z-order of elements is based upon the order that they are in the parent's visual collection. You can remove and add an element to make it be at the top of the z-order. We will be adding a z-index property in the future.

-mark
Program Manager
Microsoft
This post is provided "as-is"

MarkRideout at 2007-9-6 >

# 3

Thanks for the links. Let me give a few more details on what I'm trying to do.

I'm trying to layer two rectangles that are dynamically drawn and are placed in a 3D type view. The back rectangle shouldn't overlap the close rectangle. I'm sure the order of the rectangles in the xaml changes things but I don't have control over the order that they're drawn out since they're all dynamic and based upon a sort order.

If there's a way to z-index the closer rectangle so that it's always on top that would be perfect.

DanWahlin at 2007-9-6 >

# 4

Thanks Mark.

Since my rectangles are in a 3-D view (I'm faking that with reflections) I need the close one to always be on top of the other one. It's not a huge issue right now and while I could potentially play with the order relative to the parent's visual collection, I'll just hold-off on changing anything until z-index makes it in there.

DanWahlin at 2007-9-6 >

# 5

Why doesn't the order in the collection work for you instead of explicit ZOrder?

ShawnWildermuth-MVP at 2007-9-6 >

# 6

I don't control the order for this particular project I'm working on. The objects I'm writing out are sorted based upon two different proprties and written out in a 3D looking environment. So, I suppose it would be possible to change the order I create the XAML in based upon a radius calculation but at this point it's not worth the effort I don't think.

Having a Z-Index would greatly simplify things so I'm hoping that's in the plans for V1.

DanWahlin at 2007-9-6 >

# 7

That makes sense...just trying to understand the use-case when the lack of Z-Order mattered. Thanks!

ShawnWildermuth-MVP at 2007-9-6 >

# 8

out of my experience, you have the ZIndex propery for <panel> element and grid element.

panel.ZIndex is intelisenced

grid.ZIndex is not, but works fine.

mugile

mugile at 2007-9-6 >

# 9

That's true for WPF but WPF/E doesn't expose all that at this point unfortunately.

DanWahlin at 2007-9-6 >

# 10

Is there any ETA on when a z-index property might make it into a CTP build? An example of why I need it is shown at the following URL (albums on the left side will overlap improperly due to not being able to set the z-index as they move).

http://www.xmlforasp.net/codebank/system_web_extensions/albumviewer/albumviewer.aspx

DanWahlin at 2007-9-6 >

# 11

Barring any issues, the next CTP after the Feb one will have the z-index feature.

-mark
Program Manager
Microsoft
This post is provided "as-is"

MarkRideout at 2007-9-6 >

# 12

Awesome! Thanks for the info Mark.

DanWahlin at 2007-9-6 >

# 13

If you're using JavaScript to programatically add "controls" to your canvas, you can specify how you want them to over (or under) lap by using .insert instead of .add -

myCanvas.children.insert(0, agControl.createFromXaml(xamlFragment));

Not that this addresses your exact issue, but others maybe interested.

Kane- at 2007-9-6 >

# 14

Hi,

I simulated z-index using order of elements of the children collection.

That worked fine since first objects in the collection render fist, and stay behind of last elements the collection.

The problem come when I tried to change the layout dynamically. I thought removing and adding an element should place that element on top of all the others, but it didn't worked fine if I do it in the same event.

function OnMouseDown(sender, eventArgs) {
rootCanvas.children.remove(redRectangle);
rootCanvas.children.add(redRectangle); //if I coment this line, the rectangle disappears. If I place it in another event it reappears. Here does not work.
}

I have already tried usign wpfControl.reload() in the middle of both instructions.

Any idea why this is happening?

Right now I'm doing this implementing the remove on the mouseLeftButtonDown and the add on the mouseLeftButtonUp events (the effect is not exactly what i'm looking for).
Is there a way of doing it without handling two events?

thaks!

arvatos at 2007-9-6 >

Silverlight (formerly WPF/E) Hot Topic

Silverlight (formerly WPF/E) New Topic

Silverlight (formerly WPF/E)

Java / MSDN / Linux Tech / PHP Tech / MSDN DotNet / MSDN TECH / Health Library / Programmers Tech / visual basic Tech / Developer Tech / Ipod faqs / Msdn China Tech

Z-Index document under Silverlight (formerly WPF/E) Developer Issues classified...

Z-Index

Silverlight (formerly WPF/E) Hot Topic

Silverlight (formerly WPF/E) New Topic

Silverlight (formerly WPF/E)

Site Classified