WPF 버튼으로 이미지를 오버레이합니다

StackOverflow https://stackoverflow.com/questions/1022176

문제

닫기 버튼 (x로 표시)이있는 사용자 정의 탭이있어 쉽게 닫을 수 있습니다. 이 탭에서는 이미지 또는 테두리 항목을 넣고 싶습니다. 왼쪽 상단에 닫기 버튼이 있습니다.

이를위한 제어 템플릿입니다

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

이것을 사용하여 다음과 같은 결과를 얻습니다.

Alt Text http://lloydsparkes.co.uk/files/closetab.png

버튼이 테두리 요소의 너비를 제한하는 것처럼 보이므로 설정 한 전체 너비에 도달하지 못합니다 (50x50으로 설정되므로 정사각형이어야합니다). 나는 그것들을 다른 Z 레벨에 넣으려고 노력했지만 예상대로 작동하지 않은 것 같습니다.

문제는 버튼이 테두리 제어의 크기에 영향을 미치지 않고 테두리 제어를 어떻게 오버레이 할 수 있습니까?

도움이 되었습니까?

해결책

그 행동은 여기에서 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>

도크 패널을 제거하고 필요에 따라 속성을 조정하면 문제가 해결됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top