uwpwin-universal-appwinrt-xamluwp-xamlwindows-10-universal
UWP TextBox resize issue with a long text
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:
This is the Ui after the pasted text:
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>
Solution
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)
{
}
}