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을 첨부 한 컨트롤 중 하나가 채우기 부분을 차지하려는 요소 뒤에 오는 경우 항상 재생되는 것처럼 보입니다. 이 귀하의 질문에 대답한다면 내가 아는하지 않지만, 대신 ClosableTabItemTemplate의 DataTemplate이 시도 :

이 지연 응답

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

    <ContentPresenter Grid.Column="0"/> 

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