0

Before you tell me that this question has been answered, please allow me to explain. I have read many answers regarding this but none of them (that I've read) solve my problem.

My project is a WPF project which uses C#, XAML and MVVM Light within Visual Studio 2010.

What I have is a ListBox. Each element of the ListBox is a canvas (rather than the default StackPanel). Each Canvas contains one 'Node' - basically a Thumb control with a style attached, and a Path control. The Path uses a MultiBinding on a list of Nodes in the view model to generate some lines between Nodes. When you drag one Node around (using DragDelta), the lines are updated.

A visual might help out:

enter image description here

As you can see, some lines are above nodes and some are below. Typically it seems that the lines that come from a node are below that node, but what I want is for all lines to be below all nodes.

I think the ListBox's ItemTemplate is the main thing here:

<ListBox.ItemTemplate>
            <DataTemplate>
                    <Canvas>
                        <Path Stroke="Black" Canvas.ZIndex="1">
                            <Path.Data>
                                <MultiBinding Converter="{StaticResource NodeToPathDataConverter}">
                                    <Binding Path="NodeListViewModel.NodeList" Source="{StaticResource Locator}" />
                                    <Binding />
                                </MultiBinding>
                            </Path.Data>
                        </Path>
                        <Thumb Name="myThumb" Template="{StaticResource NodeVisualTemplate}" Canvas.ZIndex="2">

                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="DragDelta">
                                        <cmd:EventToCommand Command="{Binding NodeListViewModel.DragDeltaCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"/>
                                </i:EventTrigger>

                            </i:Interaction.Triggers>
                        </Thumb>
                    </Canvas>

                </DataTemplate>
        </ListBox.ItemTemplate>

As you can see, I have tried using Canvas.ZIndex in the controls, but that just seems to set their z order in relation to each other, not related to the other nodes and/or lines.

Is there a way to tell is to put all Nodes above all Paths? Thanks.

  • ZIndex only has an effect on children of the same Canvas. Put one in the ItemsPanel property of your ListBox – Clemens Jul 01 '17 at 20:41
  • Forgive me, but I don't know what you mean. Yes I have an ItemsPanel property and it does contain a Canvas control. I can put a Canvas.ZIndex into that control but it doesn't make any difference. I'm not sure how that would solve the problem since it wouldn't separate all the Thumb controls' Z Indices from all the Path controls' Z indices. – TheFaithfulLearner Jul 01 '17 at 20:48
  • As shown in the answers to the linked questions, you'll have to set the ZIndex on the item conatiner element, i.e. the ListBoxItem. You usually do that in a Style assigned to the ListBox's ItemContainerStyle property (the same way you already did it for Canvas.Left and Top in [this question](https://stackoverflow.com/q/44749975/1136211)). – Clemens Jul 01 '17 at 20:52
  • I read the answers to the two questions, and the solution you mention was brought up in the second of these questions, but I'm still not sure how that works. You seem to be saying that I should set the Z-Index of the ListBoxItem, correct? But each ListBoxItem contains one Thumb and some number of Paths. This does not help me if I want all Paths to be below all Thumbs, as far as I can see. I have tried it though, with a Property in my NodeViewModel (just like I did with CanvasLeft etc.). It didn't change the situation. – TheFaithfulLearner Jul 01 '17 at 21:07
  • 1
    You can only stack/reorder whole items in a list box. Hence, all Paths below all Thumbs requires two ItemsControls on top of ech other. – Clemens Jul 01 '17 at 21:09
  • Haha, damn, and turning it into one was such a pain. Also, I'm not sure this question is a duplicate of the ones you posted. Similar, sure. – TheFaithfulLearner Jul 01 '17 at 21:13

0 Answers0