0

I have a WPF project (c#, MVVM using MVVM Light) and I have a MultiBinding that passes information to a converter, as you would expect.

The code for that is here:

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Path Stroke = "{Binding LineColour}" >
                < Path.Data >
                    < MultiBinding Converter="{StaticResource NodeToPathDataConverter}">
                        <Binding Path = "NodeListViewModel.NodeList" Source="{StaticResource Locator}" />
                        <Binding />
                    </MultiBinding>
                </Path.Data>
            </Path>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

The converter then uses the information from these bindings to spit out the details for the line. The problem is that the line goes from the (0,0) position of one control to another, but I want it to go from the middle of the controls in question. To do this, the converter in the MultiBinding needs to get the ActualWidth and ActualHeight of the controls in question.

So what are the controls in question? I have another almost identical ListBox control below this one that uses the same data set, but instead of drawing lines between controls, it draws the controls themselves. This is as follows:

<ListBox.ItemTemplate>
    <DataTemplate>
            <Grid>
                <Thumb Name = "myThumb" Template="{StaticResource NodeVisualTemplate}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName = "DragDelta" >
                                < cmd:EventToCommand Command = "{Binding NodeListViewModel.DragDeltaCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Thumb>
            </Grid>
        </DataTemplate>
</ListBox.ItemTemplate>

The reason I used two ListBox controls was to ensure that all lines appeared lower than all Thumbs. I tried many ways of them in the same ListBox, but it wasn't going to happen. They do share the same data set though, which is a 'NodeList'.

So the bit I can't figure out is how to get the ActualWidth and ActualHeight of the Thumbs in the second ListBox into the converter in the first ListBox. Which is why I'm here.

Any help would be greatly appreciated.

  • It might be simpler to somehow center the Thumbs at their coordinate origin, e.g. by putting them centered in a large enough Grid with fixed size and fixed (half of the size) negative margin. – Clemens Jul 04 '17 at 19:19
  • Too broad, especially without more context (like a good [mcve]). That said, to address your literal question, if both `ListBox.ItemsSource` collections are bound to the same source, then your view model could mediate, by having a `Mode=OneWayToSource` binding to `Actual...` properties in the second list box and `Mode=OneWay` in the first. Note that a possibly better approach here would be to not use the first `ListBox`, but rather to put the graphics from that in the adorner layer. You should be able to bind to the adorner from the same template as used in the second `ListBox`. – Peter Duniho Jul 05 '17 at 00:17
  • Indeed Peter, but I have been regularly been downvoted for providing 'too much information' so I've been trying to figure out just how much is 'enough'. I would say more was better here, but I'm concerned with visibility as is anyone. – TheFaithfulLearner Jul 05 '17 at 10:35

1 Answers1

1

You can "bind" the ActualWidth and ActualHeight read-only properties of the Thumb in the second ListView to some double source properties of your data object using any of the workaround mentioned here:

Bind to ActualHeight of Item ItemsControl

You can then bind to the same source properties in the ItemTemplate of the first ListView. This should work provided that both ListViews bind to the same source collection.

There is no way to bind directly to the actual Thumb element in the second ListView using pure XAML though.

mm8
  • 163,881
  • 10
  • 57
  • 88