wpf - 在 AvalonDock 2.0 的 LayoutDocument 底部创建选项卡？

Question

如何在 AvalonDock 2.0 中的 LayoutDocument 底部创建选项卡（在 XAML 中），例如 Visual Studio 中的代码和设计选项卡？（当然不使用 TabControl）

我想最终在顶部有一个选项卡，每个文档一个，但是在每个文档中，能够有多个“视图”，每个选项卡在窗口底部。

因此，您可能将“page.htm”作为一个文档，显示在顶部的选项卡上。然后将“来源”和“设计”作为打开/激活文档底部的两个选项卡。

Answer 1

您应该覆盖 LayoutDocumentPaneControl 的默认样式，为此我建议您查看提供的主题之一。示例代码（未测试）：

<!--MyCustomDocumentPaneControlStyle-->
<Style x:Key="MyCustomDocumentPaneControlStyle" TargetType="{x:Type avalonDockControls:LayoutDocumentPaneControl}">
    <Setter Property="TabStripPlacement" Value="Bottom"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type avalonDockControls:LayoutDocumentPaneControl}">
                <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <!--Following border is required to catch mouse events-->
                    <Border Background="Transparent" Grid.RowSpan="2"/>
                    <Grid Panel.ZIndex="1" Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <avalonDockControls:DocumentPaneTabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1"/>
                        <avalonDockControls:DropDownButton
                            x:Name="MenuDropDownButton"
                            Style="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}"
                            Focusable="False"
                            Grid.Column="1">
                            <avalonDockControls:DropDownButton.DropDownContextMenu>
                                <avalonDockControls:ContextMenuEx
                                    ItemsSource="{Binding Model.ChildrenSorted, RelativeSource={RelativeSource TemplatedParent}}">
                                    <avalonDockControls:ContextMenuEx.ItemContainerStyle>
                                        <Style TargetType="{x:Type avalonDockControls:MenuItemEx}" BasedOn="{StaticResource {x:Type MenuItem}}">
                                            <Setter Property="HeaderTemplate" Value="{Binding Path=Root.Manager.DocumentPaneMenuItemHeaderTemplate}"/>
                                            <Setter Property="HeaderTemplateSelector" Value="{Binding Path=Root.Manager.DocumentPaneMenuItemHeaderTemplateSelector}"/>
                                            <Setter Property="IconTemplate" Value="{Binding Path=Root.Manager.IconContentTemplate}"/>
                                            <Setter Property="IconTemplateSelector" Value="{Binding Path=Root.Manager.IconContentTemplateSelector}"/>
                                            <Setter Property="Command" Value="{Binding Path=., Converter={StaticResource ActivateCommandLayoutItemFromLayoutModelConverter}}"/>
                                        </Style>
                                    </avalonDockControls:ContextMenuEx.ItemContainerStyle>
                                </avalonDockControls:ContextMenuEx>
                            </avalonDockControls:DropDownButton.DropDownContextMenu>
                            <Image Source="/AvalonDock;component/Images/PinDocMenu.png"/>
                        </avalonDockControls:DropDownButton>                            
                    </Grid>
                    <Border x:Name="ContentPanel" 
                            VerticalAlignment="Stretch" 
                            HorizontalAlignment="Stretch"  
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}" 
                            Grid.Column="0" 
                            KeyboardNavigation.DirectionalNavigation="Contained" 
                            Grid.Row="0"
                            KeyboardNavigation.TabIndex="2" 
                            KeyboardNavigation.TabNavigation="Cycle">
                        <ContentPresenter x:Name="PART_SelectedContentHost" 
                                          ContentSource="SelectedContent" 
                                          Margin="{TemplateBinding Padding}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Model.ChildrenCount}" Value="0">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="MenuDropDownButton" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="Visibility" Value="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}"/>
                <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
                <Setter Property="ToolTip" Value="{Binding ToolTip}"/>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <avalonDockControls:LayoutDocumentTabItem Model="{Binding}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <avalonDockControls:LayoutDocumentControl Model="{Binding}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

当您拥有新样式时，只需使用 DockingManager 的 DocumentPaneControlStyle 属性插入它：

<ad:DockingManager DocumentPaneControlStyle="{StaticResource MyCustomDocumentPaneControlStyle}">
...
</ad:DockingManager>

阿多