TextBox to grow vertically instead of scroll horizontally

[Andrew]

When typing long messages in the conversation view, the text box awkwardly scrolls to the right. I want it to grow taller instead (to the extent possible) the way the Windows Phone Messaging app does. How can I make it do this?

[Todor]

Hello Andrew,

Thank you for your question.

You need to modify the text box template so that it supports TextWrapping. Here's the template you need:

<DataTemplate x:Key="TextBoxTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>

        <telerikPrimitivesPrimitives:RadPointerContentControl
            Grid.Column="1"
            TargetPoint="160, 300">
            <telerikPrimitivesPrimitives:RadPointerContentControl.PointerTemplate>
                <DataTemplate>
                    <Polygon
                        Width="12"
                        Height="24"
                        Points="0,0 12,0 12,12"
                        StrokeThickness="0"
                        RenderTransformOrigin="0.5, 0.5"/>
                </DataTemplate>
            </telerikPrimitivesPrimitives:RadPointerContentControl.PointerTemplate>

            <telerikPrimitives:RadTextBox
                x:Name="PART_TextBox"
                TextWrapping="Wrap"
                ActionButtonVisibility="Visible"
                Margin="0, 0, -12, 0">
                <telerikPrimitives:RadTextBox.ActionButtonStyle>
                    <Style TargetType="telerikPrimitives:RadImageButton">
                        <Setter
                            Property="ButtonType"
                            Value="Custom"/>
                        <Setter
                            Property="RestStateImageSource"
                            Value="/Telerik.Windows.Controls.Data;component/ConversationView/Images/SendIcon.png"/>
                    </Style>
                </telerikPrimitives:RadTextBox.ActionButtonStyle>
            </telerikPrimitives:RadTextBox>
        </telerikPrimitivesPrimitives:RadPointerContentControl>
    </Grid>
</DataTemplate>

The TextWrapping is highlighted, it is not part of the default template, but you will need it in order to prevent the text box from scrolling to the right. Here are the prefixes that are used:

xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikPrimitivesPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls.Primitives"

Now just make sure that your ConversationView uses the template that you've just added:

<telerikData:RadConversationView TextBoxTemplate="{StaticResource TextBoxTemplate}" />

Let us know if you need further assistance.
 
Regards,
Todor
Telerik