如何右对齐最后一个 TabControl 选项卡？

Question

有没有办法使 TabControl 上的最后一个选项卡右对齐？ 想让最后一个与前几个分开。

谢谢 ！

Answer 1

这篇文章可能很旧，但我在寻找同一问题的答案时偶然发现了它，所以我想我会分享我最终得到的快速而肮脏的解决方案。

我只是将两个 TabControl 放在网格中，然后将其中一个 TabPanel 右对齐（感谢 Meleak):

 <Grid>
    <TabControl x:Name="_tabsRight" GotFocus="OnTabFocused" >
        <TabControl.Resources>
            <Style TargetType="TabPanel">
                <Setter Property="HorizontalAlignment" Value="Right"/>
            </Style>
        </TabControl.Resources>

        <TabItem x:Name="JustAHiddenTabItemToDeselectTheRealOne" Visibility="Hidden" />

        <!-- Last tab -->
        <TabItem Header="Last one" >
            <!-- Last content... -->
        </TabItem>

    </TabControl>
    <TabControl x:Name="_tabsLeft" GotFocus="OnTabFocused" >

        <!-- First tab -->
        <TabItem Header="1st" >
            <!-- First content... -->
        </TabItem>

        <!-- Second tab -->
        <TabItem Header="2nd" >
            <!-- Second content... -->
        </TabItem>

    </TabControl>
</Grid>

然后，在 OnTabFocused 事件处理程序中，当用户单击 TabItem：

private int _zIncrementor = 0;
/// <summary>
/// Hack to make two TabControls act as one.
/// </summary>
private void OnTabFocused(object sender, RoutedEventArgs e)
{
    var tab = (TabControl)sender;
    var otherTab = (tab == _tabsLeft) ? _tabsRight : _tabsLeft;

    Grid.SetZIndex(tab, ++_zIncrementor);
    otherTab.SelectedItem = null;
}

Answer 2

这里是一个关于模板化 TabControl 选项卡的示例项目。我可能会使用具有三列宽度“自动”、* 和“自动”的网格，并在第一列中放置一个 StackPanel 来保存第一组选项卡，然后将最后一个选项卡单独放置在最后一列中，中间为中间的列列是空的，只占用剩余空间。

Answer 3

如果您希望左侧有两个选项卡，右侧有一个选项卡，则可以在中间放置第三个不可见选项卡，并且不可见选项卡的宽度可以通过减去以下的宽度来计算Window 的 Actualwidth 中的所有三个可见选项卡为我们提供了剩余空间。

这是示例代码

<TabControl x:Name="_tabsLeft" GotFocus="OnTabFocused" >

    <!-- First tab -->
    <TabItem Header="1st" >
        <!-- First content... -->
    </TabItem>

    <!-- Second tab -->
    <TabItem Header="2nd" >
        <!-- Second content... -->
    </TabItem>

     <!-- Third invisible tab -->
    <TabItem Header="Im not visible in UI" Visibility="Hidden" x:Name="invisibletab" >
        <!-- I'm not visible in UI... -->
    </TabItem>

    <!-- Last tab -->
    <TabItem Header="Last one" >
        <!-- Last content... -->
    </TabItem>

</TabControl>

后端代码：

public MainWindow()
{
    InitializeComponent();       
    this.SizeChanged += window_SizeChanged;
}
private void window_SizeChanged(object sender, SizeChangedEventArgs e)
{
    invisibletab.Width = this.ActualWidth - 550; // where the 550 is the sum of the actual width of visible tabs
}