Начало работы с Docking¶

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

docking-ui-dockpanes-and-documentpanes-v0

Этот пример демонстрирует элементы докинга, составляющие Docking UI:

Dock-панель (DockPane) — Панель, которую можно закреплять, переводить в плавающий режим, автоматически скрывать и объединять в группу с вкладками (контейнер).
Document-панель (DocumentPane) — Контейнер для основного содержимого вашего окна. Вы можете использовать Document-панели для реализации интерфейса с вкладками (MDI - Multiple Document Interface).

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

Библиотека Docking поддерживает следующие контейнеры:

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

docking-ui-dockpanes-and-documentpanes-get-started

1. Создание компонента DockManager¶

Создайте новое приложение Avalonia UI с контролами Eremex. Откройте файл MainWindow.axaml и определите компонент DockManager в XAML.

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

<mxd:DockManager>
</mxd:DockManager>

DockManager — это контрол, который управляет созданием элементов докинга (Dock-панелей и Document-панелей), поддерживает операции с элементами докинга во время выполнения, предоставляет контекстные меню и выполняет сериализацию и десериализацию Docking UI.

2. Определение корневой группы¶

Добавьте объект DockGroup как дочерний элемент контрола DockManager. Этот объект используется для инициализации корневой док-группы (свойства DockManager.Root, которое помечено атрибутом ContentAttribute).

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

<mxd:DockManager>
    <mxd:DockGroup>
    </mxd:DockGroup>
</mxd:DockManager>

Корневая док-группа — это контейнер для всех панелей и документов в закрепленном состоянии.

3. Добавление панелей 'Properties' и 'Debug'¶

Добавьте объекты DockPane 'Properties' и 'Debug' в корневую группу.

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

<mxd:DockManager>
    <mxd:DockGroup>
        <mxd:DockPane Header="Properties"/>
        <mxd:DockPane Header="Debug"/>
    </mxd:DockGroup>
</mxd:DockManager>

Контейнер DockGroup по умолчанию располагает панели горизонтально. Вы можете изменить направление на вертикальное с помощью свойства DockGroup.Orientation.

docking-get-started-30-properties-debug-in-split-container

4. Объединение панелей в контейнер с вкладками¶

Оберните панели 'Properties' и 'Debug' в контейнер TabbedGroup. Этот контейнер представляет свои дочерние элементы в виде вкладок.

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

<mxd:DockManager>
    <mxd:DockGroup>
        <mxd:TabbedGroup>
            <mxd:DockPane Header="Properties"/>
            <mxd:DockPane Header="Debug"/>
        </mxd:TabbedGroup>
    </mxd:DockGroup>
</mxd:DockManager>

docking-get-started-40-properties-debug-in-tab-container

5. Добавление панели 'Error List'¶

Определите панель 'Error List' перед объектом TabbedGroup.

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

<mxd:DockManager>
    <mxd:DockGroup>
        <mxd:DockPane Header="Error List"/>
        <mxd:TabbedGroup>
            <mxd:DockPane Header="Properties"/>
            <mxd:DockPane Header="Debug"/>
        </mxd:TabbedGroup>
    </mxd:DockGroup>
</mxd:DockManager>

Контейнер DockGroup располагает панель 'Error List' и TabbedGroup в горизонтальном направлении.

docking-get-started-50-errors-in-split-container

6. Добавление группы документов над панелью 'Error List'¶

Чтобы отобразить DocumentGroup в верхней части панели 'Error List', сначала создайте новый контейнер DockGroup с вертикальной ориентацией. Затем поместите панель 'Error List' и новый объект DocumentGroup в этот контейнер.

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

<mxd:DockManager>
    <mxd:DockGroup>
        <mxd:DockGroup Orientation="Vertical">
            <mxd:DocumentGroup></mxd:DocumentGroup>
            <mxd:DockPane Header="Error List"/>
        </mxd:DockGroup>
        <mxd:TabbedGroup>
            <mxd:DockPane Header="Properties"/>
            <mxd:DockPane Header="Debug"/>
        </mxd:TabbedGroup>
    </mxd:DockGroup>
</mxd:DockManager>

docking-get-started-60-document-group

7. Добавление панели 'Output'¶

Панель 'Output' должна отображаться справа от панели 'Error List'. В настоящее время панель 'Error List' принадлежит контейнеру, который располагает свои дочерние элементы вертикально. Таким образом, нам нужно агрегировать панели 'Error List' и 'Output' в новый контейнер (DockGroup) с горизонтальной ориентацией.

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

<mxd:DockManager>
    <mxd:DockGroup>
        <mxd:DockGroup Orientation="Vertical">
            <mxd:DocumentGroup></mxd:DocumentGroup>
            <mxd:DockGroup Orientation="Horizontal">
                <mxd:DockPane Header="Error List"/>
                <mxd:DockPane Header="Output"/>
            </mxd:DockGroup>
        </mxd:DockGroup>
        <mxd:TabbedGroup>
            <mxd:DockPane Header="Properties"/>
            <mxd:DockPane Header="Debug"/>
        </mxd:TabbedGroup>
    </mxd:DockGroup>
</mxd:DockManager>

docking-get-started-70-errors-output

8. Заполнение группы документов вкладками¶

Добавьте два объекта DocumentPane в контейнер DocumentGroup. DocumentGroup отображает свои дочерние элементы в виде вкладок, thus реализуя интерфейс с вкладками (MDI).

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

<mxd:DockManager>
    <mxd:DockGroup>
        <mxd:DockGroup Orientation="Vertical">
            <mxd:DocumentGroup>
                <mxd:DocumentPane Header="BarItemsPageView.axaml"/>
                <mxd:DocumentPane Header="PageViewModelBase.cs"/>
            </mxd:DocumentGroup>
            <mxd:DockGroup Orientation="Horizontal">
                <mxd:DockPane Header="Error List"/>
                <mxd:DockPane Header="Output"/>
            </mxd:DockGroup>
        </mxd:DockGroup>
        <mxd:TabbedGroup>
            <mxd:DockPane Header="Properties"/>
            <mxd:DockPane Header="Debug"/>
        </mxd:TabbedGroup>
    </mxd:DockGroup>
</mxd:DockManager>

docking-get-started-80-document-panes

9. Установка размера для закрепленных панелей¶

Пространство любого разделяемого контейнера (DockGroup) по умолчанию делится поровну между его дочерними элементами. Вы можете использовать свойства DockWidth и DockHeight для установки пользовательского размера для дочерних элементов докинга контейнера. Эти свойства имеют тип Avalonia.Controls.GridLength, поэтому вы можете установить эти свойства в следующие значения:

Количество пикселей (абсолютные значения).
Взвешенная пропорция доступного пространства, используя обозначение 'star (*) sizing'. Например, 3*.
Значение 'Auto' — Элемент автоматически изменяет размер в соответствии с его содержимым.

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

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

<mxd:DockManager>
    <mxd:DockGroup>
        <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>

docking-get-started-90-set-proportional-size

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

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

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

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

<mxd:DockManager>
    <!--...-->
    <mxd:DockManager.AutoHideGroups>
        <mxd:AutoHideGroup Dock="Left">
            <mxd:DockPane Header="Explorer"/>
        </mxd:AutoHideGroup>
    </mxd:DockManager.AutoHideGroups>
</mxd:DockManager>

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

docking-get-started-auto-hide-container

11. Создание плавающей панели¶

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

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

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

<mxd:DockManager>
    <!--...-->
    <mxd:DockManager.FloatGroups>
        <mxd:FloatGroup FloatLocation="300,300" FloatWidth="150" FloatHeight="100">
            <mxd:DockPane Header="Search"/>
        </mxd:FloatGroup>
    </mxd:DockManager.FloatGroups>
</mxd:DockManager>

docking-get-started-floating-panel

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

12. Установка заголовков и глифов панелей¶

Вы можете использовать свойства Header и Glyph для указания заголовков и глифов для Dock-панелей и Document-панелей.

Следующий XAML инициализирует заголовки для панелей 'Properties' и 'Debug' и отображает SVG-изображения в заголовках. Предполагается, что SVG-изображения, используемые в этом примере, имеют свойство Build Action, установленное в AvaloniaResource.

<mxd:TabbedGroup DockWidth="*">
    <mxd:DockPane 
        Header="Properties"
        Glyph="{SvgImage 'avares://EremexAvaloniaApplication1/Images/settings.svg'}"
        GlyphSize="16,16"/>
    <mxd:DockPane 
        Header="Debug"
        Glyph="{SvgImage 'avares://EremexAvaloniaApplication1/Images/debug2.svg'}"
        GlyphSize="16,16"/>
</mxd:TabbedGroup>

docking-get-started-panel-headers-and-glyphs

13. Указание содержимого панелей¶

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

xmlns:mxd="https://schemas.eremexcontrols.net/avalonia/docking"
xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"
xmlns:mxi="https://schemas.eremexcontrols.net/avalonia/icons"

<mxd:DockPane Header="Search">
    <Grid RowDefinitions="Auto *">
        <StackPanel>
            <mxe:ButtonEditor Watermark="Search" Margin="5">
                <mxe:ButtonEditor.Buttons>
                    <mxe:ButtonSettings ToolTip.Tip="Match case"
                                        Glyph="{x:Static mxi:Filter.Starts_with }"
                                        ButtonKind="Toggle"/>
                    <mxe:ButtonSettings ToolTip.Tip="Match whole word"
                                        Glyph="{x:Static mxi:Painting.Report_text_column }"
                                        ButtonKind="Toggle"/>
                </mxe:ButtonEditor.Buttons>
            </mxe:ButtonEditor>
            <mxe:ButtonEditor Watermark="Replace" Margin="5"/>
        </StackPanel>
        <TextBlock Grid.Row="1"
                    Text="No search results available"
                    TextWrapping="Wrap"
                    TextAlignment="Center"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"/>
    </Grid>
</mxd:DockPane>

docking-get-started-panel-content

См. демо "IDE Layout" для примера, который создает сложный макет док-панелей и определяет содержимое для различных панелей.

14. Полный код¶

Ниже вы можете найти полный код этого руководства. SVG-изображения, используемые в этом примере, включены в проект как 'Avalonia Resources'.

MainWindow.axaml:

<mx:MxWindow xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:mx="https://schemas.eremexcontrols.net/avalonia"
             xmlns:mxd="https://schemas.eremexcontrols.net/avalonia/docking"
             xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"
             xmlns:mxi="https://schemas.eremexcontrols.net/avalonia/icons"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="EremexAvaloniaApplication1.MainWindow"
             Title="EremexAvaloniaApplication1"
             >
    <mxd:DockManager>
        <mxd:DockGroup>
            <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"
                    Glyph="{SvgImage 'avares://EremexAvaloniaApplication1/Images/settings.svg'}"
                    GlyphSize="16,16"/>
                <mxd:DockPane
                    Header="Debug"
                    Glyph="{SvgImage 'avares://EremexAvaloniaApplication1/Images/debug2.svg'}"
                    GlyphSize="16,16"/>
            </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" FloatWidth="200" FloatHeight="250">
                <mxd:DockPane Header="Search">
                    <Grid RowDefinitions="Auto *">
                        <StackPanel>
                            <mxe:ButtonEditor Watermark="Search" Margin="5">
                                <mxe:ButtonEditor.Buttons>
                                    <mxe:ButtonSettings ToolTip.Tip="Match case"
                                                        Glyph="{x:Static mxi:Filter.Starts_with }"
                                                        ButtonKind="Toggle"/>
                                    <mxe:ButtonSettings ToolTip.Tip="Match whole word"
                                                        Glyph="{x:Static mxi:Painting.Report_text_column }"
                                                        ButtonKind="Toggle"/>
                                </mxe:ButtonEditor.Buttons>
                            </mxe:ButtonEditor>
                            <mxe:ButtonEditor Watermark="Replace" Margin="5"/>
                        </StackPanel>
                        <TextBlock Grid.Row="1"
                                    Text="No search results available"
                                    TextWrapping="Wrap"
                                    TextAlignment="Center"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"/>
                    </Grid>
                </mxd:DockPane>
            </mxd:FloatGroup>
        </mxd:DockManager.FloatGroups>
    </mxd:DockManager>
</mx:MxWindow>

См. также¶

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