none
Layered Rendering vs. Tree Rendering RRS feed

  • Question

  • Hi all,

    I'm building a WPF application which displays some simple elements that can be moved around by the user. Each element is made from simple shapes and a label (say, a square, then a circle over it, then a text label). For the convenience of my app, I put the all the components of a single element under one canvas, and then all I have to do is just move the canvas to move all the shapes under it.  This is all cool and great.  Now the next feature I want is when multiple copies of that canvas are placed in the window, I want the labels to never be covered by shapes from another canvas.

    The images below would hopefully make things clearer (currently I have the top result, but I want to get the bottom output):



    This is more like having multiple "layers" of drawing, in which all the shapes are placed in one layer, and all text is placed in another layer that is placed on top of the previous layer.

    So my question is, is it possible to achieve this effect while still maintaining the tree structure of the elements under their canvases?

    Any ideas are welcome and highly appreciated!

    Thanks.
    Wessam Bahnassi - Microsoft DirectX MVP
    Saturday, July 5, 2008 12:43 PM

Answers

  • Adorners appear on the adorner layer, which should appear above all the other elements you're drawing. Adorners also align to the element they adorn, so it shouldn't be too much effort maintain it's position. This should be a fairly easy implementation if all you want is for the text to appear on top as you demonstrated in your illustration.
    Sunday, July 6, 2008 10:18 PM

All replies

  • I would look into implementing adorners for the labels. People often use adorners to show bounding boxes, outlines, or handles that appear above everything else. I imagine this would work for your problem as well.
    Sunday, July 6, 2008 5:45 AM
  • Hi

    I dont think simply implement multiple adorners for lables will works, an adorner is awlay above the Element it adornered.  It doest mean It is allway above the other elements that has the same parent of the adorned element, I believe the possible solution will  add a single addorner to the parent of the some simple element, then add the text to the parent's adorner's VirsualChildren, by doing this, all text will appear above your customElements,

    Note that you need to adjst position of the text when you move your elements

    hope that helps
    珍惜生命,远离美女
    • Edited by AlexTre Sunday, July 6, 2008 11:21 AM problems error
    Sunday, July 6, 2008 11:20 AM
  • AlexTre said:

    I believe the possible solution will  add a single addorner to the parent of the some simple element, then add the text to the parent's adorner's VirsualChildren, by doing this, all text will appear above your customElements,

    Note that you need to adjst position of the text when you move your elements


    Thanks all for the adorner suggestion. However, if I must control the position of the text manually, then might as well bite the bullet and flatten the whole visual tree under a single canvas, and just play with the Z-index of the elements to control their rendering order.

    It's interesting that WPF does indeed have the concept of layers, except that it is not fully exposed to its maximum. It would be great if we have the freedom to define our own layers and decide on which an element will be drawn.

    In my app I need about 5 of these layers actually (the text example I gave is just a simplification), so it is like:

    -- Layer0: Rectangles
    -- Layer1: Ellipses
    -- Layer2: Lines
    -- Layer3: Text
    -- Layer4: Highlighting Elements

    Wessam Bahnassi - Microsoft DirectX MVP
    Sunday, July 6, 2008 11:35 AM
  • Hi Wessam

    it is a interesting requirement.


     -- Layer0: Rectangles
    -- Layer1: Ellipses
    -- Layer2: Lines
    -- Layer3: Text
    -- Layer4: Highlighting Elements

    It seem to me that  binding mechnism  may help to solve this situation, I may do the following step

    1: in data layer, create a custom class. it has RectanglesData, EllipsesData, LinesData,TextData and the Element, the datas will be bound to the corresponding layer, for example,
    Ellipses.DataContext = EllipsesData...........

    2: in view layer your have a grid as the layers contaner, this main grid will have 5 grids and one overlap one, one by one....
    the xmal may looks like:

            <Grid Name="layersContainer">
                <Grid Name="rectanglesGrid"></Grid>
                <Grid Name="ellipsesGrid"></Grid>
                <Grid Name="linesGrid"></Grid>
                <Grid Name="textsGrid"></Grid>
                <Grid Name="elementsGrid"></Grid>
            </Grid>

    then you will have the corresponding layers

    note: this works as data Modle/View struture, if your appliaction is complx, you may better use dataModel/Presentation/View to help you create a flxible and easy to maintain structure.

    hope that helps

    珍惜生命,远离美女
    Sunday, July 6, 2008 3:43 PM
  •  
    AlexTre said:

    1: in data layer, create a custom class. it has RectanglesData, EllipsesData, LinesData,TextData and the Element, the datas will be bound to the corresponding layer, for example,
    Ellipses.DataContext = EllipsesData...........

    2: in view layer your have a grid as the layers contaner, this main grid will have 5 grids and one overlap one, one by one....



    Thanks. But I don't understand how this keeps the parenting relationship between the different parts of the object. I would like to just move the base position of the object and all its parts follow it automatically. This is achievable by making these parts children of the base element (a canvas in my case). As soon as you break this relationship, then you will have to do the repositioning yourself everytime the base is moved.

    My current fallback is to just have a flat set of canvases with proper z-indices, and I just add the parts to their respective "layer", and do the parent-child positioning by hand through matrix multiplications.
    Wessam Bahnassi - Microsoft DirectX MVP
    Sunday, July 6, 2008 5:15 PM
  • Adorners appear on the adorner layer, which should appear above all the other elements you're drawing. Adorners also align to the element they adorn, so it shouldn't be too much effort maintain it's position. This should be a fairly easy implementation if all you want is for the text to appear on top as you demonstrated in your illustration.
    Sunday, July 6, 2008 10:18 PM
  • Brett Hickenbottom said:

    Adorners appear on the adorner layer, which should appear above all the other elements you're drawing. Adorners also align to the element they adorn, so it shouldn't be too much effort maintain it's position. This should be a fairly easy implementation if all you want is for the text to appear on top as you demonstrated in your illustration.



     Hi Brett.
    I did a test base on the situation, I found that you were right, and sry to misunderstanding I have made, - -~! however, the good thing is i learned sth from my mistake,. thanks

    珍惜生命,远离美女
    Monday, July 7, 2008 1:46 AM