TabControl

Контрол MxTabControl позволяет вам организовывать панели в пользовательский интерфейс с вкладками. Пользователи могут активировать определенную панель щелчком мыши на соответствующей вкладке.

tabcontrol

MxTabControl является потомком стандартного контрола Avalonia.Controls.TabControl. Он наследует базовую функциональность TabControl и расширяет ее дополнительными функциями:

Неограниченное количество вкладок.
Совокупность вкладок и содержимого вкладок из источника объектов.
Переупорядочивание вкладок с помощью перетаскивания.
Режимы размещения вкладок: Растягивание, прокрутка и многострочная линия.
Кнопки "Закрыть вкладку".
кнопка "Новая вкладка".
Пользовательские контролы в области заголовка вкладки.

Создание вкладок

MxTabControl наследует функциональность создания вкладок от базового класса Avalonia.Controls.TabControl. Контролы поддерживают два подхода к добавлению вкладок:

Добавляйте элементы вкладок вручную
Заполняйте вкладки и содержимое вкладок из источника объектов.

Добавление элементов вкладок вручную

Элементы вкладки в MxTabControl контрол инкапсулируются объектами MxTabItem. Они предоставляют свойства для указания текста заголовка вкладки, картинки заголовка вкладки (картинки-глифа), команды "Закрыть" (команда активируется при нажатии кнопки "Закрыть" на вкладке) и т.д.

Пример

В следующем примере создаются две вкладки с предопределенным содержимым (редакторы и метки).

tabcontrol-tabs-example

xmlns:mx="clr-namespace:Eremex.AvaloniaUI.Controls;assembly=Eremex.Avalonia.Controls"
xmlns:mxe="clr-namespace:Eremex.AvaloniaUI.Controls.Editors;assembly=Eremex.Avalonia.Controls"

<mx:MxTabControl Margin="5" Height="160" Name="tabControl1" Width="300">
    <mx:MxTabItem Header="Features">
        <Grid RowDefinitions="Auto Auto Auto" ColumnDefinitions="Auto *" Margin="5">
            <Label Classes="LayoutItem" Grid.Column="0" Grid.Row="0" Content="Trademark"/>
            <mxe:TextEditor EditorValue="{Binding SelectedCar.Trademark}" Margin="5" Height="20" Grid.Row="0" Grid.Column="1"/>
            <Label Classes="LayoutItem" Grid.Column="0" Grid.Row="1" Content="Liters"/>
			<mxe:SpinEditor EditorValue="{Binding SelectedCar.Liter}" Margin="5" Height="20" Grid.Row="1" Grid.Column="1"/>
            <Label Classes="LayoutItem" Grid.Column="0" Grid.Row="2" Content="MPG"/>
            <mxe:SpinEditor EditorValue="{Binding SelectedCar.MPG}" Margin="5" Height="20" Grid.Row="2" Grid.Column="1"/>
        </Grid>
    </mx:MxTabItem>
    <mx:MxTabItem Header="More Info" >
        <mxe:TextEditor Margin="5" EditorValue="{Binding SelectedCar.Description}" TextWrapping="Wrap" VerticalAlignment="Stretch"/>
    </mx:MxTabItem>
</mx:MxTabControl>

Заполнение вкладок из источника объектов

Одним из предков MxTabControl является класс Avalonia.Controls.ItemsControl. Это позволяет вам заполнить TabControl элементами из источника объектов. Используйте для этой цели следующие основные свойства:

ItemsSource — Указывает источник, содержащий элементы, которые будут отображаться в виде вкладок.
ItemTemplate — Указывает шаблон данных, используемый для отображения заголовков вкладок.
ContentTemplate — Указывает шаблон данных, используемый для отображения содержимого вкладки.

Пример

Следующий пример привязывает контрол MxTabControl к источнику объектов и определяет DataTemplates, которые отображают заголовки и содержимое вкладок.

tabcontrol-itemsource-example

xmlns:mx="clr-namespace:Eremex.AvaloniaUI.Controls;assembly=Eremex.Avalonia.Controls"
xmlns:mxe="clr-namespace:Eremex.AvaloniaUI.Controls.Editors;assembly=Eremex.Avalonia.Controls"

<mx:MxTabControl ItemsSource="{Binding Cars}" SelectedItem="{Binding SelectedCar}">
    <mx:MxTabControl.ItemTemplate>
        <DataTemplate DataType="demoData:CarInfo">
            <TextBlock Text="{Binding Trademark}"></TextBlock>
        </DataTemplate>
    </mx:MxTabControl.ItemTemplate>

    <mx:MxTabControl.ContentTemplate>
        <DataTemplate DataType="demoData:CarInfo">
            <StackPanel Orientation="Horizontal" Margin="10">
                <Grid RowDefinitions="Auto Auto Auto" ColumnDefinitions="Auto *">
                    <Label Classes="LayoutItem" Grid.Column="0" Grid.Row="0" Content="Trademark"/>
                    <mxe:TextEditor Classes="LayoutItem"  Grid.Column="1" Grid.Row="0" EditorValue="{Binding Trademark}"/>

                    <Label Classes="LayoutItem" Grid.Column="0" Grid.Row="1" Content="MPG"/>
                    <mxe:SpinEditor Classes="LayoutItem" Grid.Column="1" Grid.Row="1" EditorValue="{Binding  MPG}" Minimum="0"/>

                    <Label Classes="LayoutItem" Grid.Column="0" Grid.Row="2" Content="Price"/>
                    <mxe:SpinEditor Classes="LayoutItem" Grid.Column="1" Grid.Row="2" EditorValue="{Binding  Price}" Suffix="{Binding Currency}" Minimum="0"/>
                </Grid>
                <Image Grid.Column="1" Width="200" Source="{Binding Image}" VerticalAlignment="Top"/>
            </StackPanel>
        </DataTemplate>
    </mx:MxTabControl.ContentTemplate>
</mx:MxTabControl>

Выбор вкладки

Используйте следующие свойства, чтобы выбрать вкладки и получить выбранные вкладки:

SelectedIndex — Указывает индекс, начинающийся с нуля, выбранной вкладки среди всех вкладок. Вы можете использовать свойство MxTabControl.Items для доступа к коллекции вкладок.
SelectedItem — Указывает элемент выбранной вкладки. Если вкладки добавляются вручную в TabControl с использованием объектов MxTabItem, свойство SelectedItem указывает выбранный объект MxTabItem. Если TabControl заполняется из источника объектов, то свойство SelectedItem определяет объект данных выбранной вкладки из связанного источника объектов.

Свойство SelectedValue определяет значение выбранной вкладки. Это свойство возвращает следующие значения:

null, если вкладки вручную добавлены в TabControl с использованием объектов MxTabItem.
Нижележащий объект данных вкладки, если TabControl заполнен из источника объектов.

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

SelectedContent — Указывает содержимое выбранной вкладки.
SelectedContentTemplate — Указывает шаблон содержимого выбранной вкладки.

Расположение вкладок

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

TabControl поддерживает три режима размещения заголовков вкладок. Используйте свойство MxTabControl.TabStripLayoutType, чтобы указать тип расположения заголовка вкладки:

Scroll — Заголовки вкладок достаточно широки для отображения содержимого заголовков вкладок. Кнопки прокрутки отображаются в области заголовка вкладки, если недостаточно места для отображения всех заголовков вкладок целиком.
Stretch — Заголовки всех вкладок размещены в виде линии, растягивания, подгоняемого под ширину контрола. Они имеют одинаковую ширину или высоту в зависимости от позиции полосы вкладок (смотрите свойство TabStripPlacement).
MultiLine — Заголовки вкладок размещены в несколько линий, если недостаточно места для их отображения в одной линии.

Перемещение вкладок

Пользователь может изменить размещение вкладок с помощью перетаскивания, если для свойства MxTabControl.TabDragMode установлено значение Reorder.

Обработайте события TabItemStartDragging и TabItemCompleteDragging, чтобы отменить операции перетаскивания или выполнить дополнительные действия при перетаскивании вкладок.

Кнопки "Закрыть"

TabControl поддерживает встроенные кнопки "Закрыть вкладку" ("x"). Они могут отображаться на вкладках и/или в области заголовка вкладки, как указано в свойстве MxTabControl.CloseButtonShowMode.

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

Обработайте событие MxTabControl.CloseButtonClick.
Укажите команды с помощью элемента MxTabItem.CloseCommand.

Кнопка "Новая вкладка"

Установите для свойства MxTabControl.NewButtonShowMode значение InHeaderPanel, чтобы отобразить кнопку "Новая вкладка" ("+"). Нажатие на эту кнопку по умолчанию не приводит к каким-либо действиям. Вы можете указать действие со следующими элементами:

Событие MxTabControl.NewButtonClick.
Команда MxTabControl.NewCommand.

Пользовательские контролы в области заголовка вкладки

Вы можете использовать свойства ControlBoxContent и ControlBoxContentTemplate, чтобы добавить пользовательские контролы в область заголовка вкладки.

Пример

В следующем примере кнопка "?" добавлена в область заголовка вкладки. Нажатие на кнопку вызывает команду HelpCommand. Элемент текущей выбранной вкладки передается в качестве параметра команды.

tabcontrol-controlbox-example

xmlns:mx="clr-namespace:Eremex.AvaloniaUI.Controls;assembly=Eremex.Avalonia.Controls"
x:Class="SampleTabControl.TabControlPageView"
xmlns:vm="using:SampleTabControl"
x:DataType="vm:TabControlPageViewModel"

<mx:MxTabControl ItemsSource="{Binding Cars}"
                SelectedItem="{Binding SelectedCar}"
                x:Name="TabControl"
    >
    <mx:MxTabControl.ControlBoxContent>
        <Button Command="{Binding HelpCommand}" CommandParameter="{Binding $parent.SelectedItem}"><Image Width="20" Height="20"  Source="{SvgImage 'avares://SampleTabControl/Images/help-icon.svg'}" /></Button>
    </mx:MxTabControl.ControlBoxContent>
    ...
</mx:MxTabControl>

public partial class TabControlPageViewModel : PageViewModelBase
{
    //...
    [RelayCommand]
    private void Help(object parameter)
    {
        //...
    }
}

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

Table of Contents

TabControl

Создание вкладок

Добавление элементов вкладок вручную

Пример

Заполнение вкладок из источника объектов

Пример

Выбор вкладки

Расположение вкладок

Перемещение вкладок

Кнопки "Закрыть"

Кнопка "Новая вкладка"

Пользовательские контролы в области заголовка вкладки

Пример