No WPF TabControl - I pode adicionar conteúdo ao lado dos cabeçalhos de guia?
-
07-07-2019 - |
Pergunta
Existe uma maneira fácil de posicionar um outro controle (botão ou seja, a) em linha e à direita de cabeçalhos de guia no WPF?
Na web, eu iria usar uma bóia ou posicionamento absoluto para alcançar este objetivo.
A linha vermelha na foto é o que estou tentando chegar:
(fonte: jonkragh.com )
Obrigado! Jon
Solução
A forma robusta para fazer isso é re-modelo do TabControl
como eu fiz para o botão fechar no meu ActiveAwareCommand
amostra :
<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>
Observe como o TabPanel
e Button
nunca pode se sobrepõem. Resultado:
Outras dicas
Semelhante à forma como você faria isso na web, você pode simplesmente colocar o controle de guia e controle flutuando dentro de uma grade e definir as margens do controlo flutuante para obtê-lo no lugar certo. Você também pode usar um elemento Canvas para conter a grade e controle flutuante e definir o Canvas.Left e Canvas.Top.
Você pode precisar para medir dinamicamente a largura de cada guia, se as guias não são determinadas em tempo de compilação.