WPF superposer une image avec un bouton

Question

J'ai un TabItem personnalisé avec un bouton de fermeture (noté X) dessus pour qu'il puisse être fermé facilement. Dans cet onglet, je souhaite placer une image ou un élément de bordure centré sur le bouton de fermeture situé dans le coin supérieur gauche

Le modèle de contrôle pour cela 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 bordure / l'image dans l'en-tête de l'onglet, utilisez

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

En utilisant ceci, j'obtiens le résultat suivant:

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

Il semble que le bouton limite la largeur de l'élément Border, de sorte qu'il n'atteigne pas toute la largeur que j'ai définie (il est défini sur 50x50 et doit donc être un carré). J'ai essayé de les mettre sur différents niveaux de Z, mais cela ne semble pas avoir fonctionné comme prévu.

La question est donc de savoir comment faire en sorte que le bouton recouvre le contrôle de bordure sans que le bouton affecte la taille du contrôle de bordure.

Answer 1

ce comportement est dû au 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>

retirez le panneau de la station d'accueil et ajustez les propriétés de votre choix pour que le problème soit résolu.