WPF - ボタンコンテンツがボタン自体とは別に移動するのはなぜですか？

Question

私が書いているWPFアプリケーションでTabControlを作成しました。 TabItemを再テンプレートして、各タブヘッダーにボタンを閉じて閉じることができました。これまでのところ、すべてが順調です。

私は、デフォルトの四角い醜いものの代わりに光沢のある丸いボタンが欲しいと決めました。また、単純にコンテンツを「X」に設定するのではなく、画像をボタンコンテンツとして使用したいと思っていました。

私のXAMLスタイル/テンプレート：

<Style TargetType="{x:Type Button}" x:Key="EllipseButtonStyle"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate> 
       <Grid> 
        <Ellipse Fill="{TemplateBinding Background}" 
         Stroke="{TemplateBinding BorderBrush}" 
         StrokeThickness="{TemplateBinding BorderThickness}" 
         Width="{TemplateBinding Width}" 
         Height="{TemplateBinding Height}"/> 
        <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center" 
         Content="{TemplateBinding Button.Content}"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<DataTemplate x:Key="ClosableTabItemTemplate"> 
    <DockPanel MinWidth="120" Margin="0,0,0,0"> 
     <ContentPresenter 
      Content="{Binding Path=DisplayName}" 
      VerticalAlignment="Center" 
      HorizontalAlignment="Left"/> 
     <Button 
      Command="{Binding Path=UnSubscribeApplicationCommand}" 
      CommandParameter="{Binding Path=DisplayName}" 
      BorderBrush="Black" 
      BorderThickness="2" 
      VerticalContentAlignment="Center" 
      VerticalAlignment="Center" 
      HorizontalAlignment="Right" 
      DockPanel.Dock="Right" 
      Width="16" Height="16"> 
      <Image Source="closeicon.bmp" Height="8" Width="8" 
       VerticalAlignment="Center" HorizontalAlignment="Center"/> 
       <Button.Style> 
        <Style TargetType="{x:Type Button}" 
         BasedOn="{StaticResource EllipseButtonStyle}"> 
         <Setter Property="Background" 
          Value="{StaticResource CloseOffButtonBrush}"/> 
         <Style.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Background" Value="{StaticResource CloseOnButtonBrush}"/> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
       </Button.Style> 
      </Button> 
     </DockPanel> 
    </DataTemplate> 

代わりに上記のコードでは、しかし、選択したタブのコンテンツ（と同様の背景が）ので、私は前提とするもので上向きにシフトしているようだTabItemsコンテンツです選択されたために上に移動します。なぜ、楕円は他のコンテンツと一緒にシフトしていないのですか？誰でもここで何が起こっているか考えている？

Answer 1

- 私はに投稿されたものの後に私のTabItemテンプレートをモデル化することによって、問題を解決することになりましたthis blogpost。この問題は、TabItemテンプレートがControlTemplateとしてではなく、DataTemplateとして定義されていたために発生したと考えられます。新しいテンプレートは次のとおりです。

<ControlTemplate x:Key="ClosableTabItemTemplate" TargetType="TabItem"> 
    <Grid SnapsToDevicePixels="true"> 
     <Border x:Name="Bd" Background="{StaticResource TabItemUnselectedBrush}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" > 
      <DockPanel x:Name="ContentPanel"> 
       <Button Command="{Binding Path=UnSubscribeApplicationCommand}" BorderBrush="Black" HorizontalAlignment="Center" Margin="3,0,3,0" VerticalAlignment="Center" Width="16" Height="16" DockPanel.Dock="Right" ToolTip="Close Tab"> 
        <Button.Content> 
         <Image Source="pack://application:,,,/Resources/Close.png" Height="8" Width="8" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
        </Button.Content> 
        <Button.Style> 
         <Style TargetType="{x:Type Button}" BasedOn="{StaticResource EllipseButtonStyle}"> 
          <Setter Property="Background" Value="{StaticResource CloseOffButtonBrush}"/> 
          <Style.Triggers> 
           <Trigger Property="IsMouseOver" Value="True"> 
            <Setter Property="Background" Value="{StaticResource CloseOnButtonBrush}"/> 
           </Trigger> 
          </Style.Triggers> 
         </Style> 
        </Button.Style> 
       </Button> 
       <ContentPresenter x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{Binding Path=DisplayName}" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/> 
      </DockPanel> 
     </Border> 
    </Grid> 

    <!-- bunch of ControlTemplate triggers to style the TabItem background color/position --> 

</ControlTemplate> 

Answer 2

コントロールがDockPanelの中​​にあるときはいつも、明示的にDockPanel.Dockを添付したコントロールの1つが、フィル部分を占有したい要素の後に来ると、常に再生されるようです。これは、あなたの質問にお答えします場合、私は知りませんが、あなたのClosableTabItemTemplateのDataTemplateで代わりにこれを試してください：遅延応答のため申し訳ありません

<Grid> 
    <Grid.ColumnDefinitions> 
    <ColumnDefinition Width="*"/> 
    <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 

    <ContentPresenter Grid.Column="0"/> 

    <Button Grid.Column="1"/> 
</Grid>