Question

我在标签控件的顶部有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>

Answer 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>

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

Answer 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。

TabControl中宽度相等的选项卡

2 个答案: