目前我正在做我的一个项目。我正在使用可以关闭/打开的选项卡(尽管它们与 Chrome 的不完全相同)。选项卡项目的数据模板有一个标签和一个按钮。这是我的代码。
<Grid Name="grid_test" Margin="0,73,0,0" >
<TabControl Background="WhiteSmoke" FontFamily="Segoe UI" FontSize="12" Margin="0" Name="tabDynamic" ItemsSource="{Binding}" GotFocus="tabControl_GotFocus">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel">
<Border Name="Border" Margin="0,0,0,0" Background="Transparent"
BorderBrush="#999999" BorderThickness="0,1,1,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
ContentSource="Header"
Margin="7,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="White" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#B3B3B3" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Panel" Property="Background" Value="#F6F6F6" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
<TabControl.Resources>
<DataTemplate x:Key="TabHeader" DataType="TabItem">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Margin="0,0,10,0" HorizontalAlignment="Left" Text="{Binding RelativeSource={RelativeSource AncestorType=TabItem }, Path=Header}" />-->
<Label Width="100" Grid.Column="0" Margin="0,0,0,0" Height="32" HorizontalAlignment="Left" Content="{Binding RelativeSource={RelativeSource AncestorType=TabItem }, Path=Header}" />
<Button Grid.Column="1" HorizontalAlignment="Right" Name="btnDelete" Margin="0,0,0,0" Padding="0" Click="btnDelete_Click" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}"
Style="{StaticResource btnCustom}" Height="12" Width="12"/>
</Grid>
</DataTemplate>
</TabControl.Resources>
</TabControl>
</Grid>
现在这就是我的选项卡数量有限时的情况。请参阅链接中提供的图片 enter image description here
这就是当我添加越来越多的选项卡时发生的情况。请参阅链接中提供的图片 enter image description here
我已经查看了这些链接 - How to design tabs like Google Chrome tabs?和 Tab control like Google Chrome tabs? ，但它们对我来说毫无意义，因为我是 WPF 的新手，并且我正在努力正确地学习它。现在我只想在添加更多选项卡项时缩小选项卡项的大小。我将不胜感激任何形式的帮助。
更新:我找出了代码中的问题，并遵循了 @Paparazzi 和 @Chris W. 的建议。我的代码工作正常，但我的实际问题仍然没有解决:( 我在
中添加了@Chris W.建议的一些msdn代码<TabControl.Resources>
我在所需的位置添加了一个 View 框。但是，这段带有 viewbox 的代码显示了一个奇怪的行为。当我的第一个选项卡加载时，它会填满整个屏幕。随着选项卡数量的增加，选项卡的大小(在所有维度上)逐渐减小。
<TabControl.Resources>
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="SnapsToDevicePixels"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Viewbox Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Left" >
<TabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
</Viewbox>
<Border x:Name="Border"
Grid.Row="1"
BorderThickness="1"
Background="Transparent"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2">
<ContentPresenter x:Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
//...more code
</TabControl.Resources>
顺便说一句，@Paparazzi 建议的解决方案(即使用这篇文章 Make TabControl Headers Scrollable in WPF 中的滚动查看器)工作正常。这是 TabControl.Resources 内的代码
<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto" VerticalAlignment="Top" HorizontalAlignment="Left" >
<TabPanel x:Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True" KeyboardNavigation.TabIndex="1"
Background="Transparent" />
</ScrollViewer>
最佳答案
您的 tabItem dataTemplate 中的标签似乎具有 100 的固定宽度。您可以将其绑定(bind)到代码隐藏中保存选项卡项目数量计数的属性(例如“TabItemCount”)，而不是固定此宽度)。这本身并没有什么用处，因为您显然不想要宽度为 1 的选项卡，并且选项卡越多，它们就会越大，这与您可能想要的行为相反。
要解决这个问题，您需要 converter这是一个 wpf 绑定(bind)可以用来获取任何输入值/类型并返回另一个类型/值的类。
绑定(bind)看起来像这样；
<Window.Resources>
<local:CountToWidthConverter x:Key="CountToWidthConverter" />
</Window.Resources>
...
<Label Width="{Binding TabItemCount, Converter={StaticResource CountToWidthConverter}}" ...
转换器看起来像这样；
public class CountToWidthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var tabCount = (int)value;
var tabWidth = 1000/tabCount;
return tabWidth;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
...
}
}
如果选项卡数量仅为 1，则标签的宽度将为 1000，但随着选项卡项目数量的增加，每个项目的宽度将会减小。然后，您可以为所有选项卡设置最大宽度，然后将其划分到您创建的选项卡中。转换器类中的代码显然可以做任何您喜欢的事情，这样您就可以处理各种特殊情况。实际上，您可以绑定(bind)到您喜欢的任何对象类型，并且只要您传入的对象与选项卡所需的宽度之间存在某种联系，就可以使其工作。
转换器非常适合更改可见性、颜色等属性，您希望属性值根据某些条件进行更改，例如如果文本变为负数，则使文本变为红色。
关于c# - 添加更多选项卡时如何缩小 tabItem 大小(例如 google chrome 选项卡)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36702865/