WPF Superposition d'une image avec un bouton

Question

J'ai un TabItem personnalisé avec un bouton de fermeture (indiqué par X) pour qu'il puisse être facilement fermé. Dans cet onglet, je veux mettre un image ou article Border, qui est centré avec le bouton de fermeture dans le coin supérieur gauche

Le modèle de contrôle pour c'est

<ControlTemplate TargetType="{x:Type local:CloseableTabItem}"> 
     <Grid SnapsToDevicePixels="true"> 
     <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" > 
      <DockPanel x:Name="ContentPanel"> 
      <Button x:Name="PART_Close" Panel.ZIndex="1" HorizontalAlignment="Right" Margin="0,1,1,0" VerticalAlignment="Top" Width="16" Height="16" DockPanel.Dock="Right" Style="{DynamicResource CloseableTabItemButtonStyle}" ToolTip="Close Tab"> 
       <Path x:Name="Path" Stretch="Fill" StrokeThickness="0.5" Stroke="#FF333333" Fill="#FF969696" Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z " HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> 
      </Button> 
      <ContentPresenter Panel.ZIndex="0" x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/> 
      </DockPanel> 
     </Border> 
     </Grid> 

(les déclencheurs de contrôle ont été supprimés) Et pour insérer la frontière/image dans cet en-tête Tab i utilise les éléments suivants

<TabControl Margin="0" TabStripPlacement="Left"> 
     <local:CloseableTabItem> 
      <local:CloseableTabItem.Header> 
       <Border Height="50" Width="50" Background="Red" BorderThickness="1" BorderBrush="Black" Margin="5" /> 
      </local:CloseableTabItem.Header>  
     </local:CloseableTabItem> 
    </TabControl> 

l'utilisation de ce que je reçois le résultat suivant:

alt text http://lloydsparkes.co.uk/files/CloseTab.png

Il semble que le bouton limite la largeur de l'élément Bordure, de sorte qu'il n'atteigne pas sa largeur maximale que je définis (il est défini sur 50x50, donc il doit être un carré). J'ai essayé de les mettre sur différents niveaux de Z mais cela n'a pas fonctionné comme prévu.

Donc la question est, comment puis-je faire le bouton superposer le contrôle de la bordure sans le bouton affectant la taille du contrôle de la frontière?

Answer 1

que le comportement est en raison de la DockPanel ici:

<DockPanel x:Name="ContentPanel"> 
     <Button x:Name="PART_Close" Panel.ZIndex="1" HorizontalAlignment="Right" Margin="0,1,1,0" VerticalAlignment="Top" Width="16" Height="16" DockPanel.Dock="Right" Style="{DynamicResource CloseableTabItemButtonStyle}" ToolTip="Close Tab"> 
      <Path x:Name="Path" Stretch="Fill" StrokeThickness="0.5" Stroke="#FF333333" Fill="#FF969696" Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z " HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> 
     </Button> 
     <ContentPresenter Panel.ZIndex="0" x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/> 
     </DockPanel> 

retirer le panneau de station d'accueil et d'ajuster vos propriétés au besoin et le problème sera résolu.