目前我正在从事一个我的项目。我使用可以关闭/打开的标签(虽然它们与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的新手并且我试图尝试正确学习。现在我只想在添加更多tabItem时缩小它的大小。我会感激任何帮助。
更新:我在代码中发现了问题并遵循了@Paparazzi和@Chris W.的建议。我的代码工作正常,但我的实际问题仍未解决:( 我在
中添加了@Chris W.建议的一些msdn代码<TabControl.Resources>
我在所需位置添加了一个视图框。但是,这个带有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>
B.t.w @Paparazzi建议的解决方案(即使用此帖Make TabControl Headers Scrollable in WPF中的scrollviewer)工作正常。这是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>
答案 0 :(得分:1)
看来tabItem dataTemplate中的标签的固定宽度为100.而不是修复此宽度,您可以将其绑定到代码隐藏中的属性,该属性包含选项卡项的数量(例如&#34 ; TabItemCount&#34)。这本身并没有用,因为你显然不想要一个宽度为1的标签,你拥有的标签越多,它们就越大,这与你可能想要的行为相反。
要解决这个问题,你需要一个converter,这是一个wpf绑定可用于获取任何输入值/类型并返回另一个类型/值的类。
然后绑定看起来像这样;
<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,但随着标签项数量的增加,每个项目的宽度将减少。然后,您可以为所有选项卡设置最大宽度,然后在您创建的选项卡中将其分开。转换器类中的代码显然可以做任何你喜欢的事情,这样你就可以处理各种特殊情况。您实际上可以绑定到您喜欢的任何对象类型,只要您传入的对象与选项卡所需的宽度之间存在某种连接,就可以使其工作。
转换器非常适合更改属性,例如可见性,颜色等,您希望根据某些条件更改属性值,例如,如果文本变为负数,则会使文本变为红色。