WPF用按钮覆盖图像

I have a custom TabItem with a close button(denoted by X) on it so it can be closed easily. In this tab i want to put a Image or Border Item, that is centered with the close button in the top left corner

我有一个自定义TabItem,上面有一个关闭按钮(用X表示),因此可以轻松关闭。在此选项卡中,我想放置一个图像或边框项,它以左上角的关闭按钮为中心

The Control Template for this is

对此的控制模板是

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

(the control triggers have been removed) And to insert the Border/Image into that Tab Header i use the following

(控制触发器已被删除)并将边框/图像插入该选项卡标题我使用以下内容

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

Using this i get the following Result:

使用此我得到以下结果:

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

It Seems the Button is limiting the width of the Border element, so it does not reach its full width that i set (it is set to 50x50 so should be a square). I have tried to put them onto different Z levels but it doesnt seem have worked as i expected.

看起来Button正在限制Border元素的宽度,因此它没有达到我设置的全宽(设置为50x50,因此应该是正方形)。我试图把它们放到不同的Z级别,但它似乎没有像我预期的那样工作。

So the question is, how can i make the button overlay the border control without the button affecting the size of the border control?

所以问题是,如何使按钮覆盖边框控件而不会影响边框控件的大小?

1 个解决方案

#1

that behaviour is because of the DockPanel here:

这种行为是因为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>

remove the dock panel and adjust your properties as necessary and the problem will be fixed.

删除停靠面板并根据需要调整属性,问题将得到解决。

#1