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> 

까다로운 점은 이러한 구성 요소 내에서 내가 드래그를 사용에 드롭 할 내 뷰 모델의 구성 요소 만 구성 요소가되지 않는 것입니다. 이를 더 잘 설명하기 위해 아래의 기차역 및 트랙 예제 그림을 참조하십시오. PlaceableComponents (목록 상자에있는 것들), 즉 트랙과 스테이션이 있습니다. 트랙은 일반 트랙 섹션과 전기 트랙 섹션이 될 수있는 트랙 섹션으로 구성됩니다. Station은 Tracksections로 구성된 Tracks로 구성된 Platforms로 구성됩니다. (명령

그래서 내가 연결하려는 구성 요소 (또는 노드)는 TrackSections, 그래서 나는, 다른 섹션 위에 섹션 (오른쪽 mousebutton 사용) 드래그 앤 드롭 할이이 메소드를 호출한다) 내 문서보기 모델 (캔버스에 항목을 보유하고있는 뷰 모델) 및 섹션에 다른 구성 요소에 대한 단서가 없으며 연결을 유지해야하기 때문에 섹션에 없습니다.

목표는 장식 레이어 또는 유사한 것을 사용하여 모든 항목의 꼭대기에 선으로 렌더링 할 수 있어야하는 연결 목록 (from 및 to 구성 요소 포함)을 만드는 것입니다. 또한 연결을 만드는 데 사용할 수있는 구성 요소가 모두이를 식별 할 수있는 INode 인터페이스를 구현한다고 추가 할 수 있습니다.

나는 내 질문과 상황을 충분히 명확하게 설명했으면 좋겠다. 나는 드래그에 대한 많은 좋은 게시물을 발견했다고 덧붙였다. & 나는 그들을 내 케이스에 적용 할 수 없었다. 그래서 내가 여기서 묻는다.

Answer 1

첫 번째 구성 요소를 캔버스에 배치 한 다음 한 구성 요소에서 다른 구성 요소로 드래그하여 구성 요소간에 연결을 만들고 싶습니다. 이제 드래그 문제가 무엇입니까 & 드롭입니까? 왜 구성 요소의 유형이 문제라고 생각합니까?

난 그냥 u는 정말 원하는하지만 어쩌면 다음과 같은 접근 방식은 작동 할 수 있습니다 무엇을 추측 할 수

: 오른쪽 클릭하면에

• 구성 요소를 결정하고 다른 구성 요소를 유혹하는 경우 tracksection 마우스 결정 끌기에
• 을 유혹한다 허용 떨어지고 경우
• 을 (시각적 큐를 제공) 적하 허용하는 유
• 가 tracksections의 연결을 만들 떠오르게된다 tracksection을 확인

여기에 Drag&Drop-Framwork에 대한 링크가 있습니다.

최고 감사합니다, toolsche