Document-панели¶

Объекты Document Pane (DocumentPane) позволяют создать интерфейс с вкладками (MDI - Multiple Document Interface) в вашем приложении. Document-панели предназначены для отображения основного содержимого вашего окна. Когда вы объединяете их в контейнере DocumentGroup, они отображаются в виде вкладок.

docking-documentpanes

Операции перетаскивания и контекстные меню позволяют изменять порядок Document-панелей, перемещать Document-панели в другой контейнер или переводить их в плавающий режим.

docking-work-with-documentpanes

Вы также можете добавлять обычные Dock-панели в контейнер DocumentGroup. Все элементы, добавленные в контейнер DocumentGroup, отображаются в виде вкладок.

Объекты DocumentPane и DockPane имеют множество общих функций, так как DocumentPane является потомком класса DockPane. DocumentGroup является потомком TabbedGroup. Таким образом, эти объекты имеют много общего.

Как и док-панели, объекты DocumentPane и DocumentGroup могут быть объединены с другими элементами докинга в разделяемом контейнере (контейнере DockGroup), который располагает свои дочерние элементы рядом друг с другом, горизонтально или вертикально.

docking-documentgroup-in-splitcontainer

Следующий код XAML создает макет элементов докинга, показанный на изображении выше.

xmlns:mxd="https://schemas.eremexcontrols.net/avalonia/docking"

<mxd:DockManager>
    <mxd:DockGroup Orientation="Horizontal">
        <mxd:DocumentGroup>
            <mxd:DocumentPane Header="BarsGroupView.axaml"/>
            <mxd:DocumentPane Header="BarItemsPageView.axaml"/>
        </mxd:DocumentGroup>
        <mxd:DockPane Header="Properties"/>
    </mxd:DockGroup>
</mxd:DockManager>

Функция автоматического скрытия не поддерживается для объектов DocumentPane и DocumentGroup.

Использование MVVM для создания Docking UI¶

Вы можете использовать шаблон проектирования MVVM для заполнения Docking UI элементами докинга (Dock-панелями и Document-панелями). Используйте следующие члены API для этой цели:

DockManager.ItemsSource — Определяет список объектов, которые должны быть отображены как элементы докинга.
DockManager.ItemTemplate — Определяет шаблон, используемый для отображения объектов из списка DockManager.ItemsSource как элементов докинга.

Дополнительную информацию см. в разделе Использование шаблона MVVM для заполнения элементов докинга.

Содержимое и размер Document-панели¶

Указание содержимого¶

Вы можете использовать унаследованное свойство DockPane.Content для определения содержимого Document-панели в коде. В XAML вы можете определить содержимое панели между начальным и конечным тегами <DocumentPane>.

Унаследованное свойство DockPane.ContentTemplate позволяет указать шаблон, используемый для отображения объекта Content.

Указание размера¶

Для элементов докинга (панелей и контейнеров), которые отображаются внутри разделяемых контейнеров (объектов DockGroup), следующие свойства позволяют установить размер элемента:

DockWidth (для панелей, расположенных горизонтально в своих родительских контейнерах)
DockHeight (для панелей, расположенных вертикально в своих родительских контейнерах)

Note

Document-панели отображаются в виде вкладок, когда они находятся внутри контейнера Document Group. Вы можете изменять только размер контейнера Document Group, а не размер его дочерних Document-панелей. Вы можете установить размер отдельных Document-панелей, если они не отображаются в виде вкладок.

Следующий пример располагает DocumentGroup и DockPane горизонтально в разделяемом контейнере и устанавливает ширину DocumentGroup в 4 раза больше ширины DockPane.

docking-documentgroup-size-example

xmlns:mxd="https://schemas.eremexcontrols.net/avalonia/docking"

<mxd:DockManager Grid.Row="1" Name="dockManager1">
    <mxd:DockGroup Orientation="Horizontal">
        <mxd:DocumentGroup DockWidth="4*">
            <mxd:DocumentPane Name="documentPane1" Header="Document 1"/>
            <mxd:DocumentPane Name="documentPane2" Header="Document 2"/>
        </mxd:DocumentGroup>
        <mxd:DockPane DockWidth="*" Header="Properties"/>
    </mxd:DockGroup>
</mxd:DockManager>

Свойства DockWidth и DockHeight не влияют на размер Document-панелей в плавающем состоянии. См. следующую ссылку для получения дополнительной информации:

Установка плавающих границ

Указание настроек заголовка¶

Используйте унаследованные свойства DockPane.Header и DockPane.HeaderTemplate для установки заголовков Document-панелей. Для отображения изображений используйте унаследованные свойства DockPane.Glyph и DockPane.GlyphSize.

Обычно Document-панели размещаются внутри контейнера DocumentGroup, где они отображаются в виде вкладок. В этом случае вы также можете использовать унаследованные свойства DockPane.TabHeader, DockPane.TabHeaderTemplate, DockPane.TabGlyph и DockPane.TabGlyphSize для указания текста заголовка и изображений. Если эти свойства не установлены, свойства DockPane.Header, DockPane.HeaderTemplate, DockPane.Glyph и DockPane.GlyphSize определяют текст и изображения, отображаемые на вкладках.

Связанный API¶

DockPane.ShowGlyphMode — Определяет видимость и положение глифа в заголовке панели.
DockPane.ShowTabGlyphMode — Определяет видимость и положение глифа во вкладке, когда панель размещена в контейнере с вкладками (например, DocumentGroup).

Создание интерфейса с вкладками¶

Вы можете объединить Document-панели в контейнере DocumentGroup, чтобы создать интерфейс с вкладками (MDI - Multiple Document Interface). DocumentGroup, как и его предок (TabbedGroup), является контейнером, который представляет свои дочерние элементы в виде вкладок.

docking-documentgroup

Следующий пример создает контейнер DocumentGroup с тремя объектами DocumentPane.

xmlns:mxd="https://schemas.eremexcontrols.net/avalonia/docking"

<mxd:DocumentGroup Name="documentGroup1" DockWidth="5*" >
    <mxd:DocumentPane Name="document1" Header="Document 1"></mxd:DocumentPane>
    <mxd:DocumentPane Name="document2" Header="Document 2"></mxd:DocumentPane>
    <mxd:DocumentPane Name="document3" Header="Document 3"></mxd:DocumentPane>
</mxd:DocumentGroup>

Чтобы объединить Document-панели в контейнере с вкладками в code-behind, используйте метод DockManager.Dock с параметром dockType, установленным в DockType.Fill. Если вы закрепляете документ на другом документе, который уже размещен в контейнере с вкладками, исходная панель отображается как дополнительная вкладка внутри контейнера с вкладками.

// Закрепление документа на другом документе
dockManager1.Dock(document4, document1, DockType.Fill);
// или закрепление документа на группе:
dockManager1.Dock(document5, documentGroup1, DockType.Fill);

Доступ к контейнеру с вкладками¶

Для Document-панелей, находящихся в контейнере DocumentGroup, используйте унаследованное свойство DockPane.DockParent для получения родительского контейнера с вкладками.

Связанный API¶

Следующий список показывает часто используемые члены API, которые позволяют настраивать объекты DocumentPane и DocumentGroup. Большинство этих настроек унаследованы от базовых классов объектов.

DockManager.Dock — Позволяет закрепить элемент (например, объект DocumentPane) на другом элементе. Установите параметр dockType метода в DockType.Fill, чтобы создать контейнер с вкладками.
DockItemBase.DockParent — Позволяет получить непосредственного родителя объекта докинга. Для объектов DocumentPane, объединенных в контейнере DocumentGroup, свойство DockParent возвращает этот контейнер.
DockPane.CloseCommand — Команда, которая вызывается при закрытии панели. Панель может быть закрыта щелчком по кнопке 'Закрыть' (см. DockPane.AllowClose и TabbedGroup.CloseButtonShowMode). Закрытые панели можно получить из коллекции DockManager.ClosedPanes.
DockPane.ShowTabGlyphMode — Определяет видимость и положение глифа в заголовке (вкладке) панели, когда панель размещена в контейнере с вкладками.
DockPane.TabGlyphSize — Задает размер глифа вкладки (DockPane.TabGlyph). Это свойство действует, когда панель размещена в контейнере с вкладками.
DockPane.TabGlyph — Задает глиф, отображаемый на вкладке. Это свойство действует, когда панель размещена в контейнере с вкладками.
DockPane.TabHeaderTemplate — Задает шаблон для отображения вкладки. Это свойство действует, когда панель размещена в контейнере с вкладками.
DockPane.TabHeader — Задает текст для отображения на вкладке. Это свойство действует, когда панель размещена в контейнере с вкладками.
TabbedGroup.AllowFloat — Определяет, может ли пользователь перевести контейнер с вкладками в плавающий режим.
TabbedGroup.CloseButtonShowMode — Определяет, отображать ли и где отображать кнопки 'Закрыть' для дочерних панелей в области вкладок: нигде в области вкладок, в каждой панели, в активной панели или в области полосы вкладок. Свойство TabbedGroup.CloseButtonShowMode не влияет на отображение кнопки 'Закрыть' в заголовке панели. См. Закрытие Document-панелей.
TabbedGroup.SelectTabOnClose — Определяет, какая вкладка выбирается при закрытии вкладки: недавно открытая вкладка, следующая вкладка или предыдущая вкладка.
TabbedGroup.SelectedIndex — Задает отсчитываемый от нуля индекс выбранной вкладки в текущем контейнере с вкладками. Вы можете использовать свойство SelectedIndex для выбора конкретной вкладки.
TabbedGroup.ShowTabStripForSingleChild — Определяет, отображать ли полосу вкладок, когда контейнер с вкладками содержит одного дочернего элемента. Если этому свойству присвоено значение true, полоса вкладок отображается только в том случае, если контейнер содержит два или более дочерних элементов.
TabbedGroup.TabHeaderOrientation — Определяет, располагать ли вкладки горизонтально или вертикально. В режиме TabHeaderOrientation.Auto вкладки располагаются горизонтально, если свойство TabbedGroup.TabStripPlacement установлено в Top или Bottom. Вкладки располагаются вертикально, если свойство TabbedGroup.TabStripPlacement установлено в Left или Right.
TabbedGroup.TabStripLayoutType — Определяет, как отображаются вкладки. TabStripLayoutType.Scroll - Заголовки вкладок достаточно широки, чтобы отображать содержимое заголовков вкладок. Кнопки прокрутки появляются в области заголовка вкладки, если недостаточно места для отображения всех заголовков вкладок полностью. TabStripLayoutType.Stretch - Все заголовки вкладок расположены в линию, растягиваясь по ширине контрола. Они имеют одинаковую ширину или высоту в зависимости от положения полосы вкладок (см. TabbedGroup.TabStripPlacement). TabStripLayoutType.MultiLine - Заголовки вкладок располагаются в несколько строк, если недостаточно места для их отображения в одной строке.
TabbedGroup.TabStripPlacement — Определяет край, вдоль которого отображаются вкладки.

Активация Document-панелей¶

Унаследованное свойство DockPane.IsActive Document-панели позволяет переместить фокус на конкретную Document-панель. Используйте свойство DockManager.ActiveDockItem для получения активного элемента докинга.

Когда Document-панели объединены в контейнере DocumentGroup, вы можете использовать свойство DocumentGroup.SelectedIndex для выбора конкретной Document-панели.

Закрытие Document-панелей¶

Когда Document-панели размещены внутри контейнера DocumentGroup, они отображают кнопки 'Закрыть' на вкладках. Кнопки 'Закрыть' позволяют пользователю закрывать панели. В коде вы можете закрыть панель с помощью метода DockManager.Close.

docking-documentpane-closebutton

Используйте свойство DockPane.AllowClose, чтобы скрыть кнопку 'Закрыть' для панели и thus предотвратить закрытие панели с помощью этой кнопки.

Когда панель закрывается, активируется унаследованная команда DockPane.CloseCommand.

Все закрытые панели можно accessed из коллекции DockManager.ClosedPanes.

Шаблон проектирования MVVM позволяет предоставлять Document-панели из коллекции DockManager.ItemsSource. При закрытии Document-панели вы можете удалить панель из коллекции DockManager.ItemsSource. В этом случае панель также удаляется из коллекции DockManager.ClosedPanes.

Следующий код из демо "IDE Layout" показывает указание команды CloseCommand для newly opened document. Эта команда удаляет панель из коллекции Documents (DockManager.ItemsSource). См. демо "IDE Layout" для полного примера.

public void Open(SolutionFile solutionFile)
{
    var document = Documents.FirstOrDefault(x => x.Uri == solutionFile.Uri);
    if (document == null)
    {
        document = new IdeLayoutDocumentViewModel
        {
            Header = solutionFile.Filename,
            Uri = solutionFile.Uri
        };
        document.CloseCommand = new RelayCommand(() => Documents.Remove(document));
        Documents.Add(document);
    }
    document.IsActive = true;
}

Свойство CloseButtonShowMode контейнера DocumentGroup позволяет отображать дополнительные кнопки 'Закрыть' в области полосы вкладок. Вы можете отображать кнопки 'Закрыть' на всех вкладках, на активной вкладке или в области полосы вкладок. На изображении ниже кнопка 'Закрыть' отображается в области заголовка (свойство CloseButtonShowMode установлено в TabControlCloseButtonShowMode.InHeaderPanel).

docking-documentgroup-closebuttoninheader

Событие DockManager.DockOperationStarting

Закрытие Document-панелей¶

Когда Document-панели размещены внутри контейнера DocumentGroup, они отображают кнопки 'Закрыть' на вкладках. Кнопки 'Закрыть' позволяют пользователю закрывать панели. В коде вы можете закрыть панель с помощью метода DockManager.Close.

docking-documentpane-closebutton

Используйте свойство DockPane.AllowClose, чтобы скрыть кнопку 'Закрыть' для панели и таким образом предотвратить закрытие панели с помощью этой кнопки.

Когда панель закрывается, активируется унаследованная команда DockPane.CloseCommand.

Все закрытые панели можно получить из коллекции DockManager.ClosedPanes.

Шаблон проектирования MVVM позволяет предоставлять Document-панели из коллекции DockManager.ItemsSource. При закрытии Document-панели вы можете удалить панель из коллекции DockManager.ItemsSource. В этом случае панель также удаляется из коллекции DockManager.ClosedPanes.

Следующий код из демо "IDE Layout" показывает указание команды CloseCommand для вновь открытого документа. Эта команда удаляет панель из коллекции Documents (DockManager.ItemsSource). См. демо "IDE Layout" для полного примера.

public void Open(SolutionFile solutionFile)
{
    var document = Documents.FirstOrDefault(x => x.Uri == solutionFile.Uri);
    if (document == null)
    {
        document = new IdeLayoutDocumentViewModel
        {
            Header = solutionFile.Filename,
            Uri = solutionFile.Uri
        };
        document.CloseCommand = new RelayCommand(() => Documents.Remove(document));
        Documents.Add(document);
    }
    document.IsActive = true;
}

Свойство CloseButtonShowMode контейнера DocumentGroup позволяет отображать дополнительные кнопки 'Закрыть' в области полосы вкладок. Вы можете отображать кнопки 'Закрыть' на всех вкладках, на активной вкладке или в области полосы вкладок. На изображении ниже кнопка 'Закрыть' отображается в области полосы вкладок (свойство CloseButtonShowMode установлено в TabControlCloseButtonShowMode.InHeaderPanel).

docking-documentgroup-closebuttoninheader

Событие DockManager.DockOperationStarting позволяет предотвратить закрытие определенных панелей или выполнять пользовательские действия при закрытии панелей. Это событие не возникает, если панель удаляется из коллекции DockManager.ItemsSource при закрытии панели.

Опции времени выполнения для Document-панелей¶

Объекты DocumentPane содержат настройки, которые позволяют отключать определенные пользовательские операции во время выполнения. Эти настройки унаследованы от базового класса DockPane.

DockPane.AllowClose — Получает или задает, может ли пользователь закрыть панель. Установите это свойство в false, чтобы скрыть кнопку x (закрыть) панели. См. Закрытие Document-панелей.
DockPane.AllowFloat — Получает или задает, может ли пользователь перевести панель в плавающий режим. См. Плавающие Document-панели.
DockPane.AllowMaximize — Определяет видимость кнопки 'Развернуть' для панели в плавающем состоянии.
DockPane.AllowMinimize — Определяет видимость кнопки 'Свернуть' для панели в плавающем состоянии.

Эти опции не предотвращают выполнение соответствующих операций с панелями в коде.

Вы также можете обрабатывать событие DockManager.DockOperationStarting, чтобы динамически предотвращать определенные операции докинга или запускать пользовательскую логику при возникновении этих операций.

Плавающие Document-панели¶

Как и Dock-панели, Document-панели можно переводить в плавающий режим. В плавающем состоянии пользователь может перемещать Document-панель в пределах доступного экранного пространства. Плавающие документы размещаются в плавающих окнах.

docking-floating-documents

Доступ к плавающему окну¶

Когда панель переводится в плавающий режим, создается плавающее окно (контейнер), в котором размещается эта панель. Плавающие окна инкапсулируются объектами FloatGroup. Вы можете получить доступ к родительскому плавающему окну панели с помощью свойства DockItemBase.FloatGroup панели. Это свойство возвращает null, если панель не находится в плавающем состоянии.

Вы можете использовать следующие члены API для указания местоположения, размера, заголовка и глифа плавающего окна:

FloatGroup.FloatHeight
FloatGroup.FloatLocation
FloatGroup.FloatWidth
FloatGroup.Glyph
FloatGroup.Header
FloatGroup.HeaderTemplate
DockManager.DefaultFloatGroupHeader
DockManager.DefaultFloatGroupGlyph

Перевод Document-панелей в плавающий режим¶

Чтобы определить плавающую Document-панель в XAML, добавьте объект FloatGroup в коллекцию DockManager.FloatGroups, а затем добавьте панель DocumentPane в объект FloatGroup. Вы также можете обернуть объект DocumentPane в контейнер DocumentGroup, чтобы отображать документ в виде вкладки.

Используйте метод DockManager.Float для создания плавающего элемента докинга в code-behind.

Пример - Определение плавающих документов в XAML¶

Следующий пример создает два плавающих окна. Первое окно содержит объект DocumentPane. Второе окно отображает контейнер DocumentGroup с объектом DocumentPane.

docking-create-floating-documents-xaml

<mxd:DockManager.FloatGroups>
    <mxd:FloatGroup FloatLocation="200,200" FloatWidth="300" FloatHeight="150" >
        <mxd:DocumentPane Header="floating document"></mxd:DocumentPane>
    </mxd:FloatGroup>
    <mxd:FloatGroup FloatLocation="400,400" FloatWidth="300" FloatHeight="150" Header="floating window">
        <mxd:DocumentGroup>
            <mxd:DocumentPane Header="floating document in a container"></mxd:DocumentPane>
        </mxd:DocumentGroup>
    </mxd:FloatGroup>
</mxd:DockManager.FloatGroups>

Пример - Создание плавающих документов и настройка плавающего окна в Code Behind¶

Приведенный ниже код переводит активный документ в плавающий режим и устанавливает границы и заголовок для созданного плавающего окна.

docking-create-floating-documents-in-csharp

DocumentPane document = dockManager1.ActiveDockItem as DocumentPane;
if(document != null)
{
    dockManager1.Float(document);
    FloatGroup floatingWindow = document.FloatGroup;
    floatingWindow.FloatWidth = 300;
    floatingWindow.FloatHeight = 200;
    floatingWindow.Header = "floating window";
    document.FloatGroup.FloatLocation = dockManager1.PointToScreen(
        new Point(dockManager1.Bounds.Right - floatingWindow.FloatWidth,
        dockManager1.Bounds.Bottom - floatingWindow.FloatHeight));
}

Установка заголовка и глифа плавающего окна¶

Плавающее окно по умолчанию не имеет заголовка и глифа. Используйте свойства DockManager.DefaultFloatGroupHeader и DockManager.DefaultFloatGroupGlyph, чтобы указать заголовок и глиф по умолчанию для всех создаваемых плавающих окон.

Вы также можете указать заголовок и глиф для конкретного плавающего окна, используя соответствующие настройки объекта FloatGroup:

FloatGroup.Glyph
FloatGroup.Header
FloatGroup.HeaderTemplate
FloatGroup.ShowGlyphMode

dockManager1.Float(document);
FloatGroup floatingWindow = document.FloatGroup;
floatingWindow.Header = "floating window";

Установка плавающих границ¶

Когда Document-панель переводится в плавающий режим, ее предыдущий размер определяет начальный размер плавающего окна. Вы можете установить присоединенные свойства FloatGroup.FloatWidth, FloatGroup.FloatHeight и FloatGroup.FloatLocation, чтобы указать пользовательские плавающие границы.

<mxd:DocumentPane Name="documentPane1" Header="Document 1"
    mxd:FloatGroup.FloatWidth="500" mxd:FloatGroup.FloatHeight="400"/>

После того как элемент докинга становится плавающим, вы можете получить доступ к его родительскому плавающему окну (FloatGroup) и установить его границы.

Следующий пример переводит Document-панель в плавающий режим, получает доступ к созданному плавающему окну и устанавливает его размер.

using Eremex.AvaloniaUI.Controls.Docking;

dockManager1.Float(documentPane1);
FloatGroup floatingWindow = documentPane1.FloatGroup;
floatingWindow.FloatWidth = 400;
floatingWindow.FloatHeight = 300;
floatingWindow.FloatLocation = dockManager1.PointToScreen(new Point(100,100));

Связанный API¶

DockPane.FloatGroup — Возвращает плавающее окно (объект FloatGroup), содержащее текущую панель, когда панель находится в плавающем состоянии. Возвращает null, если панель не плавающая.
FloatGroup.FloatLocation — Задает положение группы с плавающим режимом относительно верхнего левого угла экрана.
FloatGroup.FloatHeight — Задает высоту FloatGroup.
FloatGroup.FloatWidth — Задает ширину FloatGroup.
FloatGroup.Header — Задает текст заголовка FloatGroup.
FloatGroup.HeaderTemplate — Задает шаблон заголовка FloatGroup.
FloatGroup.Glyph — Задает глиф FloatGroup.
DockManager.Float — Переводит элемент докинга (например, объект DocumentPane) в плавающий режим.
DockManager.FloatGroups — Коллекция плавающих групп (плавающих окон).

См. также¶

Как создать сложный макет докинга в Code Behind

^* Эта страница была переведена с помощью нейросети Deepseek.