WPF窗口中的多个分割器

Question

我有一个wpf窗口，其中有几个组框根据用户要求添加。我想扩展任何组框以查看其全部内容。附加图像代表布局。

我曾尝试使用网格分割器，但它将网格分成两部分，我希望将其分成动态数字（基于分组框的数量）。我怎么能设计一个可以支持这个功能的布局。

我曾尝试在各自的列中添加多个Grid splitter控件，但随后他们通过占用不需要的组框的空格来扩展自己的列。

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>