0

I have a chat app developed and have an issue with the Chat TextBox. When I try to paste the following text to that TextBox it resizes instead of wrapping it in the given space. You can see in the below pictures that even the chat bubbles are going out of the screen. Any help would be highly appreciated.

The pasted text:

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

This is the initial Ui: enter image description here

This is the Ui after the pasted text: enter image description here

Following is the XAML on the Ui:

<Grid
                Grid.Column="1"
                Margin="0,20,20,20"
                Background="{StaticResource FgGray13}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Grid Background="{StaticResource WhiteBackgroundThemeBrush}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid
                        Grid.Column="0"
                        Width="50"
                        Height="50"
                        Margin="10"
                        Visibility="{Binding SelectedChat.SenderName, Mode=OneWay, Converter={StaticResource StringToVisibilityAltConverter}}">
                        <Ellipse Stroke="{StaticResource FgGray4}" StrokeThickness="1">
                            <Ellipse.Fill>
                                <ImageBrush ImageSource="{Binding SelectedChat.ProfilePicImage}" Stretch="Uniform" />
                            </Ellipse.Fill>
                        </Ellipse>
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="20"
                            FontStretch="SemiExpanded"
                            Foreground="{StaticResource RedTextColor}"
                            Style="{StaticResource BodyTextBlockBPStyleBlackSemiBold}"
                            Text="{Binding SelectedChat.ChatInitials}"
                            TextLineBounds="Tight"
                            TextTrimming="None"
                            TextWrapping="NoWrap" />
                    </Grid>
                    <TextBlock
                        Grid.Column="1"
                        VerticalAlignment="Center"
                        FontSize="18"
                        Style="{StaticResource BodyTextBlockBPStyleBlackSemiBold}"
                        Text="{Binding SelectedChat.SenderName}"
                        TextTrimming="CharacterEllipsis"
                        TextWrapping="NoWrap" />
                </Grid>

                <!--Chat window-->
                <ListView
                    x:Name="Chats"
                    Grid.Row="1"
                    Padding="10,0,20,0"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch"
                    Background="{StaticResource WhiteBackgroundThemeBrush}"
                    BorderThickness="0,3,0,3"
                    ItemContainerStyle="{StaticResource MessengerListViewItemStyle}"
                    ItemsSource="{Binding Chats}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <!--  Left Bubble  -->
                                <Grid Visibility="{Binding SenderId, Mode=OneWay, Converter={StaticResource UserIdToLeftChatBubbleVisibilityConverter}}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="1.5*" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>

                                    <Grid Margin="0,30,0,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>

                                        <Grid
                                            Grid.Row="1"
                                            Grid.Column="0"
                                            Width="30"
                                            Height="30"
                                            Margin="0,0,10,0"
                                            VerticalAlignment="Bottom">
                                            <Ellipse Stroke="{StaticResource FgGray4}" StrokeThickness="1">
                                                <Ellipse.Fill>
                                                    <ImageBrush ImageSource="{Binding ProfilePicImage}" Stretch="Uniform" />
                                                </Ellipse.Fill>
                                            </Ellipse>
                                            <TextBlock
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                FontSize="14"
                                                FontStretch="SemiExpanded"
                                                Foreground="{StaticResource FgGray4}"
                                                Style="{StaticResource BodyTextBlockBPStyleBlackSemiBold}"
                                                Text="{Binding ChatInitials}"
                                                TextLineBounds="Tight"
                                                TextTrimming="None"
                                                TextWrapping="NoWrap" />
                                        </Grid>

                                        <TextBlock
                                            Grid.Row="0"
                                            Grid.Column="1"
                                            Margin="0,0,0,3"
                                            FontSize="16"
                                            Style="{StaticResource BodyTextBlockBPStyleBlackSemiBold}"
                                            Text="{Binding SenderDisplayName}"
                                            TextTrimming="CharacterEllipsis"
                                            TextWrapping="NoWrap" />

                                        <Grid
                                            Grid.Row="1"
                                            Grid.Column="1"
                                            Padding="10"
                                            HorizontalAlignment="Left"
                                            Background="{StaticResource BgGreen}"
                                            CornerRadius="12,12,12,0">
                                            <TextBlock
                                                VerticalAlignment="Center"
                                                Style="{StaticResource BodyTextBlockBPStyle}"
                                                Text="{Binding ChatMessage}"
                                                TextTrimming="None"
                                                TextWrapping="Wrap" />
                                        </Grid>

                                        <TextBlock
                                            Grid.Row="2"
                                            Grid.Column="1"
                                            CharacterSpacing="20"
                                            Style="{StaticResource BodyTextBlockBPStyleGraySmall}"
                                            Text="{Binding CreatedDate, Mode=OneWay, Converter={StaticResource GetDateTimeWithSecondsAsGlobalFormatConverter}}"
                                            TextTrimming="CharacterEllipsis"
                                            TextWrapping="NoWrap" />
                                    </Grid>

                                </Grid>

                                <!--  Right Bubble  -->
                                <Grid Visibility="{Binding SenderId, Mode=OneWay, Converter={StaticResource UserIdToRightChatBubbleVisibilityConverter}}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="1.5*" />
                                    </Grid.ColumnDefinitions>

                                    <Grid Grid.Column="1" Margin="0,30,0,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>

                                        <Grid
                                            Grid.Row="1"
                                            Grid.Column="1"
                                            Width="30"
                                            Height="30"
                                            Margin="10,0,0,0"
                                            VerticalAlignment="Bottom">
                                            <Ellipse Stroke="{StaticResource FgGray4}" StrokeThickness="1">
                                                <Ellipse.Fill>
                                                    <ImageBrush ImageSource="{Binding ProfilePicImage}" Stretch="Uniform" />
                                                </Ellipse.Fill>
                                            </Ellipse>
                                            <TextBlock
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                FontSize="14"
                                                FontStretch="SemiExpanded"
                                                Foreground="{StaticResource FgGray4}"
                                                Style="{StaticResource BodyTextBlockBPStyleBlackSemiBold}"
                                                Text="{Binding ChatInitials}"
                                                TextLineBounds="Tight"
                                                TextTrimming="None"
                                                TextWrapping="NoWrap" />
                                        </Grid>

                                        <TextBlock
                                            Grid.Row="0"
                                            Grid.Column="0"
                                            Margin="0,0,0,3"
                                            HorizontalAlignment="Right"
                                            FontSize="16"
                                            Style="{StaticResource BodyTextBlockBPStyleBlackSemiBold}"
                                            Text="{Binding SenderDisplayName}"
                                            TextTrimming="CharacterEllipsis"
                                            TextWrapping="NoWrap" />

                                        <Grid
                                            Grid.Row="1"
                                            Grid.Column="0"
                                            Padding="10"
                                            HorizontalAlignment="Right"
                                            Background="Purple"
                                            CornerRadius="12,12,0,12">
                                            <TextBlock
                                                VerticalAlignment="Center"
                                                Foreground="{StaticResource WhiteTextColor}"
                                                Style="{StaticResource BodyTextBlockBPStyle}"
                                                Text="{Binding ChatMessage}"
                                                TextTrimming="None"
                                                TextWrapping="Wrap" />

                                            <Button
                                                Grid.Row="0"
                                                Margin="-15"
                                                Padding="0"
                                                HorizontalAlignment="Stretch"
                                                VerticalAlignment="Stretch"
                                                HorizontalContentAlignment="Stretch"
                                                VerticalContentAlignment="Stretch"
                                                Background="Transparent"
                                                BorderThickness="0"
                                                Foreground="Transparent"
                                                IsHitTestVisible="{Binding ChatStatus, Mode=OneWay, Converter={StaticResource ChatStatusToIsHitTestVisibleConverter}}"
                                                ScrollViewer.VerticalScrollBarVisibility="Disabled"
                                                Style="{StaticResource ParticipanStatusChangeButtonStyle}"
                                                Tag="{Binding}">
                                                <Button.Flyout>
                                                    <Flyout>
                                                        <Flyout.FlyoutPresenterStyle>
                                                            <Style TargetType="FlyoutPresenter">
                                                                <Setter Property="ScrollViewer.ZoomMode" Value="Enabled" />
                                                                <Setter Property="Background" Value="Transparent" />
                                                                <Setter Property="BorderThickness" Value="0" />
                                                            </Style>
                                                        </Flyout.FlyoutPresenterStyle>

                                                        <StackPanel Margin="-12,0,-12,-16">
                                                            <StackPanel Background="Transparent" Orientation="Horizontal">
                                                                <Button
                                                                    Name="1"
                                                                    MinWidth="50"
                                                                    Margin="0,0,1,0"
                                                                    Padding="10,5"
                                                                    Background="Black"
                                                                    Command="{Binding DeleteMessageCommand}"
                                                                    CommandParameter="{Binding}"
                                                                    Content="Delete"
                                                                    Foreground="White"
                                                                    Style="{StaticResource CommonButtonStyle}"
                                                                    Tag="{Binding}" />
                                                            </StackPanel>
                                                            <Polygon
                                                                Margin="-15,0,0,0"
                                                                HorizontalAlignment="Center"
                                                                Fill="Black"
                                                                Points="8,4 16,16, 0,16"
                                                                RenderTransformOrigin="0.5,0.5">
                                                                <Polygon.RenderTransform>
                                                                    <CompositeTransform ScaleY="-1" />
                                                                </Polygon.RenderTransform>
                                                            </Polygon>
                                                        </StackPanel>
                                                    </Flyout>
                                                </Button.Flyout>
                                            </Button>

                                        </Grid>

                                        <TextBlock
                                            Grid.Row="2"
                                            Grid.Column="0"
                                            HorizontalAlignment="Right"
                                            CharacterSpacing="20"
                                            Style="{StaticResource BodyTextBlockBPStyleGraySmall}"
                                            Text="{Binding CreatedDate, Mode=OneWay, Converter={StaticResource GetDateTimeWithSecondsAsGlobalFormatConverter}}"
                                            TextTrimming="CharacterEllipsis"
                                            TextWrapping="NoWrap" />

                                        <TextBlock
                                            Grid.Row="3"
                                            Grid.Column="0"
                                            HorizontalAlignment="Right"
                                            CharacterSpacing="20"
                                            Style="{StaticResource BodyTextBlockBPStyleGraySmall}"
                                            Text="{Binding PendingStatus, Mode=OneWay, Converter={StaticResource PendingStatusDisplayConverter}}"
                                            TextTrimming="CharacterEllipsis"
                                            TextWrapping="NoWrap" />
                                    </Grid>

                                </Grid>

                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <!--Chat typing grid-->
                <Grid
                    Grid.Row="2"
                    MaxHeight="125"
                    Background="{StaticResource WhiteBackgroundThemeBrush}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <TextBox
                        x:Name="TxbComment"
                        Grid.Column="0"
                        Padding="30,10,10,10"
                        HorizontalContentAlignment="Stretch"
                        AcceptsReturn="True"
                        BorderThickness="0"
                        MaxLength="15000"
                        PlaceholderText="Write your message..."
                        ScrollViewer.VerticalScrollBarVisibility="Auto"
                        SelectionHighlightColor="{ThemeResource BlueBackgroundThemeBrush}"
                        Style="{StaticResource WrappingPlaceholderTextBoxStyle}"
                        Text="{Binding Comment, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                        TextWrapping="Wrap" />

                    <Button
                        Grid.Column="1"
                        MinWidth="70"
                        MinHeight="50"
                        Margin="10,5"
                        Padding="10"
                        Background="Transparent"
                        Command="{Binding SendMessageCommand}"
                        Style="{StaticResource CommonButtonStyle}">
                        <Image
                            Width="40"
                            Source="/Assets/Images/CommentsPage/MessengerSendIcon.png"
                            Stretch="Uniform" />
                    </Button>
                </Grid>
            </Grid>

2 Answers 2

1

The common chat window is dynamically displayed as follows:

When the height of the input box increases, the old messages will disappear from the visible area, but the last message must always be visible. When the input box reaches the height limitation, the last message is still visible.

In your scenario, there is a ListView for displaying chat, which contains a built-in ScrollViewer. So you could make the ScrollViewer slide to the bottom when the height of inputbox starts to increase. Please refer to the following steps.

  1. Use Visual Tree to find the built-in ScrollViewer.

     public T FindChild<T>(DependencyObject parent)
         {
             for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
             {
                 var child = VisualTreeHelper.GetChild(parent, i);
                 if (child is T typedChild)
                 {                     
                      return typedChild;                   
                 }
                 var inner = FindChild<T>(child);
                 if (inner != null)
                 {
                     return inner;
                }
             }
             return default;
         }
    

Usage:

var sv = FindChild<ScrollViewer>(MyListView);
  1. Calcaulate the offset based on your situation, then use ScrollViewer.ScrollToVerticalOffset(Double) method to control the scroll position in TextChanged event of your TextBox.

For example:

 private void TxbComment_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (TxbComment.ActualHeight > InitialHeight)
            {
                var sv = FindChild<ScrollViewer>(MyListView);
                sv.ScrollToVerticalOffset(300);    //change the offset based on your situation          
            }
        }

Update(the second solution):

As for starting height of the textbox, please click the textbox and find its starting height in Properties window. As follows: enter image description here

Then you could find the following grid, and set its MaxHeight property equal to the starting height of the textbox (My example is 74).

            <!--Chat typing grid-->
            <Grid
                Grid.Row="2"
                MaxHeight="74"
                Background="{StaticResource WhiteBackgroundThemeBrush}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <TextBox
                    x:Name="TxbComment"
                    Grid.Column="0"
                    .. />

                <Button
                    Grid.Column="1"
                   ..>
                    <Image
                        Width="40"
                        .. />
                </Button>
            </Grid>
        
6
  • Hi, I don't think you understood my issue. When I paste a large text to the TextBox it increases its width which goes out of the page. The TextBox should've within its defined bounds and the pasted text should reshape itself to fit inside the TextBox. I'm asking what's wrong with the TextBox I added? why it resizes when pasting text? May 6, 2021 at 9:53
  • 1
    The reason is that the MaxHeight property of the grid that located in Grid.Row="2" is set to 125. This grid contains your textbox and send button. When the text you paste exceeds the height of the text box, the grid height will automatically grow until it reaches 125. The direct method is to set MaxHeight equal to the starting height of the text box.
    – dear_vv
    May 7, 2021 at 2:13
  • 1
    As for my previous solution, it adjusts the visible area without changing MaxHeight so that chat messages will not be covered. These are two different solutions, if you don't want the first, you could directly change the MaxHeight property of that grid.
    – dear_vv
    May 7, 2021 at 2:13
  • I set 125 as the MaxHeight property of the TextBox and the Grid. Still no change. Also tried setting the Height property to 125 in the TextBox as well. But issue still exists. May 7, 2021 at 4:26
  • 1
    Maybe you misunderstood my meaning, I have updated the answer, you could try the second solution.
    – dear_vv
    May 7, 2021 at 7:07
1

I found an answer by setting the width of the TextBox programmatically. So when the app is resized TextBox also gets resized and now you can paste the large text and it won't bulge from its real/suppose-to-be bounds. Thank you, @Arya Ding - MSFT for the support. You inspired me to find this answer. Hope this is a good solution.

private void ChatTypingGrid_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        try
        {
            int minSize = 300;
            var calc = (sender as Grid).ActualWidth;
            TxbComment.Width = (calc >= minSize) ? calc : minSize;
        }
        catch (Exception)
        {
        }
    }
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.