TabControl¶

MxTabControl 控件可将面板组织成选项卡式界面。用户单击相应的选项卡即可激活特定面板。

MxTabControl 派生自标准的 Avalonia.Controls.TabControl 控件。它继承了 TabControl 的基本功能，并通过以下附加功能对其进行了扩展：

选项卡数量不受限制。
可从项源填充选项卡及其内容。
可通过拖放重新排列选项卡。
选项卡布局模式：拉伸（Stretch）、滚动（Scroll）和多行（Multi-line）。
“关闭选项卡”按钮。
“新建选项卡”按钮。
选项卡标题区域中的自定义控件。

创建选项卡¶

MxTabControl 从基类 Avalonia.Controls.TabControl 继承了创建选项卡的功能。这些控件支持两种添加选项卡的方式：

手动添加选项卡项
从项源填充选项卡及其内容。

手动添加选项卡项¶

MxTabControl 控件中的选项卡项由 MxTabItem 对象封装。这些对象提供的设置可用于指定选项卡标题文本、选项卡标题图像（字形）、“关闭”命令（单击选项卡的“关闭”按钮时执行的命令）等。

示例¶

以下示例创建两个包含预定义内容（编辑器和标签）的选项卡。

xmlns:mx="https://schemas.eremexcontrols.net/avalonia"
xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"

<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 — 指定用于呈现选项卡标题的 DataTemplate。
ContentTemplate — 指定用于呈现选项卡内容的 DataTemplate。

示例¶

以下示例将 MxTabControl 控件绑定到项源，并指定用于呈现选项卡标题和内容的 DataTemplate。

xmlns:mx="https://schemas.eremexcontrols.net/avalonia"
xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"

<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 — 指定所选选项卡的项。如果使用 MxTabItem 对象手动向 TabControl 添加选项卡，则 SelectedItem 属性指定所选的 MxTabItem 对象。如果 TabControl 从项源填充，则 SelectedItem 属性指定所绑定项源中与所选选项卡对应的数据对象。

SelectedValue 属性指定所选选项卡的值。此属性返回以下值：

null：如果使用 MxTabItem 对象手动向 TabControl 添加选项卡。
选项卡的基础数据对象：如果 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 命令，当前所选选项卡的项将作为命令参数传递。

xmlns:mx="https://schemas.eremexcontrols.net/avalonia"
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)
    {
        //...
    }
}

^* 本页面使用机器翻译技术翻译。