如何右对齐最后一个选项卡控件选项卡

本文关键字：选项 控件 最后一个 右对齐 | 更新日期: 2023-09-27 18:21:45

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

谢谢！

如何右对齐最后一个选项卡控件选项卡

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

我只是将两个 TabControls 放在一个网格中，并在其中一个上右对齐 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>

然后，在 OnTabFocus 事件处理程序中，当用户单击 TabItem 时，我们需要将最底部的 TabControl 置于最前面：

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;
}

下面是一个关于模板化选项卡控件的示例项目。 我可能会使用宽度为"自动"、"* 和"自动"的三列网格，并在第一列中放置一个 StackPanel 以容纳第一组选项卡，然后在最后一列中仅保留最后一个选项卡，中间列为空，仅占用剩余空间。

如果要在

左侧有两个选项卡，在右侧有一个选项卡，则可以在中间放置第三个不可见选项卡，并且可以通过从Window的Actualwidth中减去所有三个可见选项卡的Width来计算不可见选项卡width，这给了我们剩余的空间。

这是示例代码

<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
}
相关文章：