TabItem標題：如果實際的標題標題不能伸展，內容不會伸展

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}" /> 

這裏是我的問題的直觀例子：

我喜歡tab的實際寬度f或現在，但事實上，我的dock的頭部沒有填滿所有的空間是麻煩的。同樣的事情發生，如果我也使用Grid（推測是任何容器控制）。

Answer 1

嘗試overwritting的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}" /> 

Answer 2

我遇到了與關閉的選項卡相同的視覺問題，並通過延長兩個TabControl（使用後在XAML）和TabItem類解決它。我在前者中覆蓋了GetContainerForItemOverride()，在後者中替換爲OnApplyTemplate()。我創建了一個DependencyObject擴展方法來找到TabItem的ContentPresenter元素，並將其HorizontalAlignment屬性HorizontalAlignment.Stretch：

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; 
    } 
} 

我的XAML顯示如下：

（在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控件

<MyTabControl IsSynchronizedWithCurrentItem="True" 
       ItemsSource="{Binding Path=ClosableViewModels}" 
       ItemTemplate="{StaticResource ClosableTabItemTemplate}" 
       Margin="4" /> 

Answer 3

在TabItem的默認樣式ContentPresenter.HorizontalAlignment勢必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" />