2009-09-14 10 views
12

Esiste un modo semplice per posizionare un altro controllo (ad esempio un pulsante) in linea ea destra delle intestazioni di tabulazione in WPF?In WPF TabControl: posso aggiungere il contenuto accanto alle intestazioni di tabulazione?

Nel web, vorrei utilizzare un float o posizionamento assoluto per realizzare questo.

La linea rossa in questa foto è quello che sto cercando di raggiungere: A control alongside of WPF Tabs http://www.jonkragh.com/images/text-next-to-tabs.png

Grazie! Jon

+11

+1 per la maggior grafica eccellente schizzo;) –

+0

Grazie Steffen! Creato con una tavoletta Wacom e OneNote! –

+0

Interessante - sto usando il OneNote più eccellente al giorno e anche intensamente, ma l'unica cosa che non sono riuscito a provare per anni è l'aggiunta di un tablet a questa toolchain, sebbene OneNote stia davvero chiedendo un input penna per espandere ulteriormente il già funzionalità impressionante senza uno - il tuo commento potrebbe finalmente far scattare questo ora, grazie :) –

risposta

9

Il modo più robusto per farlo è quello di ri-modello del TabControl come ho fatto per il pulsante di chiusura nel mio 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> 

Notate come il TabPanel e Button può mai sovrapporsi. Risultato:

alt text

+1

Grazie! Questo mi ha indirizzato nella giusta direzione. Ho finito per copiare lo stile/modello di default per le schede (usando Blend) e poi ho creato il mio stile/modello in modo tale che il pulsante della scheda Aggiungi fosse sempre vicino all'ultima scheda. Posso postare quel codice se qualcuno è interessato. –

+0

Sto provando a regolare questo modello su silverlight4 e non è così semplice come potrebbe sembrare. Hai tempo per creare una versione Silverlight di questo modello per favore? :) – Houman

0

Analogamente a come lo faresti sul web, puoi semplicemente inserire il controllo a schede e il controllo mobile all'interno di una griglia e impostare i margini del controllo mobile per farlo nel punto giusto. È anche possibile utilizzare un elemento Canvas per contenere il controllo Grid e floating e impostare Canvas.Left e Canvas.Top.

Potrebbe essere necessario misurare dinamicamente la larghezza di ciascuna scheda, se le schede non sono determinate in fase di compilazione.

Problemi correlati