Positionierung des WPF-Tabitems

Question

Wie positionieren Sie zum Beispiel drei Tabitems ganz oben links und eine ganz oben rechts in einem Tab-Steuerelement mit WPF?

Ich habe versucht, das vierte Tabitem nach rechts zu verschieben, indem ich seinen Rand ändere, aber das ergibt kein gutes Ergebnis; vor allem ist es kurz geschnitten und zweitens wird es nicht richtig angezeigt, wenn ausgewählt.

Answer 1

Das Problem ist, dass die TabPanel, die intern von der TabControl verwendet wird, um die Registerkarten zu erstellen, scheint nicht zu unterstützen, was Sie wollen. Eine schnelle Abhilfe wäre die TabPanel durch etwas anderes zu ersetzen, zum Beispiel ein DockPanel:

<Window x:Class="Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="300" Width="300"> 
    <TabControl> 
     <TabControl.Template> 
      <ControlTemplate TargetType="TabControl"> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
        <Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1"> 
         <Border BorderThickness="{TemplateBinding BorderThickness}" 
           BorderBrush="{TemplateBinding BorderBrush}"> 
          <Border Background="{TemplateBinding Background}"> 
           <ContentPresenter ContentSource="SelectedContent"/> 
          </Border> 
         </Border> 
        </Border> 
        <DockPanel IsItemsHost="True" LastChildFill="False" Margin="2,2,2,0" /> 
       </Grid> 
      </ControlTemplate> 
     </TabControl.Template> 

     <TabItem Header="Item 1" /> 
     <TabItem Header="Item 2" /> 
     <TabItem Header="Item 3" /> 
     <TabItem Header="Item 4" DockPanel.Dock="Right" /> 
    </TabControl> 
</Window> 

(Referenz:. Dies ist eine modifizierte Version eines MSDN example für ein TabControl Styling)

Die einfachen DockPanel funktioniert nicht so flüssig wie das TabPanel - die Tabs "springen" ein bisschen, wenn Sie zwischen ihnen wechseln, aber das könnte Ihnen den Einstieg erleichtern. Durch das Unterklassifizieren des TabPanels und das Überschreiben der relevanten Teile erhalten Sie ein genaueres Ergebnis. Ich schätze, es hängt davon ab, wie viel Aufwand du damit machen willst.

Answer 2

Sie müssten die TabPanel innerhalb der TabControl zu etwas Brauch austauschen, die das gewünschte Verhalten zur Verfügung stellte. Keine der Standardeinstellungen panels bieten Ihnen das von Ihnen gewünschte Verhalten.

Dies erfordert höchstwahrscheinlich das Überschreiben von MeasureOverride und ArrangeOverride, um die benutzerdefinierte Platzierung innerhalb des Bereichs bereitzustellen, die basierend auf der Anzahl der darin enthaltenen Elemente gewünscht wird.

Answer 3

Dies beinhaltet ein benutzerdefiniertes ControlTemplate für das TabControl. Ich habe ein Beispiel mit einem DockPanel als Element-Host und nicht mit dem Standard-TabPanel versucht.

<Style TargetType="{x:Type TabControl}"> 
     <Setter Property="OverridesDefaultStyle" 
       Value="True" /> 
     <Setter Property="SnapsToDevicePixels" 
       Value="True" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabControl}"> 
        <Grid KeyboardNavigation.TabNavigation="Local"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 
         <DockPanel Name="HeaderPanel" 
            LastChildFill="False" 
            Grid.Row="0" 
            Panel.ZIndex="1" 
            Margin="0,0,4,-1" 
            IsItemsHost="True" 
            KeyboardNavigation.TabIndex="1" 
            Background="Transparent" /> 
         <Border Name="Border" 
           Grid.Row="1" 
           Background="WhiteSmoke" 
           BorderBrush="Black" 
           BorderThickness="1" 
           CornerRadius="2" 
           KeyboardNavigation.TabNavigation="Local" 
           KeyboardNavigation.DirectionalNavigation="Contained" 
           KeyboardNavigation.TabIndex="2"> 
          <ContentPresenter Name="PART_SelectedContentHost" 
               Margin="4" 
               ContentSource="SelectedContent" /> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Das Problem ist, dass ich nicht weiß, von einer Art, die DockPanel.Dock Eigenschaft des Aussetzens des TabItems außerhalb des Control Z.B.

<TabControl Margin="10"> 
    <TabItem Header="Tab One" DockPanel.Dock="Left"/> 
    <TabItem Header="Tab Two" DocKPanel.Dock="Left"/> 
    <TabItem Header="Tab Three" DocKPanel.Dock="Left"/> 
    <TabItem Header="Tab Four" DocKPanel.Dock="Right"/> 
</TabControl> 

// Note: This does not work!! 

Ich denke, Sie müssen Ihr eigenes Panel schreiben, um die TabItems zu hosten; Beachten Sie, dass dies eine Menge Arbeit sein wird, da Sie Dinge wie Überlaufverhalten behandeln müssen, die in das TabPanel integriert sind.

Auch wenn Sie dies versucht haben, denke ich, dass Sie eine benutzerdefinierte TabControl schreiben müssten, wenn Sie diese Funktionalität außerhalb der ControlTemplate verfügbar machen wollten.

Wenn Sie diesen Weg gehen, dann in dieser meine Antwort sehen post

Answer 4

Ich fand, dass ein „unsichtbaren“ Tab durch Einfügen ich den Abstand einstellen könnte, (dh die Laschen von oben nach unten bewegen)

zum Beispiel:

TabItem Height="100" Visibility="Hidden" <br> 
TabItem..... <br> 
TabItem.... <br>