Dock

AvaloniaUIKit.Dock

AvaloniaUIKit.Dock 包为 Dock.Avalonia 提供停靠布局，以及停靠区的标签栏、分割手柄与放置目标。

示例可交互

Dock — Avalonia UIKit

Live demo unavailable

<DockControl Width="640" Height="360" InitializeLayout="True" InitializeFactory="True">
  <DockControl.Factory>
    <Factory />
  </DockControl.Factory>
  <RootDock Id="Root" IsCollapsable="False" DefaultDockable="{Binding #Main}">
    <ProportionalDock x:Name="Main" Id="Main" Orientation="Vertical">
      <ProportionalDock Id="Top" Orientation="Horizontal">
        <ToolDock Id="Left" Proportion="0.35" Alignment="Left" ActiveDockable="{Binding #Explorer}">
          <Tool x:Name="Explorer" Id="Explorer" Title="Explorer">
            <TextBlock Text="Explorer" Margin="16" />
          </Tool>
          <Tool Id="Search" Title="Search">
            <TextBlock Text="Search" Margin="16" />
          </Tool>
        </ToolDock>
        <ProportionalDockSplitter />
        <DocumentDock Id="Documents" ActiveDockable="{Binding #Editor}">
          <Document x:Name="Editor" Id="Editor" Title="Editor">
            <TextBlock Text="Editor" Margin="16" />
          </Document>
          <Document Id="Readme" Title="README.md">
            <TextBlock Text="README.md" Margin="16" />
          </Document>
        </DocumentDock>
      </ProportionalDock>
      <ProportionalDockSplitter />
      <ToolDock Id="Bottom" Proportion="0.35" Alignment="Bottom" ActiveDockable="{Binding #Terminal}">
        <Tool x:Name="Terminal" Id="Terminal" Title="Terminal">
          <TextBlock Text="Terminal" Margin="16" />
        </Tool>
        <Tool Id="Problems" Title="Problems">
          <TextBlock Text="Problems" Margin="16" />
        </Tool>
      </ToolDock>
    </ProportionalDock>
  </RootDock>
</DockControl>

用法

Dock.Avalonia 把工具与文档排布到可拆分、可调整大小、可在各分组之间拖动并且可浮动的分组中。它的主题是单独的包：添加 AvaloniaUIKit.Dock，并在应用样式中把 UIKitDockTheme 放在 UIKitTheme 之后，以替代 Dock 自带的 DockFluentTheme 或 DockSimpleTheme。该包面向 Dock.Avalonia 12.1.0.6。

App.axaml

<Application xmlns="https://github.com/avaloniaui"
             xmlns:uikit="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit"
             xmlns:uikitdock="clr-namespace:AvaloniaUIKit;assembly=AvaloniaUIKit.Dock">
  <Application.Styles>
    <uikit:UIKitTheme />
    <uikitdock:UIKitDockTheme />
  </Application.Styles>
</Application>

含两个或更多可停靠项的分组带有标签栏：标签本身、标签之后的空白（把标签拖到此处即可加入该分组），以及一个带分组菜单（浮动、停靠、自动隐藏、关闭）的工具栏。只含一个工具的工具停靠区则改用带工具标题与菜单的标题栏。文档标签带有关闭按钮（Dock 的 CloseButtonShowMode），并且在设置 CanCreateDocument 时，工具栏中还会有一个新建按钮。

分割手柄不占空间：分组之间是一条细线，其中的胶囊随指针悬停、按下和拖动而变大。拖动标签时，指针下方的分组会显示它将落在何处：它的左三分之一或右三分之一会把标签左右分栏，它的上三分之一或下三分之一（位于中部时）会上下分栏，而在中间则把标签加入该分组。把标签拖到某个标签上，或拖到标签栏的空白处，同样会把它加入该分组。固定到边缘（自动隐藏）的工具沿边缘的一条条带排列。

浮动窗口与浏览器

Dock 会把拖动的工具或文档浮动到独立的窗口中。在没有窗口的环境（如浏览器）里，请设置 DockSettings.UseManagedWindows（或根停靠区的 FloatingWindowHostMode），让它们在停靠控件内部绘制。此时在 Avalonia 12 下，Dock 12.1.0.6 会把拖动预览遗留在停靠控件的角落；本站的实时演示将它隐藏。

NativeAOT

AvaloniaUIKit.Dock 自身没有裁剪警告，但 Dock.Avalonia 不可裁剪，因此不保证支持 NativeAOT。Dock 按名称绑定其分割手柄的 CanResize 与 ResizePreview：裁剪时，请在你的模型包的分割器模型上保留这些成员。

Program.cs

[DynamicDependency(DynamicallyAccessedMemberTypes.PublicProperties,
    typeof(Dock.Model.Avalonia.Controls.ProportionalDockSplitter))]
public static void Main(string[] args) => ...

示例

带关闭按钮与新建按钮的文档停靠区。

文档可交互

Live demo unavailable

<DockControl Width="640" Height="280" InitializeLayout="True" InitializeFactory="True">
  <DockControl.Factory>
    <Factory />
  </DockControl.Factory>
  <RootDock Id="Root" IsCollapsable="False" DefaultDockable="{Binding #Files}">
    <DocumentDock x:Name="Files" Id="Files" CanCreateDocument="True" ActiveDockable="{Binding #Program}">
      <Document x:Name="Program" Id="Program" Title="Program.cs">
        <TextBlock Text="Program.cs" Margin="16" />
      </Document>
      <Document Id="App" Title="App.axaml">
        <TextBlock Text="App.axaml" Margin="16" />
      </Document>
      <Document Id="Readme" Title="README.md">
        <TextBlock Text="README.md" Margin="16" />
      </Document>
    </DocumentDock>
  </RootDock>
</DockControl>

固定到左边缘的工具；点击其中一个即可显示它。

固定工具可交互

Live demo unavailable

<DockControl Width="640" Height="280" InitializeLayout="True" InitializeFactory="True">
  <DockControl.Factory>
    <Factory />
  </DockControl.Factory>
  <RootDock Id="Root" IsCollapsable="False" DefaultDockable="{Binding #Center}">
    <RootDock.LeftPinnedDockables>
      <Tool Id="Outline" Title="Outline">
        <TextBlock Text="Outline" Margin="16" />
      </Tool>
      <Tool Id="Git" Title="Source Control">
        <TextBlock Text="Source Control" Margin="16" />
      </Tool>
    </RootDock.LeftPinnedDockables>
    <ToolDock x:Name="Center" Id="Center" ActiveDockable="{Binding #Editor}">
      <Tool x:Name="Editor" Id="Editor" Title="Editor">
        <TextBlock Text="Editor" Margin="16" />
      </Tool>
    </ToolDock>
  </RootDock>
</DockControl>

Dock

#用法

#浮动窗口与浏览器

#NativeAOT

#示例

用法

浮动窗口与浏览器

NativeAOT

示例