Элементы панели инструментов

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

toolbar-items

Добавление элементов в панель и контекстное меню

Используйте коллекции Toolbar.Items и PopupMenu.Items для заполнения элементами панелей и меню. В XAML вы можете определять элементы непосредственно между начальным и конечным тегами <Toolbar>/<PopupMenu>.

В следующем примере на панели инструментов отображаются три элемента.

xmlns:mxb="clr-namespace:Eremex.AvaloniaUI.Controls.Bars;assembly=Eremex.Avalonia.Controls"

<mxb:Toolbar x:Name="EditToolbar" ToolbarName="Edit" ShowCustomizationButton="False">
    <mxb:ToolbarButtonItem Header="Cut" Command="{Binding #textBox.Cut}" IsEnabled="{Binding #textBox.CanCut}" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=Cut.svg'}" Category="Edit"/>
    <mxb:ToolbarButtonItem Header="Copy" Command="{Binding #textBox.Copy}" IsEnabled="{Binding #textBox.CanCopy}" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=Copy.svg'}" Category="Edit"/>
    <mxb:ToolbarButtonItem Header="Paste" Command="{Binding #textBox.Paste}" IsEnabled="{Binding #textBox.CanPaste}" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=Paste.svg'}" Category="Edit"/>
</mxb:Toolbar>

Типы элементов панели инструментов

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

Общие свойства элементов панели инструментов

Alignment — Выравнивание элемента на панели инструментов.
Category — категория, к которой принадлежит элемент. Категории используются для организации элементов в логические группы в окне настройки. Смотрите следующий раздел для получения дополнительной информации: Категории элементов панели инструментов .
Command — Команда, выполняемая при нажатии на кнопку.
CommandParameter — Командный параметр, передаваемый указанной команде.
DisplayMode — Получает или устанавливает, следует ли отображать только картинку, заголовок или и то, и другое.
Glyph — Картинка элемента.
GlyphAlignment — Выравнивание картинки относительно заголовка элемента.
GlyphSize — Размер отображаемой картинки.
Header — Текст для отображения элемента.
ShowSeparator — Получает или устанавливает, следует ли отображать разделитель перед элементом. Вы также можете использовать элемент панели ToolbarSeparatorItem для вставки разделителя.

ToolbarButtonItem

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

toolbarbuttonitem

xmlns:mxb="clr-namespace:Eremex.AvaloniaUI.Controls.Bars;assembly=Eremex.Avalonia.Controls"

<mxb:ToolbarButtonItem Header="Open" Glyph="{SvgImage 'avares://bars_sample/Images/Toolbars/FileOpen.svg'}" Category="File" Command="{Binding OpenFileCommand}"/>

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

toolbarbuttonitem-dropdowncontrol

xmlns:mxb="clr-namespace:Eremex.AvaloniaUI.Controls.Bars;assembly=Eremex.Avalonia.Controls"

<mxb:ToolbarButtonItem Header="Paste"
                       Command="{Binding #textBox.Paste}"
                       IsEnabled="{Binding #textBox.CanPaste}"
                       Glyph="{SvgImage 'avares://bars_sample/Images/Toolbars/EditPaste.svg'}"
                       Category="Edit"
                       DropDownArrowVisibility="ShowArrow" DropDownArrowAlignment="Default"
                       >
    <mxb:ToolbarButtonItem.DropDownControl>
        <mxb:PopupMenu>
            <mxb:ToolbarButtonItem Header="Paste" Command="{Binding #textBox.Paste}" IsEnabled="{Binding #textBox.CanPaste}"/>
            <mxb:ToolbarButtonItem Header="Paste As" Command="{Binding PasteAsCommand}" IsEnabled="{Binding #textBox.CanPaste}"/>
        </mxb:PopupMenu>
    </mxb:ToolbarButtonItem.DropDownControl>
</mxb:ToolbarButtonItem>

Основные свойства ToolbarButtonItem

DropDownControl — Получает или устанавливает контрол всплывающего окна (объект Eremex.AvaloniaUI.Controls.Bars.IPopup), связанный с элементом. Контрол появляется, когда пользователь щелкает по элементу или стрелке встроенного всплывающего окна (см. DropDownArrowVisibility). Следующие объекты реализуют интерфейс Eremex.AvaloniaUI.Controls.Bars.IPopup, и поэтому они могут отображаться в виде контролов всплывающего окна:
- Eremex.AvaloniaUI.Controls.Bars.PopupMenu — Всплывающее меню. Вы можете добавить в меню все типы элементов панели инструментов, чтобы заполнить его содержимым.
- Eremex.AvaloniaUI.Controls.Bars.PopupContainer — Контейнер с контролами. Используйте PopupContainer для отображения пользовательских контролов в всплывающем окне.
DropDownArrowVisibility — Получает или устанавливает, отображает ли элемент стрелку всплывающего окна, используемую для вызова связанного контрола всплывающего окна. Поддерживаемые опции включают:
- ShowArrow — Видна стрелка всплывающего окна. Элемент и стрелка действуют как единая кнопка. Щелчок по ним отображает связанный контрол всплывающего окна.
- ShowSplitArrow или Default — Видна стрелка всплывающего окна. Она действует как отдельная кнопка, встроенная в элемент. Щелчок по стрелке всплывающего окна вызывает связанный с ним контрол всплывающего окна. Щелчок по элементу вызывает его команду.
- Hide — Стрелка всплывающего окна скрыта. Щелчок по элементу вызывает контрол всплывающего окна.
DropDownArrowAlignment — Возвращает или устанавливает позицию стрелки всплывающего окна.
DropDownOpenMode — Получает или устанавливает, вызывается ли контрол всплывающего окна и когда, когда пользователь касается стрелки элемента/всплывающего окна. Поддерживаемые опции включают:
- Press или Default — Всплывающее окно отображается при нажатии кнопки мыши.
- Click — После нажатия и последующего отпускания курсора мыши над элементом отображается всплывающее окно.
- Never — Всплывающее окно не отображается.
DropDownPress — Событие, которое срабатывает при нажатии стрелки на всплывающее окно.

ToolbarCheckItem

ToolbarCheckItem инкапсулирует кнопку-переключателя, которая поддерживает два состояния - нормальное и нажатое.

toolbarcheckitem

xmlns:mxb="clr-namespace:Eremex.AvaloniaUI.Controls.Bars;assembly=Eremex.Avalonia.Controls"

<mxb:ToolbarCheckItem Header="Bold" IsChecked="{Binding #textBox.FontWeight, Converter={helpers:BoolToFontWeightConverter}, Mode=TwoWay}" Glyph="{SvgImage 'avares://DemoCenter/Images/FontBold.svg'}" Category="Font"/>

Основные свойства и события ToolbarCheckItem

IsChecked — Возвращает или устанавливает состояние нажатия кнопки.
CheckedChanged — Событие, которое срабатывает при изменении состояния нажатия кнопки "Проверить".

ToolbarMenuItem

ToolbarMenuItem - это элемент, который отображает подменю при щелчке мыши.

toolbarMenuItem

Чтобы указать содержимое подменю, определите элементы между начальным и конечным тегами <ToolbarMenuItem> в XAML или добавьте элементы в коллекцию ToolbarMenuItem.Items в коде.

xmlns:mxb="clr-namespace:Eremex.AvaloniaUI.Controls.Bars;assembly=Eremex.Avalonia.Controls"

<mxb:ToolbarMenuItem Header="File" Category="File">
    <mxb:ToolbarButtonItem Header="New" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=NewDraftAction.svg'}" Category="File" Command="{Binding NewFileCommand}"/>
    <mxb:ToolbarButtonItem Header="Open" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Folder Open.svg'}" Category="File" Command="{Binding OpenFileCommand}"/>
    <mxb:ToolbarButtonItem Header="Save" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Save.svg'}" Category="File" Command="{Binding SaveFileCommand}"/>
    <mxb:ToolbarButtonItem Header="Print" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Print.svg'}" ShowSeparator="True"  Category="File" Command="{Binding PrintFileCommand}"/>
</mxb:ToolbarMenuItem>

Основные свойства и события ToolbarMenuItem

DropDownOpenMode — Получает или устанавливает, вызывается ли подменю и каким образом, когда пользователь касается элемента. Поддерживаемые опции включают:
- Press или Default — Меню отображается при нажатии кнопки мыши.
- Click — Меню отображается после нажатия и последующего отпускания курсора мыши над элементом.
- Never — Меню не отображается.
Items — Набор элементов, отображаемых в подменю.

Events

Opening — срабатывает, когда меню вот-вот будет отображено. Это событие позволяет отменить отображение меню.
Opened — срабатывает после отображения меню.
Closing — срабатывает, когда меню собирается закрываться. Это событие позволяет отменить закрытие меню.
Closed — срабатывает после закрытия меню.

ToolbarEditorItem

ToolbarEditorItem позволяет отображать встроенный редактор.

ToolbarEditorItem

Чтобы указать тип встроенного редактора и свойства настроек, используйте свойство ToolbarEditorItem.EditorProperties. Этому элементу можно присвоить свойства следующих типов редакторов:

ButtonEditorProperties — Содержит свойства, специфичные для контрола ButtonEditor.
CheckEditorProperties — Содержит свойства, специфичные для контрола CheckEditor.
ColorEditorProperties — Содержит свойства, специфичные для контрола ColorEditor.
ComboBoxEditorProperties — Содержит свойства, специфичные для контрола ComboBoxEditor.
HyperlinkEditorProperties — Содержит свойства, специфичные для контрола HyperlinkEditor.
PopupColorEditorProperties — Содержит свойства, специфичные для контрола PopupColorEditor.
PopupEditorProperties — Содержит свойства, специфичные для контрола PopupEditor.
SegmentedEditorProperties — Содержит свойства, специфичные для контрола SegmentedEditor.
SpinEditorProperties — Содержит свойства, специфичные для контрола SpinEditor.
TextEditorProperties — Содержит свойства, специфичные для контрола TextEditor.

В следующем примере объект Font ToolbarEditorItem отображает список шрифтов с помощью встроенного редактора combobox. Свойству ToolbarEditorItem.EditorProperties присвоено значение ComboBoxEditorProperties, которое соответствует контролу ComboBoxEditor.

<mxb:ToolbarEditorItem Header="Font:" EditorWidth="150" Category="Font" EditorValue="{Binding #textBox.FontFamily, Converter={helpers:FontNameToFontFamilyConverter}}">
    <mxb:ToolbarEditorItem.EditorProperties>
        <mxe:ComboBoxEditorProperties ItemsSource="{Binding $parent[view:ToolbarAndMenuPageView].Fonts}"
                            IsTextEditable="False"/>
    </mxb:ToolbarEditorItem.EditorProperties>
</mxb:ToolbarEditorItem>

Основные свойства и события ToolbarEditorItem

ToolbarEditorItem.EditorProperties — Получает или свойства объекта, который определяет тип и свойства встроенного редактора.
ToolbarEditorItem.EditorValue — Получает или устанавливает значение встроенного редактора. Используйте это свойство для привязки данных.
ToolbarEditorItem.SizeMode — Получает или устанавливает режим размера элемента. Это свойство позволяет вам растянуть элемент панели таким образом, чтобы он занимал все доступное пустое пространство внутри панели.
ToolbarEditorItem.EditorWidth — Возвращает или устанавливает ширину встроенного редактора.
ToolbarEditorItem.EditorHeight — Возвращает или устанавливает высоту встроенного редактора.
ToolbarEditorItem.EditorAlignment — Получает или устанавливает выравнивание редактора относительно заголовка элемента.

ToolbarTextItem

ToolbarTextItem создает текстовую метку. Используйте этот элемент для отображения текста, который не может редактироваться пользователями.

ToolbarTextItem

<mxb:ToolbarTextItem Header="{Binding #scaleDecorator.Scale, StringFormat={}Zoom: {0:P0}}" ShowBorder="True" Alignment="Far" ShowSeparator="True" Category="Info" CustomizationName="Zoom Info"/>

Основные свойства и события ToolbarTextItem

ToolbarTextItem.SizeMode — Получает или устанавливает режим размера элемента. Это свойство позволяет вам растянуть элемент таким образом, чтобы он занимал все доступное пустое пространство внутри панели.
ToolbarTextItem.ShowBorder — Возвращает или устанавливает, видна ли граница элемента. Вы можете использовать свойство ToolbarTextItem.BorderTemplate, чтобы указать пользовательский шаблон для рисовать границу.
ToolbarTextItem.BorderTemplate — Получает или устанавливает пользовательский шаблон для рисовать границу элемента. Этот шаблон действует, если включена опция ToolbarTextItem.ShowBorder.

ToolbarItemGroup

ToolbarItemGroup представляет собой группу (контейнер) элементов панели инструментов.

Когда вы объединяете элементы в группу, они функционируют как единое целое. Чтобы указать содержимое группы, определите элементы между начальным и конечным тегами <ToolbarItemGroup> или добавьте элементы в коллекцию ToolbarItemGroup.Items в коде.

<mxb:ToolbarItemGroup CustomizationName="Clipboard" >
    <mxb:ToolbarButtonItem Header="Cut" Command="{Binding #textBox.Cut}" IsEnabled="{Binding #textBox.CanCut}" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=Cut.svg'}" Category="Edit"/>
    <mxb:ToolbarButtonItem Header="Copy" Command="{Binding #textBox.Copy}" IsEnabled="{Binding #textBox.CanCopy}" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=Copy.svg'}" Category="Edit"/>
    <mxb:ToolbarButtonItem Header="Paste" Command="{Binding #textBox.Paste}" IsEnabled="{Binding #textBox.CanPaste}" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=Paste.svg'}" Category="Edit"/>
</mxb:ToolbarItemGroup>

Основные свойства и события ToolbarItemGroup

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

ToolbarCheckItemGroup

ToolbarCheckItemGroup представляет собой группу переключающих элементов (контейнер), которая контролирует состояние нажатия своих дочерних элементов (объектов ToolbarCheckItem). Класс ToolbarCheckItemGroup позволяет вам создавать группу взаимоисключающих элементов (radio group) и группу, которая позволяет нажимать на несколько элементов одновременно.

Чтобы указать содержимое группы, добавьте элементы ToolbarCheckItem между начальным и конечным тегами <ToolbarCheckItemGroup> в XAML или добавьте элементы в коллекцию ToolbarCheckItemGroup.Items в коде.

<mxb:ToolbarCheckItemGroup CustomizationName="Check group" CheckType="Radio" >
    <mxb:ToolbarCheckItem Header="1" IsChecked="{Binding Option1}"   Category="Settings"/>
    <mxb:ToolbarCheckItem Header="2" IsChecked="{Binding Option2}"  Category="Settings"/>
    <mxb:ToolbarCheckItem Header="3" IsChecked="{Binding Option3}"  Category="Settings"/>
</mxb:ToolbarCheckItemGroup>

Объект ToolbarCheckItemGroup принимает дочерние элементы всех поддерживаемых типов элементов панели. Группа, однако, манипулирует только состояниями нажатия вложенных объектов ToolbarCheckItem.

Основные свойства и события ToolbarCheckItemGroup

ToolbarCheckItemGroup.CheckType — Получает или устанавливает, может ли один или несколько элементов быть нажаты в группе одновременно. Поддерживаются следующие опции:
- Default или Multiple — несколько элементов могут быть нажаты одновременно.
- Radio — Группа взаимоисключающих элементов. Пользователь не может снять флажок с какого-либо элемента иначе, как установив другой.
- Single — Группа взаимоисключающих элементов. Пользователь может снять флажки со всех элементов внутри группы.
ToolbarCheckItemGroup.Items — Позволяет вам получить доступ к дочерним элементам группы.

ToolbarSeparatorItem

ToolbarSeparatorItem — Рисует разделитель.

<mxb:ToolbarMenuItem Header="File" Category="File">
    <mxb:ToolbarButtonItem Header="New" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=NewDraftAction.svg'}" Category="File"/>
    <mxb:ToolbarButtonItem Header="Open" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Folder Open.svg'}" Category="File"/>
    <mxb:ToolbarButtonItem Header="Save" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Save.svg'}" Category="File"/>
    <mxb:ToolbarSeparatorItem/>
    <mxb:ToolbarButtonItem Header="Print" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Print.svg'}" Category="File"/>
</mxb:ToolbarMenuItem>

Категории элементов панели инструментов

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

toolbars-customizationwindow-categories

Используйте свойство ToolbarItem.Category, чтобы присвоить элементу категорию. Это свойство определяет название категории. Чтобы отнести группу элементов к одной и той же категории, установите для их свойства ToolbarItem.Category одинаковое название категории.

<mxb:ToolbarMenuItem Header="Edit" Category="Edit">
    <mxb:ToolbarButtonItem Header="Cut" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=Cut.svg'}" Category="Edit"/>
    <mxb:ToolbarButtonItem Header="Copy" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=Copy.svg'}" Category="Edit"/>
    <mxb:ToolbarButtonItem Header="Paste" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=Paste.svg'}" Category="Edit"/>
    <mxb:ToolbarButtonItem Header="Select All" Command="{Binding #textBox.SelectAll}" Category="Edit" ShowSeparator="True"/>
    <mxb:ToolbarButtonItem Header="Clear all" Command="{Binding #textBox.Clear}" Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Clear.svg'}" Category="Edit"/>
</mxb:ToolbarMenuItem>

Горячие клавиши

Вы можете использовать свойство ToolbarItem.HotKey для назначения горячих клавиш элементам.

<mxb:ToolbarButtonItem 
    Header="Clear" Command="{Binding #textBox.Clear}" HotKey="Ctrl+Q"
    Glyph="{SvgImage 'avares://bars_sample/Images/Toolbars/EditDelete.svg'}"/>

Нажатие горячей клавиши активирует команду элемента при условии, что фокус находится в пределах области действия горячей клавиши. Дефолтная область действия горячих клавиш - это область пользовательского интерфейса в пределах компонента ToolbarManager. Когда фокус ввода находится за пределами области действия горячих клавиш, ToolbarManager не может перехватывать горячие клавиши.

Свойство ToolbarManager.IsWindowManager позволяет вам расширить область действия горячих клавиш на все окно. Когда вы устанавливаете для этого свойства значение true, компонент ToolbarManager регистрирует горячие клавиши элемента в окне. Он сможет перехватывать и обрабатывать горячие клавиши, даже если фокус находится за пределами его клиентской области.

Отображение горячих клавиш

Горячие клавиши, назначенные элементам панели инструментов, отображаются в следующих случаях:

В элементах, когда они находятся в подменю или всплывающих меню.
Во всплывающих подсказках элементов.

toolbaritem-hotkey-display-in-tooltip

Вы можете использовать свойство ToolbarItem.HotKeyDisplayString для указания текста для отображения горячей клавиши. Этот текст отображается, даже если элементу не назначена горячая клавиша. Это полезно, если целевая горячая клавиша уже зарегистрирована другим объектом для выполнения определенной операции, и вы хотите указать, что та же самая горячая клавиша связана с элементом панели инструментов.

Например, текстовое поле регистрирует горячие клавиши Ctrl+Z для выполнения операции отмены. Если элемент панели инструментов выполняет ту же операцию отмены в текстовом поле, не назначайте горячую клавишу Ctrl+Z этому элементу. Вместо этого установите для ToolbarItem.HotKeyDisplayString элемента значение "Ctrl+Z", чтобы отображать это горячие клавиши для пользователей во всплывающих подсказках и подменю/всплывающих меню.

<mxb:ToolbarButtonItem Header="Undo" HotKeyDisplayString="Ctrl+Z" 
    Command="{Binding $parent[TextBox].Undo}" IsEnabled="{Binding $parent[TextBox].CanUndo}" 
    Glyph="{SvgImage 'avares://bars_sample/Images/Toolbars/EditUndo.svg'}"/>

toolbaritem-hotkeydisplaystring

^* Эта страница была создана автоматически с помощью сервиса машинного перевода Яндекс Переводчик.

Table of Contents

Элементы панели инструментов

Добавление элементов в панель и контекстное меню

Типы элементов панели инструментов

Общие свойства элементов панели инструментов

ToolbarButtonItem

Основные свойства ToolbarButtonItem

ToolbarCheckItem

Основные свойства и события ToolbarCheckItem

ToolbarMenuItem

Основные свойства и события ToolbarMenuItem

ToolbarEditorItem

Основные свойства и события ToolbarEditorItem

ToolbarTextItem

Основные свойства и события ToolbarTextItem

ToolbarItemGroup

Основные свойства и события ToolbarItemGroup

ToolbarCheckItemGroup

Основные свойства и события ToolbarCheckItemGroup

ToolbarSeparatorItem

Категории элементов панели инструментов

Горячие клавиши

Отображение горячих клавиш