Skip to content

Dock-панели и контейнеры

Dock-панель (Eremex.AvaloniaUI.Controls.Docking.DockPane) — это панель, которую можно закреплять, переводить в плавающий режим, автоматически скрывать и объединять в группу с вкладками (контейнер).

Dock-панели и Document-панели являются базовыми элементами Docking UI. Dock-панели позволяют создавать панели инструментов, в то время как Document-панели позволяют создавать интерфейс с вкладками (MDI - Multiple Document Interface).

docking-ui-dockpanes-and-documentpanes-v0

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

Когда вы определяете макет панелей в XAML или code-behind, вам обычно необходимо использовать специальные док-контейнеры для объединения панелей и представления их определенным образом.

docking-ui-dockpanes-and-documentpanes-v3

Поддерживаются следующие док-контейнеры:

  • DockGroup (разделяемый контейнер) — Отображает элементы докинга (Dock-панели и контейнеры) рядом друг с другом, горизонтально или вертикально. Дочерние элементы докинга разделены разделителями, которые позволяют изменять размер панелей.
  • TabbedGroup (контейнер с вкладками) — Отображает элементы докинга в виде вкладок.
  • AutoHideGroup — Дочерние Dock-панели этого контейнера обладают функцией автоматического скрытия. Автоматически скрытая панель появляется, когда пользователь нажимает на заголовок панели.
  • FloatGroup — Отображает элементы докинга в плавающем окне.

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

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

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

<mxd:DockManager>
    <mxd:DockGroup Orientation="Horizontal">
        <mxd:DockGroup Orientation="Vertical" DockWidth="3*">
            <mxd:DocumentGroup DockHeight="2*">
                <mxd:DocumentPane Header="BarItemsPageView.axaml"/>
                <mxd:DocumentPane Header="PageViewModelBase.cs"/>
            </mxd:DocumentGroup>
            <mxd:DockGroup Orientation="Horizontal" DockHeight="*">
                <mxd:DockPane Header="Error List"/>
                <mxd:DockPane Header="Output"/>
            </mxd:DockGroup>
        </mxd:DockGroup>
        <mxd:TabbedGroup DockWidth="*">
            <mxd:DockPane Header="Properties"/>
            <mxd:DockPane Header="Debug"/>
        </mxd:TabbedGroup>
    </mxd:DockGroup>
    <mxd:DockManager.AutoHideGroups>
        <mxd:AutoHideGroup Dock="Left">
            <mxd:DockPane Header="Explorer"/>
        </mxd:AutoHideGroup>
    </mxd:DockManager.AutoHideGroups>
    <mxd:DockManager.FloatGroups>
        <mxd:FloatGroup FloatLocation="300,300">
            <mxd:DockPane Header="Search"/>
        </mxd:FloatGroup>
    </mxd:DockManager.FloatGroups>
</mxd:DockManager>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете указать различные параметры заголовка для панели, когда она размещена внутри контейнера с вкладками. Используйте для этого свойства DockPane.TabHeader, DockPane.TabHeaderTemplate, DockPane.TabGlyph и DockPane.TabGlyphSize.

Связанный API

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

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

Свойство DockPane.IsActive позволяет переместить фокус на определенную панель. Например, если панель автоматически скрыта, она разворачивается и получает фокус, когда вы устанавливаете свойство DockPane.IsActive в true.

Используйте свойство DockManager.ActiveDockItem для получения активного элемента докинга.

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

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

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

docking-dockpane-closebutton

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

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

Когда панели объединены в контейнер с вкладками, свойство CloseButtonShowMode контейнера позволяет отображать дополнительные кнопки 'Закрыть' в области полосы вкладок. Вы можете отображать кнопки 'Закрыть' на всех вкладках, на активной вкладке или в области полосы вкладок.

docking-tabcontainer-closebuttonsinalltabs

Для плавающих контейнеров с вкладками кнопка 'Закрыть' в заголовке контейнера с вкладками может закрывать либо активную панель, либо все панели. Используйте свойство DockManager.CloseOnlyActivePane для выбора требуемого поведения.

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

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

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

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

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

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

Разделяемые панели

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

docking-dockgroup-container

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

docking-create-split-container

Дочерними элементами контейнера DockGroup могут быть панели (DockPane и DocumentPane) и другие контейнеры (DockGroup и DocumentGroup).

Расположение элементов по умолчанию в DockGroup — горизонтальное. Установите свойство DockGroup.Orientation в Vertical, чтобы расположить элементы вертикально.

Пример - Создание простого макета Dock-панелей

Приведенный ниже код XAML создает макет док-панелей, показанный ниже.

dockgroup-example-simple-layout

<mxd:DockManager Grid.Column="0" Grid.Row="1">
    <mxd:DockGroup Name="rootDockGroup">
        <mxd:DockGroup Name="dockGroup1" DockWidth="3*" Orientation="Vertical">
            <mxd:DockGroup Name="dockGroup2" DockHeight="4*">
                <mxd:DockPane DockWidth="*" Header="Explorer"/>
                <mxd:DocumentGroup DockWidth="3*">
                    <mxd:DocumentPane Header="File1.cs"/>
                    <mxd:DocumentPane Header="File2.cs"/>
                </mxd:DocumentGroup>
            </mxd:DockGroup>
            <mxd:DockPane Header="Error List" DockHeight="*"/>
        </mxd:DockGroup>
        <mxd:DockPane Header="Properties" DockWidth="*"/>
    </mxd:DockGroup>
</mxd:DockManager>

Разделяемые панели в Code-Behind

Чтобы закрепить панель рядом с другой панелью (или группой) в code-behind, используйте метод DockManager.Dock с параметром dockType, установленным в DockType.Left, DockType.Right, DockType.Top или DockType.Bottom.

Метод DockManager.Dock не обязательно создает новый DockGroup. Если требуемая ориентация и ориентация целевой группы совпадают, исходная панель добавляется в родительскую группу целевой панели. Новый DockGroup создается, если ориентация новой группы не совпадает с ориентацией целевой группы.

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

Пример - Отображение панелей рядом друг с другом в Code-Behind

Следующий код закрепляет панели Explorer и Error List рядом с панелью Properties.

dockgroup-example-three-panels

using Eremex.AvaloniaUI.Controls.Docking;

dockManager1.Dock(dockPaneExplorer, dockPaneProperties, DockType.Left);
dockManager1.Dock(dockPaneErrorList, dockPaneProperties, DockType.Bottom);

Связанный API

  • DockManager.Dock — Позволяет закрепить элемент докинга (например, панель) рядом с другим элементом докинга. Установите параметр dockType в DockType.Left, DockType.Right, DockType.Top или DockType.Bottom, чтобы создать разделяемый контейнер.
  • DockItemBase.DockParent — Позволяет получить непосредственного родителя объекта DockPane или другого элемента докинга.

Плавающие панели

Библиотека Docking поддерживает плавающие панели, которые можно свободно перемещать в пределах доступного экранного пространства. Плавающие панели размещаются в плавающих окнах.

dockingui-floatingdockpane

Пользователь может перетащить панель мышью из закрепленного состояния, чтобы перевести панель в плавающий режим.

docking-create-floating-panels

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

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

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

  • FloatGroup.FloatHeight
  • FloatGroup.FloatLocation
  • FloatGroup.FloatWidth
  • FloatGroup.Glyph
  • FloatGroup.Header
  • FloatGroup.HeaderTemplate

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

Чтобы определить плавающую панель в XAML, добавьте контейнер FloatGroup в коллекцию DockManager.FloatGroups, а затем добавьте панель DockPane в контейнер FloatGroup.

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

Пример - Определение плавающей панели в XAML

Следующий пример создает плавающую панель в XAML и задает позицию и размер созданного плавающего окна.

<mxd:DockManager.FloatGroups>
    <mxd:FloatGroup FloatLocation="600,600">
        <mxd:DockPane Name="dockPaneExplorer1" Header="Explorer-float">
            ...
        </mxd:DockPane>
    </mxd:FloatGroup>
</mxd:DockManager.FloatGroups>

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

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

dockManager1.Float(dockPaneExplorer);
dockManager1.Dock(dockPaneSearch, dockPaneExplorer, DockType.Right);
FloatGroup floatingWindow = dockPaneExplorer.FloatGroup;
floatingWindow.Header = "My App";
floatingWindow.FloatWidth = 300;
floatingWindow.FloatHeight = 200;
floatingWindow.FloatLocation = dockManager1.PointToScreen(
    new Point(dockManager1.Bounds.Right - floatingWindow.FloatWidth, 
    dockManager1.Bounds.Bottom - floatingWindow.FloatHeight));

Установка заголовка и изображения плавающего окна

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

docking-floatingwindow-header-empty

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

  • FloatGroup.Glyph — Изображение для отображения в заголовке.
  • FloatGroup.GlyphSize — Размер изображения.
  • FloatGroup.Header — Объект для отображения в заголовке. Используйте FloatGroup.WindowTitle, чтобы указать строку для отображения в заголовке вместо объекта.
  • FloatGroup.HeaderTemplate — Шаблон для отображения объекта FloatGroup.Header.
  • FloatGroup.ShowGlyphMode — Получает или задает положение и видимость изображения FloatGroup.Glyph в заголовке.
  • FloatGroup.WindowIcon — Объект WindowIcon, представляющий значок для отображения в заголовке. Если WindowIcon не указан, в заголовке отображается изображение, указанное свойством Glyph.
  • FloatGroup.WindowTitle — Текст для отображения в заголовке. Если WindowTitle не указан, в заголовке отображается текстовое представление объекта Header.

Плавающие окна создаются динамически, когда панели переводятся в плавающий режим. Для инициализации свойств динамически создаваемых плавающих окон обработайте событие DockManager.RegisterDockItem.

private void DockManager1_RegisterDockItem(object sender, Eremex.AvaloniaUI.Controls.Docking.DockItemEventArgs e)
{
    if (e.Item is FloatGroup floatGroup)
    {
        floatGroup.Header = "Demo App";
    }
}

docking-floatingwindow-header-custom-text

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

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

<mxd:DockPane DockWidth="*" Header="Properties"
              mxd:FloatGroup.FloatWidth="300"
              mxd:FloatGroup.FloatHeight="150"
              />

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

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

using Eremex.AvaloniaUI.Controls.Docking;

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

Другой способ указания настроек для созданных объектов FloatGroup — обработка события DockOperationCompleted для доступа к вновь созданным объектам FloatGroup и настройки их параметров.

Связанный API

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

Вкладки

Пользователь может перетащить панель в центр другой панели, чтобы объединить панели в контейнер с вкладками.

docking-create-tab-container

Чтобы расположить панели в виде вкладок в коде, объедините их в контейнер TabbedGroup.

Пример - Отображение Dock-панелей в виде вкладок в XAML

Приведенный ниже код XAML создает макет док-панелей, показанный ниже.

<mxd:DockManager Grid.Column="0" Grid.Row="1">
    <mxd:DockGroup Name="rootDockGroup">
        <mxd:DockGroup Name="dockGroup1" DockWidth="3*" Orientation="Vertical">
            <mxd:DockGroup Name="dockGroup2" DockHeight="4*">
                <mxd:DockPane DockWidth="*" Header="Explorer"/>
                <mxd:DocumentGroup DockWidth="3*">
                    <mxd:DocumentPane Header="File1.cs"/>
                    <mxd:DocumentPane Header="File2.cs"/>
                </mxd:DocumentGroup>
            </mxd:DockGroup>
            <mxd:DockPane Header="Error List" DockHeight="*"/>
        </mxd:DockGroup>
        <mxd:DockPane Header="Properties" DockWidth="*"/>
    </mxd:DockGroup>
</mxd:DockManager>

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

Пример - Отображение Dock-панелей в виде вкладок в Code-Behind

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

tabbedgroup-example-three-panels

using Eremex.AvaloniaUI.Controls.Docking;

dockManager1.Dock(dockPaneExplorer, dockPaneProperties, DockType.Fill);
dockManager1.Dock(dockPaneErrorList, dockPaneProperties, DockType.Fill);

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

Для панелей, находящихся в контейнере с вкладками, используйте свойство DockPane.DockParent для получения родительского контейнера с вкладками (объекта TabbedGroup).

Связанный API

  • DockManager.Dock — Позволяет закрепить элемент (например, панель) на другом элементе. Установите параметр dockType метода в DockType.Fill, чтобы создать контейнер с вкладками.
  • DockItemBase.DockParent — Позволяет получить непосредственного родителя объекта DockPane или другого элемента докинга. Для панелей, объединенных в контейнер с вкладками, свойство DockParent возвращает родительский объект TabbedGroup.
  • 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 не влияет на отображение кнопки 'Закрыть' в заголовке панели. См. Закрытие панелей.
  • 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 — Определяет край, вдоль которого отображаются вкладки.

Автоматически скрываемые панели

Во время выполнения пользователь может нажать кнопку 'Закрепить' на панели (docking-pane-pin-button) или выбрать команду 'Автоматически скрывать' в контекстном меню, чтобы включить режим автоматического скрытия для панели.

docking-create-autohide-panels

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

Чтобы создать автоматически скрываемые панели в коде, используйте контейнеры AutoHideGroup. См. Создание автоматически скрываемых панелей.

Скрытие кнопок 'Закрепить'

Установите опцию DockPane.AllowAutoHide в false, чтобы предотвратить включение пользователем режима автоматического скрытия для конкретной панели. Эта опция скрывает кнопку 'Закрепить' и пункт контекстного меню 'Автоматически скрывать' для панели.

Кнопки 'Закрепить' недоступны для плавающих панелей.

Автоматически скрываемые панели с вкладками

Когда панели отображаются в виде вкладок на определенном краю DockManager, щелчок по кнопке 'Закрепить' любой панели по умолчанию включает функцию автоматического скрытия для всех панелей текущего контейнера с вкладками. Это действие создает контейнер AutoHideGroup на указанном краю DockManager и перемещает все панели из контейнера с вкладками в контейнер AutoHideGroup. И наоборот, когда вы открепляете любую панель в этом AutoHideGroup, AutoHideGroup преобразуется в контейнер с вкладками (TabGroup).

docking-create-autohide-panels-from-tabbedgroup

Установите свойство DockManager.AutoHideOnlyActivePane в true, чтобы переключать функцию автоматического скрытия только для активной панели, сохраняя при этом другие панели контейнера с вкладками/контейнера автоматического скрытия нетронутыми.

Создание автоматически скрываемых панелей

Чтобы создать автоматически скрываемые панели в XAML, добавьте контейнеры AutoHideGroup с панелями в коллекцию DockManager.AutoHideGroups. Свойство AutoHideGroup.Dock позволяет указать край DockManager, на котором будет отображаться контейнер автоматического скрытия.

Чтобы включить функцию автоматического скрытия для панели в code-behind, используйте метод DockManager.AutoHide.

Пример - Создание автоматически скрываемых панелей в XAML

Следующий код создает два контейнера автоматического скрытия на левом и правом краях DockManager.

autohidepanels-create-in-xaml

<mxd:DockManager Name="dockManager1" Grid.Column="0" Grid.Row="1">
    <mxd:DockManager.AutoHideGroups>
        <mxd:AutoHideGroup Dock="Right">
            <mxd:DockPane Name="dockPaneExplorer1" Header="Explorer" mxd:AutoHideGroup.AutoHideWidth="200" />
            <mxd:DockPane Name="dockPaneErrors1" Header="Error List" mxd:AutoHideGroup.AutoHideWidth="200"/>
            <mxd:DockPane Name="dockPaneProperties1" Header="Properties" mxd:AutoHideGroup.AutoHideWidth="200"/>
        </mxd:AutoHideGroup>
        <mxd:AutoHideGroup Dock="Left">
            <mxd:DockPane Name="dockPaneCallStack1" Header="Call Stack" mxd:AutoHideGroup.AutoHideWidth="200"/>
            <mxd:DockPane Name="dockPaneWatch1" Header="Watch" mxd:AutoHideGroup.AutoHideWidth="200"/>
        </mxd:AutoHideGroup>
    </mxd:DockManager.AutoHideGroups>

    <mxd:DockGroup Margin="6" Name="rootDockGroup">
        <mxd:DocumentGroup DockWidth="*">
            <mxd:DocumentPane Header="File1.cs"/>
            <mxd:DocumentPane Header="File2.cs"/>
        </mxd:DocumentGroup>
    </mxd:DockGroup>
</mxd:DockManager>

Пример - Включение функции автоматического скрытия для панелей в Code-Behind

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

dockManager1.AutoHide(dockPaneExplorer1);
dockManager1.ExpandAutoHidePanel(dockPaneExplorer1);

Доступ к контейнеру автоматического скрытия

Чтобы получить доступ к контейнеру AutoHideGroup, в котором размещается автоматически скрываемая панель, используйте свойство DockItemBase.AutoHideGroup.

Развертывание и свертывание автоматически скрываемой панели

Методы DockManager.ExpandAutoHidePanel и DockManager.CollapseAutoHidePanel позволяют отображать и сворачивать автоматически скрываемую панель. Свойство DockPane.IsActive позволяет сфокусироваться на любой панели. Для автоматически скрываемой панели это свойство разворачивает панель (если она свернута), а затем фокусируется на ней.

Установка размера для развернутых автоматически скрываемых панелей

Когда панель становится автоматически скрываемой, ее предыдущая ширина/высота используется в качестве размера по умолчанию для автоматически скрываемой панели в развернутом состоянии. Вы можете использовать присоединенные свойства AutoHideGroup.AutoHideWidth и AutoHideGroup.AutoHideHeight для установки пользовательской ширины/высоты развертывания для автоматически скрываемых панелей.

<mxd:DockPane Name="dockPane1" DockWidth="*" Header="Properties"
             mxd:AutoHideGroup.AutoHideWidth="200" />

Если пользователь изменяет размер панели в развернутом состоянии, новый размер сохраняется в свойстве AutoHideGroup.AutoHideWidth или AutoHideGroup.AutoHideHeight и применяется повторно при следующем развертывании панели.

Встроенные автоматически скрываемые панели

Свойство DockManager.AutoHideMode позволяет указать, как отображается автоматически скрываемая панель при развертывании. Поддерживаются следующие режимы отображения:

  • AutoHideMode.Default (режим по умолчанию) - При развертывании автоматически скрываемая панель перекрывает другие элементы докинга.

DockManager-AutoHideMode-Default

  • AutoHideMode.Inline — При развертывании автоматически скрываемая панель сдвигает соседние элементы докинга.

DockManager-AutoHideMode-Inline

Связанный API

  • DockManager.AutoHideGroups — Коллекция объектов AutoHideGroup, в которых размещаются автоматически скрываемые панели. Используйте эту коллекцию для добавления и доступа к автоматически скрываемым панелям.
  • DockManager.AutoHideMode — Определяет, перекрывает ли развернутая автоматически скрываемая панель соседние элементы докинга или сдвигает их.
  • DockManager.AutoHideOnlyActivePane — Определяет, переключает ли щелчок по кнопке 'Закрепить' панели функцию автоматического скрытия только для этой панели. Если этому свойству присвоено значение false (значение по умолчанию), и текущая панель принадлежит группе с вкладками, функция автоматического скрытия включается для всех панелей в этой группе с вкладками.
  • DockPane.AutoHideGroup — Возвращает контейнер AutoHideGroup, содержащий панель. Возвращает null, если панель не находится в группе автоматического скрытия.
  • DockPane.AllowAutoHide — Получает или задает, доступны ли кнопка 'Закрепить' и пункт контекстного меню 'Автоматически скрывать' для панели. Установите это свойство в false, чтобы предотвратить включение пользователем режима автоматического скрытия для конкретной панели.
  • AutoHideGroup.Dock — Определяет край DockManager, вдоль которого отображается контейнер AutoHideGroup.
  • AutoHideGroup.AutoHideHeight — Присоединенное свойство. При применении к панели задает высоту панели, когда функция автоматического скрытия включена, а родительский AutoHideGroup закреплен на верхнем или нижнем краю DockManager.
  • AutoHideGroup.AutoHideWidth — Присоединенное свойство. При применении к панели задает ширину панели, когда функция автоматического скрытия включена, а родительский AutoHideGroup закреплен на левом или правом краю DockManager.

См. также



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