如何解决带有长文本的 UWP TextBox 调整大小问题
我开发了一款聊天应用，但在使用 Chat TextBox 时遇到了问题。当我尝试将以下文本粘贴到 TextBox 时，它会调整大小而不是将其包装在给定的空间中。您可以在下面的图片中看到，甚至聊天气泡都从屏幕中消失了。任何帮助将不胜感激。
粘贴的文本：
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
这是初始用户界面：
这是粘贴文本后的用户界面：
以下是用户界面上的 XAML：
<Grid
Grid.Column="1"
Margin="0,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"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Background="{StaticResource WhiteBackgroundThemeBrush}"
BorderThickness="0,3,3"
ItemContainerStyle="{StaticResource MessengerListViewItemStyle}"
ItemsSource="{Binding Chats}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<!-- Left Bubble -->
<Grid Visibility="{Binding SenderId,Converter={StaticResource UserIdToLeftChatBubbleVisibilityConverter}}">
<Grid.ColumnDeFinitions>
<ColumnDeFinition Width="1.5*" />
<ColumnDeFinition Width="*" />
</Grid.ColumnDeFinitions>
<Grid Margin="0,30,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,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,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,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,Converter={StaticResource GetDateTimeWithSecondsAsGlobalFormatConverter}}"
TextTrimming="CharacterEllipsis"
textwrapping="Nowrap" />
</Grid>
</Grid>
<!-- Right Bubble -->
<Grid Visibility="{Binding SenderId,Converter={StaticResource UserIdToRightChatBubbleVisibilityConverter}}">
<Grid.ColumnDeFinitions>
<ColumnDeFinition Width="*" />
<ColumnDeFinition Width="1.5*" />
</Grid.ColumnDeFinitions>
<Grid Grid.Column="1" Margin="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"
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,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">
<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,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,-12,-16">
<StackPanel Background="Transparent" Orientation="Horizontal">
<Button
Name="1"
MinWidth="50"
Margin="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"
HorizontalAlignment="Center"
Fill="Black"
Points="8,4 16,16,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,Converter={StaticResource GetDateTimeWithSecondsAsGlobalFormatConverter}}"
TextTrimming="CharacterEllipsis"
textwrapping="Nowrap" />
<TextBlock
Grid.Row="3"
Grid.Column="0"
HorizontalAlignment="Right"
CharacterSpacing="20"
Style="{StaticResource BodyTextBlockBPStyleGraySmall}"
Text="{Binding PendingStatus,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"
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>
解决方法
常用聊天窗口动态显示如下：
当输入框的高度增加时，旧的消息会从可见区域消失，但最后一条消息必须始终可见。当输入框达到高度限制时，最后一条消息仍然可见。
在您的场景中，有一个用于显示聊天的 ListView，其中包含一个内置的 ScrollViewer。因此，当输入框的高度开始增加时，您可以使 ScrollViewer 滑动到底部。请参考以下步骤。
-
使用 Visual Tree 查找内置的 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; }
用法：
var sv = FindChild<ScrollViewer>(MyListView);
- 根据您的情况计算偏移量，然后使用 ScrollViewer.ScrollToVerticalOffset(Double) 方法控制 TextBox 的
TextChanged事件中的滚动位置。
例如：
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
}
}
更新（第二种解决方案）：
关于文本框的起始高度，请点击文本框，在属性窗口中找到它的起始高度。如下：
然后你可以找到下面的网格，并将其 MaxHeight 属性设置为等于文本框的起始高度（我的例子是 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>
我通过以编程方式设置 TextBox 的宽度找到了答案。因此，当应用程序调整大小时，TextBox 也会调整大小，现在您可以粘贴大文本并且它不会从其实际/假设边界凸出。
谢谢@Arya Ding - MSFT 的支持。你激励我找到这个答案。希望这是一个很好的解决方案。
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)
{
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
