# How to stack overlapping UI objects front-to-back 

**URL:** <https://forum.xojo.com/t/how-to-stack-overlapping-ui-objects-front-to-back/41268>\
**Category:** Getting Started\
**Created:** [December 21, 2017, 1:58pm UTC](https://forum.xojo.com/t/how-to-stack-overlapping-ui-objects-front-to-back/41268 "2017-12-21T13:58:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Craig\_Hyde](https://forum.xojo.com/letter_avatar_proxy/v4/letter/c/e36b37/32.png) [@Craig\_Hyde](https://forum.xojo.com/u/Craig_Hyde)\
**Post date:** [December 21, 2017, 1:58pm UTC](https://forum.xojo.com/t/how-to-stack-overlapping-ui-objects-front-to-back/41268/1 "2017-12-21T13:58:17Z")

</div>

How can one control (in code) the order in which objects are drawn in a window “from front to back” ? For example, if an filled oval and a filled rectangle shape intersect, how can one bring either the oval or the rectangle to the front or to the back. In many drawing programs, you see commands such as “Arrange: Bring to Front, Bring Forward, Send Backward, Send to Back”.

---

<div class="post-metadata">

**Author:** ![Greg\_O\_Lone](https://forum.xojo.com/user_avatar/forum.xojo.com/greg_o_lone/32/49_2.png) [@Greg\_O\_Lone](https://forum.xojo.com/u/Greg_O_Lone)\
**Post date:** [December 21, 2017, 2:11pm UTC](https://forum.xojo.com/t/how-to-stack-overlapping-ui-objects-front-to-back/41268/2 "2017-12-21T14:11:45Z")

</div>

If you’re just using simple shapes, draw them on a canvas and draw the top most item last.

---

<div class="post-metadata">

**Author:** ![Markus\_Winter](https://forum.xojo.com/user_avatar/forum.xojo.com/markus_winter/32/144_2.png) [@Markus\_Winter](https://forum.xojo.com/u/Markus_Winter)\
**Post date:** [December 21, 2017, 2:22pm UTC](https://forum.xojo.com/t/how-to-stack-overlapping-ui-objects-front-to-back/41268/3 "2017-12-21T14:22:59Z")

</div>

If you have xDev then read the SuperDraw article in 12.5.

If not: the approach is simple but very powerful (and a VERY nice example of the benefits of OOP):

Make classes for each shape that know how to draw/select/move/order themselves  
A drawing is simply an array of these classes  
Make a buffer picture to draw on  
Call each item in the array to draw itself to the buffer picture  
In the canvas paint event draw the picture onto the canvas

---

<div class="post-metadata">

**Author:** ![system](https://forum.xojo.com/uploads/default/original/1X/455b4dcc0e61630e9f81940004ddffa49c432a46.png) [@system](https://forum.xojo.com/u/system)\
**Post date:** [October 29, 2020, 7:02pm UTC](https://forum.xojo.com/t/how-to-stack-overlapping-ui-objects-front-to-back/41268/4 "2020-10-29T19:02:39Z")

</div>