2011-01-16 1 views
5

Ho un ControlTemplate personalizzato per un controllo TabControllo WPF che aggiunge pulsanti ai lati sinistro e destro dell'intestazione TabItem. Al momento questa non è una parte denominata poiché i comandi dei pulsanti sono associati a XAML di ControlTemplates e non è necessario che vengano esposti all'esterno di ControlTemplate.Come posso aggiungere contenuti extra a un WPF TabControl?

Questo funziona bene per un pulsante, ma cosa succede se voglio aggiungere contenuti verso sinistra (o destra) sul lato delle TabItemHeaders, che possono essere collegati al di fuori del ControlTemplate modo che la mia TabControl diventa più flessibile?

La mia idea era quella di sottoclasse TabControl e di avere due parti con nome nel ControlTemplate e di esporle come proprietà del nuovo controllo; CustomTabControl.LeftContentArea e CustomTabControl.RightContentArea rispettivamente. Ogni parte denominata è ContentPresenter e ogni proprietà ContentPresenters Content è esposta dalle proprietà sopra indicate.

Tuttavia, quando ho provato questo non ero in grado di mettere il contenuto nelle aree di contenuto sinistra e destra.

Modifica: Per essere chiari ho incluso un'immagine. I rettangoli rossi mostrano dove voglio essere in grado di inserire contenuti extra.

alt text

Aggiornamento: Qui di seguito è una schermata dei progressi che ho fatto finora, spero che questo aiuta a spiegare il mio problema un po 'più.

La schermata mostra il mio controllo scheda personalizzato con due schede vuote e tre pulsanti attualmente sul lato destro dell'area di intestazione TabItem. I pulsanti sono attualmente definiti nel TabControls personalizzato ControlTemplate I.E. c'è una ColumnDefinition all'interno della ControlTemplates Grid che contiene uno StackPanel che ospita 3 pulsanti.

alt text

Quello che sto cercando è un modo per consentire al consumatore di controllo a schede a decidere quali contenuti va nella zona accanto alle schede. PER ESEMPIO. l'utente dovrebbe essere in grado di fare qualcosa del genere:

<local:CustomTabControl> 
    <local:CustomTabControl.RightContentArea> 
     <!-- This can be changed to ANY content that the user wants --> 
     <StackPanel Orientation="Horizontal"> 
      <Button Content="Test" /> 
      <Button Content="Test" /> 
      <Button Content="Test" /> 
     </StackPanel> 
    </local:CustomTabControl.RightContentArea> 

    <!-- TabItems are added as normal --> 
    <TabItem Header="Tab One" /> 
    <TabItem Header="Tab Two" /> 

</local:CustomTabControl> 

risposta

2

Per chiunque sia interessato, il post stackoverflow this risponde perfettamente alla mia domanda.

3

A seconda di quanto la flessibilità necessarie ci sono alcuni metodi che sono adatti meglio di altri, io stesso cerco di utilizzare DynamicResources se possibile, perché è normalmente meno fastidioso rispetto alla creazione di nuovi controlli utente.

Ecco un esempio di come aggiungere ulteriori contenuti alla sinistra della scheda-Header:

<TabControl> 

    <TabControl.Resources> 
     <DataTemplate x:Key="AugmentedTabItem"> 
      <StackPanel Orientation="Horizontal"> 
       <ContentPresenter Content="{DynamicResource ContentLeft}" Margin="0,0,5,0"/> 
       <ContentPresenter Content="{Binding}"/> 
      </StackPanel> 
     </DataTemplate>  
    </TabControl.Resources> 

    <TabItem Header="ÜberTab" HeaderTemplate="{StaticResource AugmentedTabItem}"> 
     <TabItem.Resources> 
      <TextBlock x:Key="ContentLeft" Text=">>>" Foreground="Blue"/>   

     </TabItem.Resources> 
    </TabItem>  
</TabControl> 

Speranza che aiuta, se qualcosa non è chiaro o se questo non è sufficiente, Drop un commento.

+0

Sto cercando un modo di esporre la proprietà in un controllo personalizzato in modo da poterlo associare in questo modo in XAML: LeftContentArea = "{StaticResource MyPanelWithLotsOfButtonsControl}". Il contenuto personalizzato deve essere a sinistra di TabItems anziché a sinistra dell'intestazione. Questo mi aiuta con un altro problema che stavo avendo, quindi risparmierò una volta che avrò abbastanza rappresentanti. Grazie. –

+0

Anche in questo caso è possibile associare a tali risorse. A sinistra dei TabItems, intendi nell'area Header a sinistra di tutte le schede? –

+0

Sì. Nel mio modello di controllo personalizzato ho aggiunto un'ulteriore ColumnDefinition in modo che le schede siano sfalsate e vi sia uno spazio per il mio contenuto extra da aggiungere. Voglio esporre una proprietà che mi permetta di inserire contenuti in quest'area. –

3

Ho provato un modo diverso (pigro), che era quello di creare un'altra griglia che occupa lo stesso spazio del TabControl, cioè entrambi sono in Grid.Row = 0.Ho legato l'altezza della griglia all'altezza della prima scheda, quindi se le schede cambiano in altezza gli altri controlli rimarranno centrati. Ho impostato MinWidth sulla finestra in modo che i controlli non si sovrappongano alle schede.

Incolla questo codice in una nuova finestra WPF ...

<Window x:Class="MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
Title="MainWindow" Height="306" Width="490" MinWidth="300"> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <TabControl Grid.Row="0" x:Name="tabControl"> 
     <TabItem x:Name="tabItem" Header="TabItem" Height="50"> 
      <Grid Background="#FFE5E5E5"/> 
     </TabItem> 
     <TabItem Header="TabItem"> 
      <Grid Background="#FFE5E5E5"/> 
     </TabItem> 
    </TabControl> 

    <Grid Grid.Row="0" Height="{Binding ActualHeight, ElementName=tabItem}" 
     VerticalAlignment="Top" Margin="0,2,0,0"> 
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" 
       VerticalAlignment="Center" Margin="20,0"> 
      <TextBlock VerticalAlignment="Center" Margin="10,0" FontSize="16" 
        Foreground="Red" FontFamily="Calibri">My Text</TextBlock> 
      <Button Content="My Button" /> 
     </StackPanel> 
    </Grid> 

</Grid> 
</Window> 

... e otterrete questo:

enter image description here