En el WPF TabControl, ¿puedo agregar contenido al lado de los encabezados de las pestañas?
-
07-07-2019 - |
Pregunta
¿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 la web, usaría una posición flotante o absoluta para lograr esto.
La línea roja en esta imagen es a lo que estoy tratando de llegar:
(fuente: jonkragh.com )
¡Gracias! Jon
Solución
La forma sólida de hacer esto es volver a modelar el TabControl
como lo hice para 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>
Observe cómo el TabPanel
y el Button
nunca pueden superponerse. Resultado:
??
Otros consejos
Similar a cómo lo haría en la web, puede simplemente colocar el control de pestaña y el control flotante dentro de una Cuadrícula y establecer los márgenes del control flotante para colocarlo en el lugar correcto. También puede 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 se determinan en el momento de la compilación.