Несколько сплиттеров в окне WPF

Question

У меня есть окно wpf, в котором есть несколько групповых блоков, которые добавляются в зависимости от требований пользователя. Я хочу развернуть любое поле группы, чтобы увидеть все его содержимое. Прикрепленное изображение представляет макет.

Я попытался использовать Grid Splitter, но он разбивает сетку на две части, где я хочу разбить его на динамические числа (в зависимости от количества групповых блоков). Как я могу разработать макет, который может поддерживать эту функцию.

Я попытался добавить несколько элементов управления Glit Split в свои отдельные столбцы, но затем они расширяют свои собственные столбцы, поглощая пространства групповых блоков, что является чем-то ненужным.

Answer 1

Что я хотел бы сделать, это то, что я создам интерфейс, который ваш текущий TrackViewModel затем создать ViewModel для этого GridSplitter и пусть оба класса реализуют ITrackItem

public class GridSplitterViewModel : ITrackItem
{
  // Code omitted...
}

public class TrackViewModel : ITrackItem
{
  // Code omitted...
}

public interface ITrackItem
{
  // Whatever properties that you may need.
  public Type ItemType { get; }
}

public class MainViewModel
{
   public MainViewModel()
   {
     // Made it simple but the idea is here..
     Tracks = new ObservableCollection<ITrackItem>(GetSomethingFromTheDatabaseMaybe());
     Tracks.Insert(1, new GridSplitterViewModel());
     Tracks.Insert(3, new GridSplitterViewModel());
   }

  // Rest of code omitted
}

И по вашему XAML вам придется определить DataTriggers для тебя Items, Идея в том, что ViewModel все еще кормит UI на что показать и тому UI будет обрабатывать изменения шаблона на основе triggers,

<DataTrigger Binding="{ItemType}" Value="{x:Type GridSplitterViewModel}">
  <Setter Property="Template">
    <Setter.Value>
        <DataTemplate>
            <GridSplitter/>
        </DataTemplate>
     </Setter.Value>
  </Setter>
 </DataTrigger>
<DataTrigger Binding="{ItemType}" Value="{x:Type TrackViewModel}">
  <Setter Property="Template">
    <Setter.Value>
        <DataTemplate>
            <GroupBox Header="{Binding TrackName}" Width="400" 
               Height="{Binding ElementName=TabCharts,  Path= ActualHeight, Converter={StaticResource HeightConverter}}"  Margin="0 0 20 0">
                                                            <chart:CustomCharts></chart:CustomCharts>
            </GroupBox>
        </DataTemplate>
     </Setter.Value>
  </Setter>
</DataTrigger>