Layers issue using Z-Index

Question

I've 2 controls one on top of another: border over slider. on border user can mark a segment to appear in different color on slider. Because the border is written after slider in xaml, it appear on top of the slider. and that's ok. My problem is, the Thumb of slider also appears under the border.

How can I set the Thumb element (belong to slider control and inside it) to appear on top of all, and also the border will appear on top of the slider? I tried use zIndex but without success. Any idea?

Answer 1

In CSS:

Make sure your elements are positioned absolutely or relatively. z-index doesn't really have a play in layering unless the elements are positioned absolutely or relatively. You should then be able to set one with:

z-index: 1;

and the other with:

z-index: 2;

and get the desired result.

In WPF:

Use the syntax specified here

Here's an example:

Make sure both of your elements are in the same parent, otherwise they will be displayed in the order in which they were loaded.