WPF - Perché il mio tenore di pulsanti muovendo separatamente dal pulsante stesso?

Question

Ho creato un TabControl in un'applicazione WPF che sto scrivendo. I ri-templated TabItem modo da poter avere un pulsante su ogni intestazione scheda per chiuderla. Finora, tutto bene e buono.

ho deciso che ora volevo pulsanti rotondi lucidi invece di piazza di default cose brutte. Inoltre, ho voluto usare un'immagine come i bottoni di contenuti invece di impostare il contenuto di "X".

I miei stili XAML / templates:

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

Con il codice di cui sopra, tuttavia, un contenuto linguette selezionata (e lo sfondo pure) sembra spostarsi verso l'alto a causa di quello che presumo è il contenuto TabItems muoversi verso l'alto a causa di essa essendo scelto. Perché, allora, è l'ellisse non sta spostando con gli altri contenuti? Qualcuno ha idea di cosa sta succedendo qui?

Answer 1

Ci scusiamo per il ritardo nella risposta - ho finito per risolvere il problema modellando il mio modello TabItem dopo quello pubblicato in questo blogpost . Credo che il problema è emerso a causa del fatto che il mio modello TabItem veniva definito come un DataTemplate, non come un ControlTemplate come avrebbe dovuto essere. Ecco il nuovo modello:

<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

Ogni volta che ho controlli all'interno di un DockPanel, sembra sempre di giocare su se uno dei controlli che ho esplicitamente attaccato DockPanel.Dock alla viene dopo l'elemento che voglio prendere la parte di riempimento. Mentre io non so se questo sarà rispondere alla tua domanda, provate questo invece nella vostra ClosableTabItemTemplate DataTemplate:

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

  <ContentPresenter Grid.Column="0"/>

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