0

簡単に閉じることができるように、閉じるボタン（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>

これを使用すると、次の結果が得られます。

代替テキスト http://lloydsparkes.co.uk/files/CloseTab.png

ボタンが Border 要素の幅を制限しているように見えるため、設定した幅全体に達していません (50x50 に設定されているため、正方形にする必要があります)。それらを異なる Z レベルに配置しようとしましたが、期待どおりに機能していないようです。

問題は、ボタンがボーダーコントロールのサイズに影響を与えずに、ボタンをボーダーコントロールにオーバーレイさせるにはどうすればよいですか?

4

1 に答える 1

3

その動作は、ここの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>

ドックパネルを取り外し、必要に応じてプロパティを調整すると、問題が修正されます。

于 2009-06-20T18:49:01.647 に答える