2009-09-14 11 views
12

¿Hay una manera fácil de colocar otro control (es decir, un botón) en línea y a la derecha de los encabezados de pestañas en WPF?En el TabControl de WPF, ¿puedo agregar contenido junto a los encabezados de las pestañas?

En la web, utilizaría un flotador o posicionamiento absoluto para lograr esto.

La línea roja en la imagen es lo que estoy tratando de llegar a: A control alongside of WPF Tabs http://www.jonkragh.com/images/text-next-to-tabs.png

Gracias! Jon

+11

+1 para el más excelente obra boceto;) –

+0

Gracias Steffen! ¡Creado con una tableta Wacom y OneNote! –

+0

Interesante - Estoy usando el OneNote más excelente a diario e intensamente también, pero lo único que no he intentado durante años es agregar una tableta a esta cadena de herramientas, aunque OneNote realmente está pidiendo una entrada de lápiz para expandir aún más conjunto de características impresionante sin uno - su comentario finalmente podría desencadenar esto ahora, gracias :) –

Respuesta

9

La forma sólida de hacer esto es para volver a la plantilla de TabControl como lo hice con el botón de cierre en mi ActiveAwareCommand sample:

<ControlTemplate x:Key="TabControlTemplate" TargetType="TabControl"> 
    <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition x:Name="ColumnDefinition0"/> 
      <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition x:Name="RowDefinition0" Height="Auto"/> 
      <RowDefinition x:Name="RowDefinition1" Height="*"/> 
     </Grid.RowDefinitions> 
     <Grid Panel.ZIndex="1"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="Auto"/> 
      </Grid.ColumnDefinitions> 
      <TabPanel Margin="2,2,2,0" x:Name="HeaderPanel" IsItemsHost="true" KeyboardNavigation.TabIndex="1"/> 
      <Button Grid.Column="1" Command="{Binding DataContext.CloseCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">X</Button> 
     </Grid> 
     <Border x:Name="ContentPanel" Grid.Column="0" Grid.Row="1" BorderBrush="#D0CEBF" BorderThickness="0,0,1,1" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local"> 
      <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
       <Border Background="{TemplateBinding Background}"> 
        <Grid x:Name="PART_ItemsHolder"/> 
       </Border> 
      </Border> 
     </Border> 
    </Grid> 
</ControlTemplate> 

Aviso cómo el TabPanel y Button nunca puede solaparse. Resultado:

alt text

+1

¡Gracias! Esto me apuntó en la dirección correcta. Terminé copiando el estilo/plantilla predeterminado para las pestañas (usando Blend) y luego hice mi estilo/plantilla de modo que el botón agregar pestaña siempre esté al lado de la última pestaña. Puedo publicar ese código si alguien está interesado. –

+0

Estoy tratando de ajustar esta plantilla a silverlight4 y no es tan sencillo como podría parecer. ¿Tiene tiempo para crear una versión de Silverlight de esta plantilla, por favor? :) – Houman

0

Similar a cómo lo haría en la web, puede simplemente colocar el control de pestañas y el control flotante dentro de una rejilla y establecer los márgenes del control flotante para obtenerlo en el lugar correcto. También podría usar un elemento Canvas para contener la cuadrícula y el control flotante y establecer Canvas.Left y Canvas.Top.

Puede que necesite medir dinámicamente el ancho de cada pestaña, si las pestañas no están determinadas en tiempo de compilación.

Cuestiones relacionadas