2009-09-22 6 views
9

En ce moment, j'ai une fenêtre WPF qui ressemble à ceci:Est-il possible d'aligner à gauche des en-têtes dans un onglet WPF TabControl?

All the tab labels of the TabControl are centered http://img33.yfrog.com/img33/9996/tabcontrolcenteredheade.jpg

Je voudrais à ressembler à ceci (image Photoshop trafiquée):

All the tab labels of the TabControl are left-aligned http://img42.yfrog.com/img42/6687/tabcontrolleftalignedhe.jpg

Est-ce possible sans complètement refaire le ControlTemplate?

J'ai essayé de jouer avec HorizontalAlignment, HorizontalContentAlignment, etc., mais rien que j'ai essayé n'a eu l'effet désiré.


Edit:

Si je tente cette solution (offerte par T Levesque) ...

<TabControl...> 
    <TabControl.ItemContainerStyle> 
     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="HorizontalAlignment" Value="Left"/> 
     </Style> 
    </TabControl.ItemContainerStyle> 
    ... 
</TabControl> 

... Je reçois ceci:

All the tab labels of the TabControl are left-aligned, but the tabs don't stretch properly http://img14.imageshack.us/img14/6687/tabcontrolleftalignedhe.jpg

Ce qui est proche, mais il finit par regarder genre de l comme un histogramme.


Edit 2:

Pour mémoire, je fini par combiner R. Copsey et les réponses de T. Levesque pour arriver à ceci:

<TabControl 
    Margin="0,5,0,0" 
    HorizontalContentAlignment="Left" 
    TabStripPlacement="Left"> 
    <TabControl.ItemContainerStyle> 
     <Style 
      TargetType="TabItem"> 
      <Setter 
       Property="HorizontalAlignment" 
       Value="Stretch" /> 
      <Setter 
       Property="HorizontalContentAlignment" 
       Value="Stretch" /> 
     </Style> 
    </TabControl.ItemContainerStyle> 
    <TabItem 
     Header="Perform System Administration"> 
     ... 
    <TabItem 
     Header="Perform Setup Tasks"> 
     ... 

Répondre

13

Ce qui suit vous donnera l'apparence que vous recherchez.

<TabControl TabStripPlacement="Left" HorizontalContentAlignment="Left" > 
     <TabItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Header="Header 1"> 
      <TabItem.Content>Test</TabItem.Content> 
     </TabItem> 

     <TabItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Header="Header 2" > 
      <TabItem.Content>Test</TabItem.Content> 
     </TabItem> 

     <TabItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Header="Header Longer Version"> 
      <TabItem.Content>Test</TabItem.Content> 
     </TabItem> 
    </TabControl> 
+0

Cela ne donnera pas le résultat qu'il cherche dans la capture d'écran fourni ... –

+0

Je viens de tester, et est venu avec quelque chose avec le look correct. –

+0

Oui, ça fait l'affaire. Merci! – devuxer

4

Quel type de contrôle êtes-vous utiliser pour la propriété TabItem.Header? Si vous utilisez simplement une étiquette, spécifiez-vous la largeur de l'étiquette à une valeur commune? Si l'étiquette est dimensionnée au contenu, elle apparaîtra comme vous l'avez montré. Essayez ce qui suit avec une largeur commune pour les étiquettes utilisées pour afficher le texte d'en-tête:

<TabControl TabStripPlacement="Left" > 
    <TabItem> 
     <TabItem.Header> 
      <Label Width="100">test tab 1</Label> 
     </TabItem.Header> 
     <TabItem.Content> 
      xyz 
     </TabItem.Content> 
    </TabItem> 
    <TabItem> 
     <TabItem.Header> 
      <Label Width="100">test t2</Label> 
     </TabItem.Header> 
     <TabItem.Content> 
      abc 
     </TabItem.Content> 
    </TabItem> 
    <TabItem> 
     <TabItem.Header> 
      <Label Width="100">test tab three</Label> 
     </TabItem.Header> 
     <TabItem.Content> 
      abc 
     </TabItem.Content> 
    </TabItem> 
</TabControl> 
3

Vous pouvez définir l'alignement horizontal pour tous les réglettes:

<TabControl...> 
    <TabControl.ItemContainerStyle> 
     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="HorizontalAlignment" Value="Left"/> 
     </Style> 
    </TabControl.ItemContainerStyle> 
    ... 
</TabControl> 
+0

Bonne idée, mais ne fonctionne pas tout à fait. J'ai édité ma question pour montrer ce que cela fait. – devuxer

+0

Mais +1 pour l'idée de définir 'ItemContainerStyle' ... économise beaucoup de balisage. Voir ma deuxième édition. – devuxer

1

simplement en ajoutant l'attribut HorizontalContentAlignment = « gauche » à la TabControl alignera réglettes gauche.

<TabControl 
Margin="0,5,0,0" 
HorizontalContentAlignment="Left" 
TabStripPlacement="Left"> 
<TabItem 
    Header="Perform System Administration"> 
    ... 
<TabItem 
    Header="Perform Setup Tasks"> 
    ... 
Questions connexes