C# WPF 拖放列表框 MVVM

Question

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

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

我拥有的是一个带有放置在 Canvas 上的组件的列表框。我使用 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 中的组件，而是这些组件中的组件。为了更好地说明这一点，请参阅下面的火车站和轨道示例图片。我有 PlaceableComponents(列表框中的那些)，即 Track 和 Station。一条轨道由 TrackSections 组成，可以是常规轨道部分和电气化轨道部分)。车站由平台构成，平台由轨道构成，轨道由轨道部分构成。

所以我要连接的组件(或节点)是 TrackSections，所以我想将一个部分拖放到(使用鼠标右键)到另一个部分，这应该调用我的 DocumentViewModel 中的一个方法(命令)( viewmodel 在 Canvas 上保存项目)而不是在部分上，因为这些部分没有关于其他组件的线索，也不应该保持连接。

目标是创建一个连接列表(包含从和到组件)，它应该能够使用装饰层或类似的方式呈现在所有东西之上作为线)。我可能还会补充说，可用于创建连接的组件都实现了一个 INode 接口(interface)，以便能够识别它们。

我希望我已经足够清楚地描述了我的问题和情况。我可以补充一点，我发现了很多关于拖放的好帖子，但我无法将它们应用到我的案例中，这就是我在这里提问的原因。

Answer 1

您是否希望首先将组件放置在 Canvas 上，然后通过从一个组件拖动到另一个组件来在它们之间创建连接？现在你的拖放问题是什么？为什么你认为组件的类型是个问题？

我只能猜到你真正想要什么，但也许下面的方法可行:

• 右键单击，确定组件和鼠标悬停的轨道部分
• 在拖动中确定您是否正在悬停另一个允许放下的组件(给出视觉提示)
• 如果允许下降，请检查您悬停的路段
• 创建轨道路段的连接

这是一个指向 Drag&Drop-Framework 的链接.