Combobox wrap text when typing

Question

Ok, I am completely stumped on this. I have a ComboBox in my WPF project that has IsEditable set to true. The user could select one of the options from the drop down or type in something to their likes.

If the user types or selects an option from the drop down, how do I make the text wrap?

Any pointers?

Many thanks

Dead.Rabit Dead.Rabit · Accepted Answer · 2011-11-08T13:46:51

the combobox uses a textbox to display content.. you can override it's template and simply add the "TextWrapping=Wrap" to the "PART_EditableTextbox" textbox:

<ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
    <Grid SnapsToDevicePixels="true">
        <Border x:Name="Bd"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Padding="1">
            <Grid Grid.IsSharedSizeScope="true">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="ComboBoxButton" />
                </Grid.ColumnDefinitions>
                <TextBox x:Name="PART_EditableTextBox"
                            Grid.Column="1"
                            Margin="{TemplateBinding Padding}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"
                            TextWrapping="Wrap"
                            Style="{StaticResource ComboBoxEditableTextBox}" />
                <ToggleButton Grid.ColumnSpan="3"
                                Background="{x:Null}"
                                IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                Style="{StaticResource ComboBoxTransparentButtonStyle}" />
            </Grid>
        </Border>
        <Popup x:Name="PART_Popup"
                AllowsTransparency="true"
                Focusable="false"
                IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
                Placement="Bottom"
                PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
            <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw"
                                                                MinWidth="{TemplateBinding ActualWidth}"
                                                                MaxHeight="{TemplateBinding MaxDropDownHeight}"
                                                                Color="Transparent">
                <Border x:Name="DropDownBorder"
                        Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
                        BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}"
                        BorderThickness="1">
                    <ScrollViewer x:Name="DropDownScrollViewer">
                        <Grid RenderOptions.ClearTypeHint="Enabled">
                            <Canvas Width="0"
                                    Height="0"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Top">
                                <Rectangle x:Name="OpaqueRect"
                                            Width="{Binding ActualWidth, ElementName=DropDownBorder}"
                                            Height="{Binding ActualHeight, ElementName=DropDownBorder}"
                                            Fill="{Binding Background, ElementName=DropDownBorder}" />
                            </Canvas>
                            <ItemsPresenter x:Name="ItemsPresenter"
                                            KeyboardNavigation.DirectionalNavigation="Contained"
                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Grid>
                    </ScrollViewer>
                </Border>
            </Microsoft_Windows_Themes:SystemDropShadowChrome>
        </Popup>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="HasItems" Value="false">
            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
            <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
        </Trigger>
        <Trigger Property="IsGrouping" Value="true">
            <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
        </Trigger>
        <Trigger SourceName="PART_Popup" Property="HasDropShadow" Value="true">
            <Setter TargetName="Shdw" Property="Margin" Value="0,0,5,5" />
            <Setter TargetName="Shdw" Property="Color" Value="#71000000" />
        </Trigger>
        <Trigger SourceName="DropDownScrollViewer" Property="ScrollViewer.CanContentScroll" Value="false">
            <Setter TargetName="OpaqueRect" Property="Canvas.Top" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}" />
            <Setter TargetName="OpaqueRect" Property="Canvas.Left" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Combobox wrap text when typing

1 Answers