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>

I can't reproduce it. I took your ControlTemplate and set fixed Colors instead of your StaticResources and omitted the TextBox template because you didn't provide it in your sample code. And it worked for me, the Edit TextBoxs Selection Length is as wide as the ComboBox is. So your problem should be caused by the TextBox's ComboBoxTextBox Template... — SvenG, Nov 25 '11 at 08:20
The template might be the reason, yes. Good thing I missed to post it! Thanks for testing. — Sayak Banerjee, Nov 25 '11 at 08:40
@SvenG: Issue resolved, if this was added as an answer, I'd mark it as solved! Thanks :) — Sayak Banerjee, Nov 25 '11 at 08:58

score 4 · Answer 1 · edited May 23 '17 at 12:30

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>

This works too, thanks! But I have completely removed the template for now. — Sayak Banerjee, Nov 26 '11 at 11:03

score 0 · Accepted Answer · answered Nov 25 '11 at 09:08

0

As stated above in the Comment section the issue was the ComboBoxTextBox Template.

answered Nov 25 '11 at 09:08

SvenG

5,155
2
27
36

Editable combo box selection text overflows

2 Answers2