使用MVVM时LayoutContent在窗格中的默认位置

时间:2018-08-31 08:57:56

标签: wpf mvvm avalondock

将MVVM与AvalonDock一起使用时,如何在不同的窗格中提供LayoutAnchorables和LayoutDocuments的默认位置?

当然,像AvalonDock这样的功能是使用户能够按自己的喜好排列UI组件,但我想提供一个不错的默认布局。

(非常基本的)示例:

没有MVVM,并排放置两个LayoutAnchorables非常简单:

<xcad:DockingManager x:Name="MyDockingManager">
  <xcad:LayoutRoot>
    <xcad:LayoutPanel>
      <xcad:LayoutAnchorablePane>
        <xcad:LayoutAnchorable Title="Foo">
          <TextBox Text="foo" />
        </xcad:LayoutAnchorable>
      </xcad:LayoutAnchorablePane>
      <xcad:LayoutAnchorablePane>
        <xcad:LayoutAnchorable Title="Bar">
          <TextBox Text="bar" />
        </xcad:LayoutAnchorable>
      </xcad:LayoutAnchorablePane>
    </xcad:LayoutPanel>
  </xcad:LayoutRoot>
</xcad:DockingManager>

使用MVVM,我会有类似的东西:

<xcad:DockingManager AnchorablesSource="{Binding Anchorables}">
  <xcad:DockingManager.LayoutItemContainerStyle>
    <Style TargetType="xcad:LayoutItem">
      <Setter Property="Title" Value="{Binding Model.Title}" />
    </Style>
  </xcad:DockingManager.LayoutItemContainerStyle>

  <xcad:DockingManager.LayoutItemTemplate>
    <DataTemplate>
      <ContentPresenter Content="{Binding Content}" />
    </DataTemplate>
  </xcad:DockingManager.LayoutItemTemplate>

  <xcad:LayoutRoot>
    <xcad:LayoutPanel>
      <xcad:LayoutAnchorablePane>
      </xcad:LayoutAnchorablePane>
      <xcad:LayoutAnchorablePane>
        <!-- How to place something in here? -->
      </xcad:LayoutAnchorablePane>
    </xcad:LayoutPanel>
  </xcad:LayoutRoot>
</xcad:DockingManager>

后面有一些代码:

public MainWindow()
{
  DataContext = this;
  Anchorables = new ObservableCollection<AnchorableViewModel>() {
    new AnchorableViewModel("foo"),
    new AnchorableViewModel("bar")
  };
  InitializeComponent();
}

public ObservableCollection<AnchorableViewModel> Anchorables { get; }

还有一个非常基本的视图模型:

public class AnchorableViewModel
{
  public AnchorableViewModel(string title)
  {
    Title = title;
    Content = new TextBox() { Text = title };
  }

  public string Title { get; }
  public UIElement Content { get; }
  // (No INotifyPropertyChanged for sake of brevity, this example works without.)
}

这会将两个可定位对象放置在同一窗格中,堆叠在一起。如何将可锚定物放置在不同的平面上?

0 个答案:

没有答案