2011-01-16 30 views
5

Tengo un ControlTemplate personalizado para un WPF TabControl que agrega Botones a la izquierda y a la derecha del encabezado de TabItem. Por el momento, esta no es una parte específica, ya que los comandos de botón están vinculados en ControlTemplates XAML y no necesitan estar expuestos fuera de ControlTemplate.¿Cómo puedo agregar contenido adicional a un WPF TabControl?

Esto funciona bien para un botón, pero lo que si quiero añadir contenido hacia la izquierda (o derecha) lado de las TabItemHeaders que se pueden unir exterior de la ControlTemplate para que mi TabControl se vuelve más flexible?

Mi idea era subclasificar el TabControl y tener dos partes con nombre en el ControlTemplate y exponerlas como propiedades del nuevo control; CustomTabControl.LeftContentArea y CustomTabControl.RightContentArea respectivamente. Cada parte nombrada es un ContentPresenter y cada propiedad ContentPresenters Content está expuesta por las propiedades mencionadas anteriormente.

Sin embargo, cuando probé esto no pude poner contenido en las áreas de contenido izquierdo y derecho.

Editar: Para que quede claro, he incluido una imagen. Los rectángulos rojos muestran dónde quiero colocar contenido adicional.

alt text

Actualización: A continuación se muestra una captura de pantalla de los progresos que he hecho hasta ahora, espero que esto ayuda a explicar mi problema un poco más.

La captura de pantalla muestra mi Control de pestañas personalizado con dos pestañas en blanco y tres botones que se encuentran actualmente en el lado derecho del área del encabezado TabItem. Los botones están actualmente definidos en el TabControls personalizado ControlTemplate I.E. hay un ColumnDefinition dentro de ControlTemplates Grid que contiene un StackPanel que aloja 3 botones.

alt text

Lo que estoy buscando es una manera para que el consumidor de la tarjeta de registro decidir qué contenido va en la zona junto a las pestañas. P.EJ. el usuario debe ser capaz de hacer algo como esto:

<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> 

Respuesta

2

Para cualquiera que esté interesado this stackoverflow post responde perfectamente a mi pregunta.

3

Dependiendo de la cantidad de flexibilidad que necesita hay algunos métodos que se adaptan mejor que otros, yo mismo trato de usar DynamicResources si es posible, ya que normalmente es menos problemático que la creación de nuevos controles de usuario.

Aquí hay un ejemplo de cómo añadir contenido adicional a la izquierda de la ficha-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> 

Espero que ayude, si algo no está claro o si esto no es suficiente, la caída de un comentario.

+0

Busco una forma de exponer la propiedad en un control personalizado, así que puedo enlazarlo así en XAML: LeftContentArea = "{StaticResource MyPanelWithLotsOfButtonsControl}". El contenido personalizado debe estar a la izquierda de los TabItems en lugar de a la izquierda del encabezado. Esto me ayuda con otro problema que estaba teniendo, así que votaré una vez que tenga suficiente representante. Gracias. –

+0

Puede vincularse a esos recursos también en realidad. A la izquierda de TabItems, ¿te refieres al área de encabezado a la izquierda de todas las pestañas? –

+0

Sí. En mi plantilla de control personalizado, he agregado una definición de columna adicional para que las pestañas se compensen y haya espacio para que se agregue mi contenido adicional. Quiero exponer una propiedad que me permita poner contenido en esta área. –

3

Intenté una forma diferente (floja), que era crear otra cuadrícula que ocupa el mismo espacio que el TabControl, es decir, ambas están en Grid.Row = 0.He atado la altura de la grilla a la altura de la primera pestaña, por lo que si las pestañas cambian de altura, los otros controles permanecerán centrados. Configuro MinWidth en la ventana para que los controles no se superpongan a las pestañas.

Pega este código en una nueva ventana 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> 

... y obtendrá esto:

enter image description here

Cuestiones relacionadas