C＃WPF拖放ListBox MVVM

Question

我想在我的应用程序中启用拖放功能，以便能够在组件之间创建连接。 听起来并不难，但是问题是我想要它们之间进行连接的组件类型。

我希望能够建立连接的原因是能够绘制图形并计算最短路径等。

我所拥有的是一个列表框，其中的组件放置在画布上。 我使用ListBox的原因是使组件可选。 我也使它们可拖动。

<DataTemplate DataType="{x:Type ViewModels:DocumentViewModel}">
    <DataTemplate.Resources>
        <Converters:GuiSizeConverter x:Key="SizeConverter"/>
    </DataTemplate.Resources>
    <ListBox ItemsSource="{Binding Components}" SelectedItem="{Binding SelectedItem}" Background="Transparent" 
             HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="0" Margin="0">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas ClipToBounds="True" Height="{Binding CurrentProject.Height, Converter={StaticResource SizeConverter}}"
                        Width="{Binding CurrentProject.Width, Converter={StaticResource SizeConverter}}">
                    <Canvas.Background>
                        <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowFrameColorKey}}"/>
                    </Canvas.Background>
                </Canvas>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Grid>
                                <Border Background="{TemplateBinding Background}" />
                                <ContentPresenter/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsMouseOver" Value="True" />
                                        <Condition Property="IsSelected" Value="False"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Background" Value="#8868D5FD" />
                                </MultiTrigger>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Background" Value="#4468D5FD" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Utils:DraggableExtender.CanDrag" Value="True" />
                <Setter Property="Canvas.Top" Value="{Binding Path=Y, Converter={StaticResource SizeConverter},Mode=TwoWay}" />
                <Setter Property="Canvas.Left" Value="{Binding Path=X, Converter={StaticResource SizeConverter},Mode=TwoWay}" />
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>
</DataTemplate>

现在，棘手的事情是，它不是我要使用拖放的ViewModel中的Components，而是那些组件中的组件。 为了更好地说明这一点，请参见下面的火车站和轨道示例图片。 我有PlaceableComponents（在列表框中的那些），即Track和Station。 轨道由TrackSections组成，可以是常规轨道部分和带电轨道部分）。 工作站是由平台组成的，平台是由TrackSections组成的轨道组成的。

因此，我要连接的组件（或节点）是TrackSections，因此我想将一个部分拖放（使用鼠标右键）到另一个部分，这应该在我的DocumentViewModel（保存视图的模型）中调用方法（命令）画布上的项目），而不是这些部分上的内容，因为这些部分没有其他组件的线索，它们也不应该保持连接。

目标是创建一个连接列表（包含与组件之间的连接），该列表应能够使用装饰层或类似层呈现为所有线的顶部。 我可能还要补充一点，可用于创建连接的组件都实现了INode接口，以便能够识别它们。

我希望我的问题和情况描述得足够清楚。 我可以补充一点，我已经找到了很多有关拖放的好帖子，但是我无法将其中任何一个应用于我的案例，这就是为什么我在这里询问。

Answer 1

是否要先将组件放置在画布上，然后通过从一个组件拖动到另一个组件来在它们之间创建连接，对吗？ 现在，您的拖放问题是什么？ 您为什么认为组件的类型有问题？

我只能猜出您真正想要的是什么，但是也许以下方法可能有效：

• 右键单击，确定鼠标悬停的组件和轨迹部分
• 在拖动中，确定您是否正在悬停允许拖放的其他组件（提供视觉提示）
• 如果允许放下，请检查要悬停的路段
• 创建路段的连接

这是Drag＆Drop-Framework的链接。