TabControl 中等宽的选项卡答案

【问题标题】：Tabs of equal width in TabControlTabControl 中等宽的选项卡
【发布时间】：2018-05-16 03:17:17
【问题描述】：

标签控件顶部有 4 个标签。我希望每个选项卡使用 TabControl 宽度的 25%。

使用 XAML 的正确方法是什么？

这是我尝试过的：

<Grid  HorizontalAlignment="Left" Height="458" Margin="10,65,0,0" VerticalAlignment="Top" Width="276">
    <TabControl Grid.IsSharedSizeScope="True" HorizontalAlignment="Stretch">
        <TabItem Header="Cameras">
            <Grid Background="#FFE5E5E5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="tabControl"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </TabItem>
        <TabItem Header="MultiCam">
            <Grid Background="#FFE5E5E5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="tabControl"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </TabItem>
        <TabItem Header="Search">
            <Grid Background="#FFE5E5E5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="tabControl"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </TabItem>
        <TabItem Header="Admin" Margin="-2,-2,-10,-1">
            <Grid Background="#FFE5E5E5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="tabControl"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </TabItem>
    </TabControl>
</Grid>

【问题讨论】：

标签： wpf xaml

【解决方案1】：

这里还有一个技巧，Grid 可以重叠任意数量的元素：

<Grid>
    <UniformGrid Columns="4" Margin="5,0">
        <FrameworkElement x:Name="c1"/>
        <!-- no need to add the other three -->
    </UniformGrid>
    <TabControl>
        <TabItem Header="header" Width="{Binding ElementName=c1, Path=ActualWidth}"/>
        <TabItem Header="header" Width="{Binding ElementName=c1, Path=ActualWidth}"/>
        <TabItem Header="header" Width="{Binding ElementName=c1, Path=ActualWidth}"/>
        <TabItem Header="header" Width="{Binding ElementName=c1, Path=ActualWidth}"/>
    </TabControl>
</Grid>

a UniformGrid 与TabControl 大小相同，用于测量每一列的宽度。只添加一个FrameworkElement，因为所有TabItems 的大小都相同。

【讨论】：

从技术上讲，UniformGrid 中只需要一项即可绑定ActualWidth。网格根据其Columns 属性处理宽度值。此外，您可以使用FrameworkElement 而不是Canvas，因为它是实际定义ActualWidth 属性的类型。
@DanLyons 感谢您的关注。我编辑了我的答案

【解决方案2】：

我有一个时髦的解决方案。不确定它是否是最佳的。将 TabItems 的宽度设置为以下：

        <TabItem Header="Search" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}, Path=ActualWidth, Converter={StaticResource quarter}}">
        </TabItem>

您需要将转换器添加为静态资源：

<Window.Resources>
    <local:OneQuarterConverter x:Key="quarter" />
</Window.Resources>

转换器的代码如下：

class OneQuarterConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ((double) value)/4.1;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ((double)value) * 4.1;
    }
}

因为边框和边距等原因除以4.1。

【讨论】：

请在<Window>标签中描述local:！