WPFボタンで画像をオーバーレイする

Question

閉じるボタン（Xで示す）を持つカスタムTabItemを簡単に閉じることができます。このタブには、私は画像やボーダーアイテムを置きたいと思う、それは左上隅の閉じるボタンを中央に配置され

このためコントロールテンプレートが

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

（制御トリガが削除されている）であります と使用

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

以下、私が使用しているタブのヘッダーにボーダー/画像を挿入するには、私は次のような結果を得るこの：

0123を

ボタンが境界要素の幅を制限しているように見えるので、設定した幅に達しません（50x50に設定されているので、正方形にする必要があります）。私はそれらを異なるZレベルに置こうとしましたが、それは私が期待したように働いたようです。

問題は、境界コントロールのサイズに影響を与えるボタンを使わずにボタンをオーバーレイコントロールに重ねることができますか？

Answer 1

その現象は、ここにDockPanelは次のとおりです。

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

ドックパネルを削除し、あなたの特性は、必要に応じて調整し、問題が修正されます。