WPF AvalonDock 添加文档

WPF AvalonDock add Documents

提问by PitAttack76

I have a Window with AvalonDock. On startup there is one Document opened which is filled with LocControllers usercontrols (LocControllersViewModel).

我有一个带有 AvalonDock 的窗口。启动时会打开一个 Document，里面装满了 LocControllers 用户控件（LocControllersViewModel）。

Now I want to have that when there is doubleclicked on a LocController that the LocController usercontrol opens in a new Document. So the first document is always the overview, filled with LocController usercontrols, and the other Documents are added after a double click.

现在我想要在 LocController 用户控件在新文档中打开的 LocController 上双击时拥有它。所以第一个文档总是overview，填充了LocController usercontrols，其他文档都是双击后添加的。

I've looked at the AvalonDock and MVVM sample, but I can't figure out how to get the behavior that I want.

我查看了 AvalonDock 和 MVVM 示例，但我不知道如何获得我想要的行为。

What I've found out so far is that I have to use the DocumentsSource property to bind the documents. So I guess I need to create a collection of DocumentViewModels to bind to the DocumentsSource property. That DocumentViewModel I need to fill with usercontrols. For the first Document is will be a list of LocController usercontrols, for the other Documents it can be other usercontrols.

到目前为止，我发现我必须使用 DocumentsSource 属性来绑定文档。所以我想我需要创建一个 DocumentViewModels 集合来绑定到 DocumentsSource 属性。我需要用用户控件填充那个 DocumentViewModel。对于第一个 Document 将是一个 LocController 用户控件列表，对于其他文档，它可以是其他用户控件。

Can anyone provide me with a small code example? i don't think it is that hard, but I just can't find it :(

谁能给我提供一个小代码示例？我不认为这很难，但我就是找不到:(

EDIT: Here's my current DockingManager XAML:

编辑：这是我当前的 DockingManager XAML：

    <Window x:Class="AvalonDockMvvmTest.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
                xmlns:AvalonDockMvvmTest="clr-namespace:AvalonDockMvvmTest"
                Title="MainWindow"
                Height="350"
                Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Menu>
            <MenuItem Header="File">
                <MenuItem Header="NewDetail"
                                    Command="{Binding NewCommand}" />
                <MenuItem Header="OpenSelectDetail"
                                    Command="{Binding OpenCommand}" />
            </MenuItem>
        </Menu>

        <xcad:DockingManager x:Name="DockManager"
                                                 Margin="3 0 3 0"
                                                 DocumentsSource="{Binding Documents, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">

            <xcad:DockingManager.LayoutItemTemplateSelector>
                <AvalonDockMvvmTest:PanesTemplateSelector>
                    <AvalonDockMvvmTest:PanesTemplateSelector.OverViewTemplate>
                        <DataTemplate DataType="{x:Type AvalonDockMvvmTest:OverviewViewModel}"> <!-- Overview user control -->
                        </DataTemplate>
                    </AvalonDockMvvmTest:PanesTemplateSelector.OverViewTemplate>

                    <AvalonDockMvvmTest:PanesTemplateSelector.DetailTemplate>
                        <DataTemplate DataType="{x:Type AvalonDockMvvmTest:DetailViewModel}"> <!-- Detail user control -->
                        </DataTemplate>
                    </AvalonDockMvvmTest:PanesTemplateSelector.DetailTemplate>

                </AvalonDockMvvmTest:PanesTemplateSelector>
            </xcad:DockingManager.LayoutItemTemplateSelector>
        </xcad:DockingManager>

    </Grid>
</Window>

So how do I load the different controls (overview and detail) to the document pane?

那么如何将不同的控件（概述和详细信息）加载到文档窗格？

回答by PitAttack76

Ok, it took me some time, but I finally got it working the way I want. Picking code from the AvalonDock MMVM sample and the CodeProject 'AvalonDock [2.0] Tutorial'

好吧，我花了一些时间，但我终于让它按照我想要的方式工作。从 AvalonDock MMVM 示例和 CodeProject 'AvalonDock [2.0] 教程'中挑选代码

The result: when the application starts the overview is loaded in the first document tab. When you click the newdetail menuitem, a new document tab is added, after the overview tab. The overview tab is set to be unable to close.

结果：当应用程序启动时，概览会加载到第一个文档选项卡中。当您单击 newdetail 菜单项时，会在概览选项卡之后添加一个新的文档选项卡。概览选项卡设置为无法关闭。

There are some more things to do, like adding a side - and bottom panel. So I'm not done yet, but I think if I got so far the other panels can be done too.

还有一些事情要做，比如添加一个侧面板和底部面板。所以我还没有完成，但我认为如果我做到了，其他面板也可以完成。

Screenshot:

截屏：

XAML:

XAML：

<Window x:Class="AvalonDockMvvmTest.View.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
                xmlns:Pane="clr-namespace:AvalonDockMvvmTest.View.Pane"
                xmlns:ViewModel="clr-namespace:AvalonDockMvvmTest.ViewModel"
                Title="MainWindow"
                Height="350"
                Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <!-- Region Menu-->
        <Menu>
            <MenuItem Header="File">
                <MenuItem Header="NewDetail"
                                    Command="{Binding NewCommand}" />
                <MenuItem Header="OpenSelectDetail"
                                    Command="{Binding OpenCommand}" />
            </MenuItem>
        </Menu>
        <!-- EndRegion Menu-->

        <!-- Region DockingManager -->
        <xcad:DockingManager x:Name="DockManager"
                                                 Margin="3 0 3 0"
                                                 DocumentsSource="{Binding Files}"
                                                 Grid.Row="1">

            <xcad:DockingManager.LayoutItemTemplateSelector>
                <Pane:PanesTemplateSelector>
                    <!-- Overview (startpage)-->
                    <Pane:PanesTemplateSelector.OverViewTemplate>
                        <DataTemplate DataType="{x:Type ViewModel:OverviewViewModel}">
                            <!-- Add UserControl here-->
                            <TextBox Text="{Binding ContentText}"/>
                        </DataTemplate>
                    </Pane:PanesTemplateSelector.OverViewTemplate>

                    <!--Detail controls-->
                    <Pane:PanesTemplateSelector.DetailTemplate>
                        <DataTemplate DataType="{x:Type ViewModel:DetailViewModel}">
                            <!-- Add UserControl here-->
                            <TextBox Text="{Binding ContentText}" />
                        </DataTemplate>
                    </Pane:PanesTemplateSelector.DetailTemplate>
                </Pane:PanesTemplateSelector>
            </xcad:DockingManager.LayoutItemTemplateSelector>

            <xcad:DockingManager.LayoutItemContainerStyleSelector>
                <Pane:PanesStyleSelector>
                    <!-- Overview (startpage) style -->
                    <Pane:PanesStyleSelector.OverviewStyle>
                        <Style TargetType="{x:Type xcad:LayoutItem}">
                            <Setter Property="Title"
                                            Value="{Binding Model.Title}" />
                            <Setter Property="ToolTip"
                                            Value="{Binding Model.Title}" />
                            <Setter Property="CloseCommand"
                                            Value="{Binding Model.CloseCommand}" />
                            <Setter Property="ContentId"
                                            Value="{Binding Model.ContentId}" />
                        </Style>
                    </Pane:PanesStyleSelector.OverviewStyle>
                    <!-- Detail style -->
                    <Pane:PanesStyleSelector.DetailStyle>
                        <Style TargetType="{x:Type xcad:LayoutItem}">
                            <Setter Property="Title"
                                            Value="{Binding Model.Title}" />
                            <Setter Property="ToolTip"
                                            Value="{Binding Model.Title}" />
                            <Setter Property="ContentId"
                                            Value="{Binding Model.ContentId}" />
                        </Style>
                    </Pane:PanesStyleSelector.DetailStyle>
                </Pane:PanesStyleSelector>
            </xcad:DockingManager.LayoutItemContainerStyleSelector>
        </xcad:DockingManager>
        <!-- EndRegion DockingManager -->
    </Grid>
</Window>

回答by Gareth Oates

Where's the definition of your NewCommand? I would have thought the answer to this question lies mainly in what's contained within that command's definition, not just how you hooked up the XAML?

你的 NewCommand 的定义在哪里？我原以为这个问题的答案主要在于该命令的定义中包含的内容，而不仅仅是您如何连接 XAML？