将 TabItem 拉伸到 TabControl 宽度

Question

我是 WPF 的新手，我不确定应该如何进行，我有一个带有一些 TabItem 的 TabControl，我想将整个 TabControl 宽度平均分配，以便 TabItems 相同 space.

我已经实现了这个 solution 但它不起作用，这意味着当我使用通用 TabControl 时，选项卡没有获得父 TabControl 的整个宽度，但是当我使用自定义选项卡控件。

我的问题是，通用 TabControl 实现是否有问题？还是我必须使用自定义 TabControl？

遵循带有通用 TabControl 的 xaml 代码

<Window x:Class="Project.GUI.MainWindow.MainWindowView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:converters="clr-namespace:Project.GUI.Helpers"
        mc:Ignorable="d"
        Height="1000"
        Width="1000"
        ResizeMode="CanResizeWithGrip"
        WindowState="Maximized"
        WindowStyle="None"
        WindowStartupLocation="CenterOwner">
    <Window.Resources>
        <converters:TabSizeConverter x:Key="tabSizeConverter" />
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Width">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource tabSizeConverter}">
                        <Binding
                            RelativeSource="{RelativeSource Mode=FindAncestor,
            AncestorType={x:Type TabControl}}" />
                        <Binding
                            RelativeSource="{RelativeSource Mode=FindAncestor,
            AncestorType={x:Type TabControl}}"
                            Path="ActualWidth" />
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TabItemTitle">
            <Setter Property="Control.FontFamily"
                    Value="Century Gothic" />
            <Setter Property="Control.FontSize"
                    Value="20px" />
            <Setter Property="Control.Background"
                    Value="#348781" />
        </Style>

    </Window.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TabControl Grid.Row="0"
                    Grid.Column="1"
                    Grid.RowSpan="2"
                    Width="Auto"
                    Name="TabControl">
            <TabItem Header="Patient"
                     Height="100"
                     Style="{StaticResource TabItemTitle}" />
            <TabItem Header="Läsion"
                     Height="100"
                     Style="{StaticResource TabItemTitle}" />
            <TabItem Header="Scan"
                     Height="100"
                     Style="{StaticResource TabItemTitle}" />
            <TabItem Header="Analyse"
                     Height="100"
                     Style="{StaticResource TabItemTitle}" />
            <TabItem Header="Report"
                     Height="100"
                     Style="{StaticResource TabItemTitle}" />
        </TabControl>
    </Grid>
</Window>

转换器class:

/// <summary>
/// The tab size converter.
/// </summary>
public class TabSizeConverter : IMultiValueConverter
{
    /// <summary>
    /// The convert.
    /// </summary>
    /// <param name="values">
    /// The values.
    /// </param>
    /// <param name="targetType">
    /// The target type.
    /// </param>
    /// <param name="parameter">
    /// The parameter.
    /// </param>
    /// <param name="culture">
    /// The culture.
    /// </param>
    /// <returns>
    /// The <see cref="object"/>.
    /// </returns>
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        TabControl tabControl = values[0] as TabControl;
        double width = tabControl.ActualWidth / tabControl.Items.Count;

        // Subtract 1, otherwise we could overflow to two rows.
        return width <= 1 ? 0 : width - 1;
    }

    /// <summary>
    /// The convert back.
    /// </summary>
    /// <param name="value">
    /// The value.
    /// </param>
    /// <param name="targetTypes">
    /// The target types.
    /// </param>
    /// <param name="parameter">
    /// The parameter.
    /// </param>
    /// <param name="culture">
    /// The culture.
    /// </param>
    /// <returns>
    /// The <see cref="object[]"/>.
    /// </returns>
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) =>
        throw new NotSupportedException();
}

这是我的自定义 TabControl 代码

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Project"
    xmlns:custom="clr-namespace:Project.GUI.Custom">
   
    <Style TargetType="{x:Type custom:CustomTabControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type custom:CustomTabControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <TabControl>
                            <TabItem Header="Patient"
                                     Height="100"/>
                            <TabItem Header="Lesion"
                                     Height="100"
                                      />
                            <TabItem Header="Scan"
                                     Height="100"
                                      />
                            <TabItem Header="Analyse"
                                     Height="100"
                                      />
                            <TabItem Header="Report"
                                     Height="100"
                                      />
                        </TabControl>
                    </Border>
                    
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

感谢您的宝贵时间。

已解决，问题是使用不同的样式，已通过以下方式解决：

<Style TargetType="{x:Type TabItem}">
            <Setter Property="FontFamily"
                    Value="Century Gothic" />
            <Setter Property="FontSize"
                    Value="20px" />
            <Setter Property="Background"
                    Value="#348781" />
            <Setter Property="Width">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource tabSizeConverter}">
                        <Binding
                            RelativeSource="{RelativeSource Mode=FindAncestor,
            AncestorType={x:Type TabControl}}" />
                        <Binding
                            RelativeSource="{RelativeSource Mode=FindAncestor,
            AncestorType={x:Type TabControl}}"
                            Path="ActualWidth" />
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

默认应用 TabSizeConverter <Style TargetType="{x:Type TabItem}"> 样式。

TabItems 使用 TabItemTitle:

<TabItem Header="Patient"
         Height="100"
         Style="{StaticResource TabItemTitle}" />

当然没有应用TabSizeConverter。

改为使用基本样式：

<TabItem Header="Patient" Height="100"/>

或将两种风格合二为一：

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Width">
        <Setter.Value>
            <MultiBinding Converter="{StaticResource tabSizeConverter}">
                <Binding
                    RelativeSource="{RelativeSource Mode=FindAncestor,
    AncestorType={x:Type TabControl}}" />
                <Binding
                    RelativeSource="{RelativeSource Mode=FindAncestor,
    AncestorType={x:Type TabControl}}"
                    Path="ActualWidth" />
            </MultiBinding>
        </Setter.Value>
    </Setter>

    <Setter Property="Control.FontFamily"
            Value="Century Gothic" />
    <Setter Property="Control.FontSize"
            Value="20px" />
    <Setter Property="Control.Background"
            Value="#348781" />
</Style>

如果需要命名样式，请将 x:Key="TabItemTitle" 属性添加到 Style

将 TabItem 拉伸到 TabControl 宽度

Stretch TabItem to TabControl Width

c#

wpf

custom-controls

tabcontrol