Синхронизировать положение элементов в элементах управления

Question

Я пытаюсь создать элемент управления WPF, который отображает два вертикальных «плавающих» (слева и справа). Как Left, так и Right должны быть привязаны к двум отдельным ObservableCollection в ViewModel. ISkill имеет свойство Name и, возможно, свойство SynchronizedWith, которое в основном является ссылкой на другой объект ISkill (в противоположной коллекции).

Два плавника можно рассматривать как обычные вертикальные StackPanels, но все объекты ISkill, которые синхронизированы с другим объектом ISkill, всегда должны быть выровнены по вертикали (что означает, что в некоторых местах будет пустое пространство). ISkills, синхронизированный, также должен иметь подключенную линию между двумя различными swimlanes. Прилагаемое изображение, вероятно, даст лучший обзор того, что я пытаюсь выполнить.

Ниже интерфейс ISkill.

public interface ISkill 
{ 
    string Name { get; set; } 
    ISkill SynchronizedWith { get; set; } 
} 

Одна идея, которую я имел, чтобы связать левый и правый в двух ItemsControls и использовать сетку в качестве панели макета. Но я не уверен, каким образом макет должен определить, какой Grid.Row-индекс должен иметь каждый элемент в коллекциях.

Все предложения очень ценятся, спасибо!

Answer 1

Мое предложение - создать специальную модель представления, представляющую элемент в этом представлении. ObservableCollection этих моделей просмотров должен быть синхронизирован с существующими коллекциями. Такой подход упростит дизайн представления.

class SyncViewModel 
{ 
    public ISkill RightItem { get;} 
    public ISkill LeftItem { get;} 
    //simplifies binding 
    public bool HasLeftItem { return LeftItem!=null; } 
    public bool HasRightItem { return RightItem!=null; } 
    public bool HasConnection { return HasLeftItem && HasRightItem; } 
}