[英]Stretch TabItem to TabControl Width
我对 WPF 还很陌生,我不知道应该如何进行,我有一个带有一些 TabItem 的 TabControl,我想将整个 TabControl 宽度均分,以便 TabItem 获得相同的空间。
我已经实现了这个解决方案,但它没有用,这意味着当我使用通用 TabControl 时,选项卡没有获得父 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>
转换器类:
/// <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>
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"
属性添加到样式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.