2015-12-29 1 views
0

J'essaie d'obtenir que mes onglets WPF centrent leurs textes d'en-tête. Mais peu importe les combinaisons de HorizontalAlignment et HorizontalAlignment (centre ou étirement) que j'ai définies sur le ContentPresenter et sa bordure, le texte apparaît toujours aligné à gauche, plutôt que centré. Je ne vois pas non plus de propriété sur TabItems que je pourrais utiliser pour définir ceci directement sur les éléments de l'onglet eux-mêmes (comme il se trouve, HorizontalAlignment sur un TabItem fait quelque chose de complètement différent).Comment centrer les textes d'en-tête sur des TabItems

Code Ma est en ce moment ceci:

<Grid TextElement.Foreground="White" TextElement.FontSize="17" TextElement.FontFamily="Times New Roman" HorizontalAlignment="Center" > 
    <Border Name="TabBorder" BorderThickness="8 8 8 0" CornerRadius="12 12 0 0" 
      Background="{StaticResource bandBrush}" HorizontalAlignment="Center" > 
    <ContentPresenter HorizontalAlignment="Stretch" ContentSource="Header" Height="24" Width="100" /> 
    </Border> 
</Grid> 

Répondre

3

Vous pouvez mettre le ContentPresenter dans une étiquette avec la propriété HorizontalAlignment mis à strecth et le HorizontalContentAlignment mis à Centre, Check out this:

<Grid x:Name="gridTabItem"> 
    <Border x:Name="Border" Margin="0,0,0,0" BorderBrush="{x:Null}" CornerRadius="7,7,0,0" BorderThickness="0" > 
    <Label x:Name="label" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"> 
     <ContentPresenter x:Name="ContentSite" 
         VerticalAlignment="Stretch" 
       HorizontalAlignment="Center" 
       ContentSource="Header" Margin="10,2,10,2" 
       RecognizesAccessKey="True"> 
     </ContentPresenter> 
    </Label> 

    </Border> 
    <Rectangle x:Name="rectangle" HorizontalAlignment="Left" Height="4" Margin="0,41, 0,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=gridTabItem}" StrokeThickness="0" Fill="{x:Null}"/> 
    <Rectangle x:Name="rectangle1" HorizontalAlignment="Left" Height="1" Margin="0,43,0,0" Stroke="{x:Null}" StrokeThickness="0" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=gridTabItem}" Fill="#FFEEEEEE"/> 
    <Rectangle x:Name="glow" HorizontalAlignment="Left" Height="41" Margin="0" Stroke="{x:Null}" StrokeThickness="0" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=gridTabItem}" Fill="{x:Null}"/> 
</Grid> 
+0

Merci. Si j'ajoute l'étiquette, définissez son HorizontalAlignment à Stretch et son HorizontalContentAlignment à Center, puis définissez horizontaleAlignment contentPresenter au centre, puis les textes * toujours * alignés vers la gauche. Cependant, si je copie/colle votre code dans mon code au lieu de mon propre code, alors les en-têtes * sont * centrés! Donc, ce code est probablement correct, même si je dois encore comprendre pourquoi mon propre code ne fonctionne pas lorsque j'adopte la même structure et les mêmes paramètres. J'accepterai probablement cette réponse plus tard ... – Holland

+0

En fait, cela pourrait-il avoir à faire avec le fait que je mets une largeur sur mon ContentPresenter? (Je ne l'ai pas montré dans le code ci-dessus, car j'ai enlevé ce que je jugeais non pertinent.) Lorsque je supprime la largeur, le texte peut être centré - mais difficile à voir parce que les éléments de l'onglet deviennent si étroits c'est-à-dire que la largeur du tabitem dépend de l'espace occupé par le texte). Et ce n'est pas ce que je veux de toute façon, j'aimerais que tous les onglets aient des largeurs égales quelle que soit la longueur du texte. – Holland

+0

En fait, cela fonctionne parfaitement lorsque je définis simplement la largeur sur le TabItem plutôt que sur le ContentPresenter. Parfait. – Holland

0

Je sais que cette question est un peu ancienne et il y a déjà une réponse acceptée mais je pense que ma réponse pourrait aider quelqu'un. Mon problème était que j'avais besoin de répartir les en-têtes TabItem uniformément (chaque entête TabItem avait la même largeur) et le texte à l'intérieur de l'en-tête devait être centré. Voilà donc comment j'ai réalisé ceci:

TabControl.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:local="clr-namespace:FMEA.Resources.Styles" 
       xmlns:Converters="clr-namespace:FMEA.Converters" 
       xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"> 

<Style x:Key="Custom_TabItem" BasedOn="{StaticResource {x:Type TabItem}}" TargetType="{x:Type TabItem}"> 
    <Setter Property="Width"> 
     <Setter.Value> 
      <MultiBinding> 
       <MultiBinding.Converter> 
        <Converters:TabSizeConverter /> 
       </MultiBinding.Converter> 
       <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" /> 
       <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" Path="ActualWidth" /> 
      </MultiBinding> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Grid x:Name="tabItem"> 
        <Border x:Name="Border"> 
         <ContentPresenter x:Name="content" 
              VerticalAlignment="Center" 
              HorizontalAlignment="Center" 
              ContentSource="Header" /> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsSelected" Value="True"> 
         <Setter Property="Foreground" Value="Gray" /> 
        </Trigger> 
        <Trigger Property="IsSelected" Value="False"> 
         <Setter Property="Foreground" Value="LightGray" /> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Foreground" Value="Black" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="HeaderTemplate"> 
     <Setter.Value> 
      <DataTemplate DataType="{x:Type TabItem}"> 
       <Border x:Name="border"> 
        <ContentPresenter> 
         <ContentPresenter.Content> 
          <TextBlock Text="{TemplateBinding Content}" 
             FontSize="22" HorizontalAlignment="Center" /> 
         </ContentPresenter.Content> 
        </ContentPresenter> 
       </Border> 
      </DataTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

</ResourceDictionary> 

où TabSizeConverter est le suivant:

class TabSizeConverter : IMultiValueConverter 
{ 
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) 
    { 
     TabControl tabCtrl = values[0] as TabControl; 
     double width = tabCtrl.ActualWidth/tabCtrl.Items.Count; 
     return width <= 1 ? 0 : width - 1; 
    } 

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

Exemple d'utilisation:

<TabItem Header="MyHeader" Style="{StaticResource Custom_TabItem}">