Editable combo box selection text overflows

Question

In my WPF application, I have an editable combo box with 150px fixed width. Although, if the item's length is more than the combo box length, the selection color overflows from the combo box area and overlaps over the toggle button as well as the controls towards its right.

Screenshot:

The controltemplate used is as follows:

<ControlTemplate TargetType="{x:Type ComboBox}">
    <Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="MouseOver" />
        <VisualState x:Name="Disabled">
            <Storyboard>
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
                                            Storyboard.TargetProperty="(TextElement.Foreground).
                (SolidColorBrush.Color)">
                <EasingColorKeyFrame KeyTime="0"
                                    Value="{StaticResource DisabledForegroundColor}" />
            </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        </VisualStateGroup>
        <VisualStateGroup x:Name="EditStates">
        <VisualState x:Name="Editable">
            <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                            Storyboard.TargetName="PART_EditableTextBox">
                <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{x:Static Visibility.Visible}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Visibility)"
                                            Storyboard.TargetName="ContentSite">
                <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{x:Static Visibility.Hidden}" />
            </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Uneditable" />
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <ToggleButton x:Name="ToggleButton"
                    Template="{StaticResource ComboBoxToggleButton}"
                    Grid.Column="2"
                    Focusable="false"
                    ClickMode="Press"
                    IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, 
        RelativeSource={RelativeSource TemplatedParent}}"/>
    <ContentPresenter x:Name="ContentSite"
                        IsHitTestVisible="False"
                        Content="{TemplateBinding SelectionBoxItem}"
                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                        Margin="3,3,23,3"
                        VerticalAlignment="Stretch"
                        HorizontalAlignment="Left">
    </ContentPresenter>
    <TextBox x:Name="PART_EditableTextBox"
                Style="{x:Null}"
                Template="{StaticResource ComboBoxTextBox}"
                HorizontalAlignment="Left"
                VerticalAlignment="Bottom"
                Margin="3,3,23,3"
                Focusable="True"
                Background="Transparent"
                Visibility="Hidden"
                IsReadOnly="{TemplateBinding IsReadOnly}" />
    <Popup x:Name="Popup"
            Placement="Bottom"
            IsOpen="{TemplateBinding IsDropDownOpen}"
            AllowsTransparency="True"
            Focusable="False"
            PopupAnimation="Slide">
        <Grid x:Name="DropDown"
            SnapsToDevicePixels="True"
            MinWidth="{TemplateBinding ActualWidth}"
            MaxHeight="{TemplateBinding MaxDropDownHeight}">
        <Border x:Name="DropDownBorder"
                BorderThickness="1">
            <Border.BorderBrush>
            <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
            </Border.BorderBrush>
            <Border.Background>
            <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
            </Border.Background>
        </Border>
        <ScrollViewer Margin="4,6,4,6"
                        SnapsToDevicePixels="True">
            <StackPanel IsItemsHost="True"
                        KeyboardNavigation.DirectionalNavigation="Contained" />
        </ScrollViewer>
        </Grid>
    </Popup>
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger Property="HasItems"
                Value="false">
        <Setter TargetName="DropDownBorder"
                Property="MinHeight"
                Value="95" />
    </Trigger>
    <Trigger Property="IsGrouping"
                Value="true">
        <Setter Property="ScrollViewer.CanContentScroll"
                Value="false" />
    </Trigger>
    <Trigger SourceName="Popup"
                Property="AllowsTransparency"
                Value="true">
        <Setter TargetName="DropDownBorder"
                Property="CornerRadius"
                Value="4" />
        <Setter TargetName="DropDownBorder"
                Property="Margin"
                Value="0,2,0,0" />
    </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Any idea what is happening and how can it be fixed?

EDIT The textbox template:

<ControlTemplate x:Key="ComboBoxTextBox"
                 TargetType="{x:Type TextBox}">
    <Border x:Name="PART_ContentHost"
            Focusable="False"
            Background="{TemplateBinding Background}" />
</ControlTemplate>

Answer 1

I just answered a similar question ...

The reason is you are overwritting the default ControlTemplate for the TextBox as something that doesn't implement scrolling automatically, so your Text is simply continuing outside the bounds it is given.

Change your TextBox.ControlTemplate to something like a ScrollViewer instead of a Border and it will work correctly.

<ControlTemplate x:Key="ComboBoxTextBox"
                 TargetType="{x:Type TextBox}">
    <ScrollViewer x:Name="PART_ContentHost"
                  Focusable="False"
                  Background="{TemplateBinding Background}" />
</ControlTemplate>

Answer 2

如上面“注释”部分所述，问题是ComboBoxTextBox模板。