2009-09-22 5 views
9

Gerade jetzt, ich habe ein WPF-Fenster, das wie folgt aussieht:Ist es möglich, Header in einem WPF TabControl Links auszurichten?

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

Ich mag es so (Photoshop manipulierte Bild) sehen:

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

Ist die möglich, ohne die ControlTemplate komplett zu wiederholen?

Ich versuchte mit HorizontalAlignment, HorizontalContentAlignment, etc., aber nichts versuchte ich hatte den gewünschten Effekt.


Edit:

Wenn ich diese Lösung versuchen (angeboten von T Levesque) ...

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

... ich dieses:

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

Was ist in der Nähe, aber es sieht irgendwie l aus Ike ein Histogramm.


Edit 2:

Für die Aufzeichnung landete ich die Kombination von bis R. Copsey und T. Levesque die Antworten auf diese zu gelangen:

<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"> 
     ... 

Antwort

13

Nachfolgend erhalten Sie das Aussehen Sie nach.

<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

Das wird nicht das Ergebnis geben, die er für in der mitgelieferten Screenshot sucht ... –

+0

ich nur getestet, und kam mit etwas mit dem richtigen Look. –

+0

Ja, das macht den Trick. Vielen Dank! – devuxer

4

Welche Art von Kontrolle sind Sie Verwenden für die TabItem.Header-Eigenschaft? Wenn Sie nur ein Label verwenden, geben Sie die Breite des Labels auf einen gemeinsamen Wert an? Wenn das Label an den Inhalt angepasst wird, wird es so angezeigt, wie Sie es gezeigt haben. Versuchen Sie Folgendes mit einer gemeinsamen Breite für die Etiketten verwendet, um den Kopftext anzuzeigen:

<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

Sie können die horizontale Ausrichtung für alle Tab-Header definieren:

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

Gute Idee, funktioniert aber nicht ganz. Ich habe meine Frage bearbeitet, um zu zeigen, was das bedeutet. – devuxer

+0

Aber +1 für die Idee, den 'ItemContainerStyle' zu ​​setzen ... spart eine Menge Markup. Siehe meine zweite Bearbeitung. – devuxer

1

einfach das Hinzufügen des Attributs Horizontalcontentalignment = „Links“ auf die TabControl wird Registerkarte Header links ausrichten.

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