Encabezados de TabItem: El contenido no se estira si el encabezado de la pestaña real sí

Question

Tengo un control de tabulación y estoy tratando de hacer que los encabezados se vean bien. Tengo el siguiente XAML:

(En 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> 

(En MainWindow.xaml :)

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

Aquí está un ejemplo visual de mi problema:

Me gusta el ancho real de las pestañas f o ahora, pero el hecho de que mi panel dock para el encabezado no está llenando todo el espacio es molesto. Lo mismo sucede si uso un Grid, también (presumiblemente cualquier control de contenedor).

Answer 1

Trate overwritting la ItemContainerStyle.Template en lugar de la ContentTemplate

hice algo como esto en el pasado, a pesar de que toda la plantilla sobreescribí TabControl así que es un poco difícil de ver lo que estaba haciendo. Mi código se veía así:

<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

me encontré con el mismo problema visual con pestañas que se pueden cerrar y decidí que al extender tanto los TabControl (para ser utilizado más adelante en XAML) y TabItem clases. Me salté GetContainerForItemOverride() en la primera y OnApplyTemplate() en la última. He creado un método DependencyObject extensión de encontrar el elemento ContentPresenter del TabItem y establecer su HorizontalAlignment propiedad a 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; 
    } 
} 

Mi XAML aparece como la siguiente:

(En 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> 

(en MainWindow.xaml): Tenga en cuenta el uso del control personalizado MyTabControl

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

Answer 3

ContentPresenter.HorizontalAlignment en el estilo predeterminado de TabItem está obligado a ItemsControl.HorizontalContentAlignment. Aquí está, tomado de 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"/> 

Configuración TabControl.HorizontalContentAlignment a Stretch corrige el problema para mí.

<TabControl HorizontalContentAlignment="Stretch" />