2009-09-22 17 views
9

En este momento, tengo una ventana de WPF que se ve así:¿Es posible alinear a la izquierda los encabezados en un WPF TabControl?

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

Me gustaría que el siguiente aspecto (imagen de Photoshop adulterada):

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

¿Este posible sin rehacer por completo el ControlTemplate?

Intenté jugar con HorizontalAlignment, HorizontalContentAlignment, etc., pero nada de lo que probé tuvo el efecto deseado.


Editar:

Si trato de esta solución (ofrecido por T Levesque) ...

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

... me sale esto:

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

que está cerca, pero termina pareciendo algo l Ike un histograma.


Edición 2:

Para el registro, que terminaron combinando R. Copsey y respuestas de T. Levesque para llegar a esto:

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

Respuesta

13

La siguiente información le dará el aspecto que está después.

<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

que no va a dar el resultado que está buscando en la captura de pantalla proporcionado –

+0

... Acabo de prueba, y se acercó con algo con el aspecto correcto. –

+0

Sí, este es el truco. ¡Gracias! – devuxer

4

¿Qué tipo de control es usted utilizando para la propiedad TabItem.Header? Si simplemente está utilizando una etiqueta, ¿está especificando el ancho de la etiqueta a algún valor común? Si la etiqueta está dimensionando el contenido, aparecerá como lo ha mostrado. Pruebe lo siguiente con una anchura común para las etiquetas utilizadas para visualizar el texto del encabezado:

<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

Se puede definir la alineación horizontal para todos los encabezados de la ficha:

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

Buena idea, pero no funciona del todo. Edité mi pregunta para mostrar lo que hace. – devuxer

+0

Pero +1 para la idea de establecer el 'ItemContainerStyle' ... ahorra un montón de marcado. Ver mi segunda edición – devuxer

1

Simplemente añadiendo el atributo HorizontalContentAlignment = "izquierda" a la TabControl alineará cabeceras pestaña izquierda.

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