Question

我有一个TabControl，我试图让标题看起来不错。我有以下XAML：

（在Resources.xaml：）

<DataTemplate x:Key="ClosableTabItemTemplate">
    <DockPanel LastChildFill="True" MinWidth="200" Height="20" HorizontalAlignment="Stretch" behaviors:MouseClickBehavior.ClickCommand="{Binding Path=CloseCommand}">
        <Image Source="{Binding Path=Image}" Height="16" VerticalAlignment="Center" />
        <Button Background="Transparent"
                  BorderBrush="Transparent"
                  Command="{Binding Path=CloseCommand}"
                  Content="X"
                  Cursor="Hand"
                  DockPanel.Dock="Right"
                  Focusable="False" 
                  FontSize="9"
                  FontWeight="Bold"
                  Margin="3,0,0,0"
                  Padding="0"
                  VerticalAlignment="Center"
                  VerticalContentAlignment="Center"
                  Width="16" Height="16" />
        <TextBlock Text="{Binding Path=Header}" DockPanel.Dock="Left" VerticalAlignment="Center" />
    </DockPanel>
</DataTemplate>

（在MainWindow.xaml：）

<TabControl Grid.Column="1"
            ItemsSource="{Binding Path=Tabs}"
            ItemTemplate="{DynamicResource ClosableTabItemTemplate}" />

以下是我的问题的一个直观示例：

我现在喜欢标签的实际宽度，但是标题的dockpanel没有填满所有空间的事实很麻烦。如果我也使用Grid（可能是任何容器控件），也会发生同样的事情。

Answer 1

ContentPresenter.HorizontalAlignment的默认样式中的

TabItem绑定到ItemsControl.HorizontalContentAlignment。在这里，取自Aero.NormalColor.xaml：

<ContentPresenter Name="Content"
                  ContentSource="Header"
                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                  HorizontalAlignment="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                  VerticalAlignment="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                  RecognizesAccessKey="True"/>

将TabControl.HorizontalContentAlignment设置为Stretch可以解决我的问题。

<TabControl HorizontalContentAlignment="Stretch" />

Answer 2

我遇到了与可关闭标签相同的视觉问题，并通过扩展TabControl（稍后将在XAML中使用）和TabItem类来解决它。我在前者中覆盖GetContainerForItemOverride()，在后者中覆盖OnApplyTemplate()。我创建了DependencyObject扩展方法，以查找ContentPresenter的{{1}}元素并将其TabItem属性设置为HorizontalAlignment：

HorizontalAlignment.Stretch

我的XAML显示如下：

（在public class MyTabControl : TabControl { protected override DependencyObject GetContainerForItemOverride() { return new MyTabItem(); } } public class MyTabItem : TabItem { public override void OnApplyTemplate() { base.OnApplyTemplate(); var content = this.GetFirstDescendantOfType<ContentPresenter>(); if (content != null) { content.HorizontalAlignment = HorizontalAlignment.Stretch; } } } public static class DependencyObjectExtensions { public static T GetFirstDescendantOfType<T>(this DependencyObject parent) where T : DependencyObject { if (parent == null) { return null; } else { var children = parent.GetChildren(); T descendant = children.FirstOrDefault(child => child is T) as T; if (descendant == null) { foreach (var child in children) { if ((descendant = child.GetFirstDescendantOfType<T>()) != null) break; } } return descendant; } } public static IEnumerable<DependencyObject> GetChildren(this DependencyObject parent) { var children = new List<DependencyObject>(); for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++) { children.Add(VisualTreeHelper.GetChild(parent, i)); } return children; } }中）：

MainWindowResources.xaml

（在<DataTemplate x:Key="ClosableTabItemTemplate"> <DockPanel> <Button Command="{Binding Path=CloseCommand}" Content="X" Cursor="Hand" DockPanel.Dock="Right" Focusable="False" FontFamily="Courier" FontSize="9" FontWeight="Bold" Margin="8,1,0,0" Padding="0" VerticalContentAlignment="Bottom" Width="16" Height="16" ToolTip="Close" /> <TextBlock Text="{Binding Path=DisplayName}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </DockPanel> </DataTemplate>中）：请注意使用自定义MainWindow.xaml控件

MyTabControl

Answer 3

尝试覆盖ItemContainerStyle.Template而不是ContentTemplate

我过去做过类似的事情，虽然我覆盖了整个TabControl模板，所以有点难以看清我在做什么。我的代码看起来像这样：

<ControlTemplate x:Key="CurvedTabItemTemplate" TargetType="{x:Type TabItem}">
    <DockPanel Width="200">
        <ContentPresenter x:Name="ContentSite" ContentSource="Header" RecognizesAccessKey="True" />
    </DockPanel>
</ControlTemplate>

<Style x:Key="CurvedTabItemStyle" TargetType="{x:Type TabItem}">
    <Setter Property="Template" Value="{StaticResource CurvedTabItemTemplate}" />
</Style>

<TabControl Grid.Column="1" ItemsSource="{Binding Path=Tabs}" 
            ContentTemplate="{DynamicResource ClosableTabItemTemplate}"
            ItemContainerStyle="{DynamicResource CurvedTabItemStyle}" />

TabItem标题：如果实际的标题标题，内容不会延伸

3 个答案: