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

抱歉延迟响应 - 我最终通过在 this blogpost 中发布的模板之后建模我的 TabItem 模板来解决问题。我认为问题浮出水面是因为我的 TabItem 模板被定义为 DataTemplate，而不是应有的 ControlTemplate。这是新模板：

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