Hi, Arturs!
Thanks for the reply. I do appreciate it, but I have to say that it is incorrect.
I had already read that part of the documentation and did not notice any explicit mention of a range for ZOffset
values. The 0.0
and the 1.0
were example values. They do not limit the scope of potential values.
If that were the case, we would be limited to 11 ZOffset
values: 0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9
and 1.0
. That would be very limiting in real-world use cases that are likely to have more than 11 items in any given layout.
What the documentation did state is that a higher ZOffset
value will cause an object to be drawn over items with lower ZOffset
values.
This can be tested with some simple UX Markup, like this:
<App>
<StackPanel>
<Rectangle Width="100" Height="100" Color="Yellow " Margin="30" ZOffset="3">
<Draggable />
</Rectangle>
<Rectangle ux:Name="top" Width="100" Height="100" Color="Blue" Margin="30">
<Draggable />
</Rectangle>
</StackPanel>
</App>
By default, the yellow Rectangle
will be drawn over the blue one because of the way that the StackPanel
orders its children. The ZOffset
value of 3 doesn’t change this, but notice that it doesn’t cause any errors. If ZOffset
was limited to values between 0.0-1.0
, then I would expect it to throw an error.
Watch what happens when we give the blue rectangle a ZOffset
value of 4
WhilePressed
:
<App>
<StackPanel>
<Rectangle Width="100" Height="100" Color="Yellow " Margin="30" ZOffset="3">
<Draggable />
</Rectangle>
<Rectangle ux:Name="top" Width="100" Height="100" Color="Blue" Margin="30">
<Draggable />
<WhilePressed>
<Change top.ZOffset="4" />
</WhilePressed>
</Rectangle>
</StackPanel>
</App>
The blue rectangle is now drawn over the yellow one. When it is dragged onto the yellow rectangle, it appears to be “in front” of it and not “behind” it.
This will also work with float values greater than the value of the yellow rectangle, which in this example is 3
. So 3.1
will work, but 3.01
will also work because 3.01>3
.
However, with some experimentation I discovered that the lowest value that will cause the blue rectangle in this example to be drawn above the yellow one is 3.00000012
- not sure why. Not sure what the pattern is. While a ZOffset
of 3.00000012
will draw the respective item in front of items with a ZOffset
of 3
, items with a ZOffset
of 4.00000012
will still be drawn behind items with a ZOffset
of 4
.
ZOffset
also works with negative numbers. The code below will cause the blue rectangle to be drawn in front of the yellow one, since its ZOffset
of -1
is greater than the yellow rectangle’s ZOffset
of -1.1
:
<App>
<StackPanel>
<Rectangle Width="100" Height="100" Color="Yellow " Margin="30" ZOffset="-1.1">
<Draggable />
</Rectangle>
<Rectangle ux:Name="top" Width="100" Height="100" Color="Blue" Margin="30">
<Draggable />
<WhilePressed>
<Change top.ZOffset="-1" />
</WhilePressed>
</Rectangle>
</StackPanel>
</App>
Finally, notice that the yellow rectangle preserves its inherent Z-Order
as the first child in its parent StackPanel
as long as the ZOffset
value is >=0
(and keep in mind that -0 === 0
). If the value is <=-0.1
then the yellow rectangle will be drawn behind the blue rectangle.
We can test this by changing its ZOffset
to -0.1
and dragging it onto the blue rectangle. Of course, you can play around with the blue rectangle ZOffset
values (the default value and/or the Change
value) to alter this behavior and draw the yellow rectangle on top again, despite its -0.1
value.
The reason that I used a ZOffset
value of 1000
is that I was being sort of lazy - I didn’t want to try and figure out what the minimum value would have to be in order to draw the item over all other items, so I just used a super large number as a “quick and dirty” way to ensure that it would be drawn over everything… except it wasn’t