Question

我对WPF很新，我不确定应该如何继续，我有一个带有一些TabItem的TabControl，我想让整个TabControl宽度分开，所以TabItems得到相同的空间。

我已经实现了这个solution并且它没有工作，标签没有得到应该的空间，所以我去创建我自己的CustomControl，它工作..

我的问题是，Generic TabControl实现上有什么问题吗？或者我必须使用Custom 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>

转换器类：

/// <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"属性添加到样式

将TabItem拉伸到TabControl宽度

1 个答案: