locked
z-order in XAML? RRS feed

  • Question

  • Hi,

    is there any way to change Z-Order in XAML? It would be really helpful as not removing and adding items in code

    Greetings
    Friday, November 4, 2005 6:44 PM

Answers

  • That's what I meant saying removing and adding element...

    So may be you can help me with this:

    I have

    <WrapPanel>
       <Button />
       <Button />
       <Button />
    </WrapPanel>

    and a style (typeof(Button)) on trigger "IsMouseOver" with RenderTransform=scale 2.

    Now on mouse over, Buttons a resized, but not going in foreground because of z-order. If I change z-order programatically (remove and insert a button), the ordering of buttons in wrappanel also changes.


    How can I achieve the effect of zooming (not using LayoutTransform, I don't want to affect layout of other elements) so that particular button jumps into foreground?

    Thanks
    Friday, November 4, 2005 8:41 PM
  • Sorry, I thought you were asking something else.

    Unfortunately, I do not think you can acheive your goal. You're counting on the WrapPanel to provide layout management, but you say you don't want to use a LayoutTransform. The wrap panel doesn't have a concept of z-index, it just understands stacking so you're kinda stuck. :(

    Friday, November 4, 2005 8:56 PM
  • You can try to design a custom panel with the same functionality as WrapPanel and with a Position DependencyProperty. The children of this custom panel will be displayed in the Position order (i.e the child with MyCustomPanel.Position="0" will be the first in the panel,  MyCustomPanel.Position="1" the second etc.). This way it doesn't matter if you remove and then add a child, the children will be displayed in the same order, only the z-index will change.
    Friday, November 4, 2005 9:54 PM

All replies

  • The order of the items in the XAML document indicates the desired z-indexing. Elements declared first are at a lower z-index than subsequent elements.

    HTH,
    Drew
    Friday, November 4, 2005 8:33 PM
  • That's what I meant saying removing and adding element...

    So may be you can help me with this:

    I have

    <WrapPanel>
       <Button />
       <Button />
       <Button />
    </WrapPanel>

    and a style (typeof(Button)) on trigger "IsMouseOver" with RenderTransform=scale 2.

    Now on mouse over, Buttons a resized, but not going in foreground because of z-order. If I change z-order programatically (remove and insert a button), the ordering of buttons in wrappanel also changes.


    How can I achieve the effect of zooming (not using LayoutTransform, I don't want to affect layout of other elements) so that particular button jumps into foreground?

    Thanks
    Friday, November 4, 2005 8:41 PM
  • Thats sad... thanks anyway
    Friday, November 4, 2005 8:52 PM
  • Sorry, I thought you were asking something else.

    Unfortunately, I do not think you can acheive your goal. You're counting on the WrapPanel to provide layout management, but you say you don't want to use a LayoutTransform. The wrap panel doesn't have a concept of z-index, it just understands stacking so you're kinda stuck. :(

    Friday, November 4, 2005 8:56 PM
  • Are there other possibilities to achieve that? I need a collection of items, added to a panel the way WrapPanel does. So I thought it's a right control for me. But how can I achieve such a zoom-effect?
    Friday, November 4, 2005 8:59 PM
  • You can try to design a custom panel with the same functionality as WrapPanel and with a Position DependencyProperty. The children of this custom panel will be displayed in the Position order (i.e the child with MyCustomPanel.Position="0" will be the first in the panel,  MyCustomPanel.Position="1" the second etc.). This way it doesn't matter if you remove and then add a child, the children will be displayed in the same order, only the z-index will change.
    Friday, November 4, 2005 9:54 PM
  • Thank you, I'll try it
    Saturday, November 5, 2005 12:31 AM
  • the only problem with re-ordering children is that if you've databound your child item list (ItemsSource of an ItemsControl, for instance), you can't add/remove children programmatically -- it will throw an exception.

    anyone have any ideas on that one?
    Tuesday, November 8, 2005 7:30 PM
  •  eburke wrote:
    the only problem with re-ordering children is that if you've databound your child item list (ItemsSource of an ItemsControl, for instance), you can't add/remove children programmatically -- it will throw an exception.

    anyone have any ideas on that one?


    A good point. I don't see any way around that. As for ideas, I'd really need to see visually what it is you're trying to accomplish. You could always play some tricks with a separate element on a layer above your bound control which uses a VisualBrush to paint the current element onto the surface of the elements which appears higher in z-order.

    HTH,
    Drew
    Tuesday, November 8, 2005 7:35 PM
  • Here is what I trying to accomplish:

    http://www.kostik.de/test/wpf.jpg

    I just want an OnMouseOver that brings the underlaying image to front over other items. A trick with separate layer would not work because it should be animated. And with RenderTransform followed images lay on top of the current one.
    So what is the solution?...
    Tuesday, November 8, 2005 7:51 PM
  • I have a couple of images in a Listbox (bind from dataset) where i have swapped
    the regular itemspanelfor a wrapPanel instead. With the help of triggers I managed to change the
    zIndex for the image thats for examples is mouseover and the result is that the
    image in focus is on top of the others...

    <Style TargetType="{x:Type ListBoxItem}">

    <Style.Triggers>

    <Trigger Property="IsMouseOver" Value="True">

    <Setter Property="Panel.ZIndex" Value="1"/>

    </Trigger>

    </Style.Triggers>

    </Style>

    Tuesday, January 30, 2007 2:24 PM
  • You probably have this solved already, but..

    I don't really know all of what your trying to do, it sort of sounds like the issue is getting the z-index set correctly.  IF so, then maybe this could help.

    After doing your buttons adds and removes in the codeBehind, do this or call a sub to do it.  (Sorry.. VB coding)

    Imports Linq

        Dim _Results = From p In YourCanvasName.Children  _
                  Where (TypeOf (p) Is Button) _
                  Select p

        For Each _localBtn In _Results
            Dim _thisBtn As Rectangle = _localBtn
            Dim _sTestStr As String = DirectCast(_thisBtn, Button).Name.ToString()
            select _sTestStr
              case "Btn1" : canvas.SetZindex(_localBtn,1)
              case "Btn2" : canvas.SetZindex(_localBtn,2)
            end select
         Next

    Depending on what you have going on, you may have to do more, or change items that are not buttons.  You could even move an item from one canvas to another this way if that is needed.

    Good luck

    Monday, March 4, 2013 2:28 PM