Spacing added when switching control template dynamically

问题

I've implemented switching of TextBox with TextBlock on clicking. My goal was to show ... when the text becomes wider than the TextBox width I've followed this answer to come up with a solution. This is my current code:

<TextBox x:Name="TextBox" Height="24" Width="300" Cursor="Hand" BorderThickness="0"  Background="White"  VerticalAlignment="Center" Text="{Binding MyCustomText}">
<TextBox.Style>
    <Style TargetType="TextBox">
        <Setter Property="Background" Value="Yellow" />
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource Self}}" Value="false">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TextBox">
                            <TextBlock Height="24" Text="{TemplateBinding Text}" TextTrimming="CharacterEllipsis" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</TextBox.Style>

To my surprise, on clicking into TextBlock, there is a small jump. Take a look:

I am not applying any Padding or Margin. Why is the reason for this jumping?

UPDATE: Default TextBox control template extracted with code:

<?xml version="1.0" encoding="utf-16"?>
<ControlTemplate TargetType="TextBoxBase" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib">
  <Border BorderThickness="{TemplateBinding Border.BorderThickness}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Name="border" SnapsToDevicePixels="True">
    <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Name="PART_ContentHost" Focusable="False" />
  </Border>
  <ControlTemplate.Triggers>
    <Trigger Property="UIElement.IsEnabled">
      <Setter Property="UIElement.Opacity" TargetName="border">
        <Setter.Value>
          <s:Double>0.56</s:Double>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>False</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <Trigger Property="UIElement.IsMouseOver">
      <Setter Property="Border.BorderBrush" TargetName="border">
        <Setter.Value>
          <SolidColorBrush>#FF7EB4EA</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>True</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <Trigger Property="UIElement.IsKeyboardFocused">
      <Setter Property="Border.BorderBrush" TargetName="border">
        <Setter.Value>
          <SolidColorBrush>#FF569DE5</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>True</s:Boolean>
      </Trigger.Value>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

I removed the border completely and applied the style to every TextBox. The jumping persist

//merged dictionary 
    <ControlTemplate x:Key="CustomTextBox" TargetType="TextBoxBase" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib">
            <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Name="PART_ContentHost" Focusable="False" />
    // triggers
    </ControlTemplate>
    <Style TargetType="TextBox">
        <Setter Property="TextBox.Template" Value="{StaticResource CustomTextBox}"></Setter>
    </Style>

Update: Apparently Margin="2 0 0 0" on the TextBlock is the magic number.

来源：https://stackoverflow.com/questions/59636936/spacing-added-when-switching-control-template-dynamically

标签

wpf

textbox

textblock