UWP TextBox 调整长文本的大小问题
UWP TextBox resize issue with a long text
我开发了一个聊天应用程序，但遇到聊天问题 TextBox。当我尝试将以下文本粘贴到 TextBox 时，它会调整大小而不是将其包装在给定的 space 中。你可以在下面的图片中看到，甚至聊天气泡都从屏幕上消失了。任何帮助将不胜感激。
粘贴的文字：
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
这是初始Ui:
这是粘贴文字后的Ui：
以下是Ui上的XAML：
<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>
常用聊天window动态展示如下：
当输入框高度增加时，旧消息将从可见区域消失，但最后一条消息必须始终可见。当输入框达到高度限制时，最后一条消息仍然可见
在您的场景中，有一个用于显示聊天的ListView，其中包含一个built-in ScrollViewer。因此，当输入框的高度开始增加时，您可以使 ScrollViewer 滑动到底部。请参考以下步骤。
使用 Visual Tree 找到 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;
}
用法：
var sv = FindChild<ScrollViewer>(MyListView);
- 根据您的情况计算偏移量，然后使用ScrollViewer.ScrollToVerticalOffset(Double)方法控制您的文本框
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
}
}
更新（方案二）：
关于文本框的起始高度，请点击文本框并在属性window中找到它的起始高度。如下：
然后就可以找到下面的网格，将其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 也会调整大小，现在您可以粘贴大文本，它不会从其 real/suppose-to-be 边界凸出。
谢谢@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)
{
}
}
我开发了一个聊天应用程序，但遇到聊天问题 TextBox。当我尝试将以下文本粘贴到 TextBox 时，它会调整大小而不是将其包装在给定的 space 中。你可以在下面的图片中看到，甚至聊天气泡都从屏幕上消失了。任何帮助将不胜感激。
粘贴的文字：
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
这是初始Ui:
这是粘贴文字后的Ui：
以下是Ui上的XAML：
<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>
常用聊天window动态展示如下：
当输入框高度增加时，旧消息将从可见区域消失，但最后一条消息必须始终可见。当输入框达到高度限制时，最后一条消息仍然可见
在您的场景中，有一个用于显示聊天的ListView，其中包含一个built-in ScrollViewer。因此，当输入框的高度开始增加时，您可以使 ScrollViewer 滑动到底部。请参考以下步骤。
使用 Visual Tree 找到 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; }
用法：
var sv = FindChild<ScrollViewer>(MyListView);
- 根据您的情况计算偏移量，然后使用ScrollViewer.ScrollToVerticalOffset(Double)方法控制您的文本框
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
}
}
更新（方案二）：
关于文本框的起始高度，请点击文本框并在属性window中找到它的起始高度。如下：
然后就可以找到下面的网格，将其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 也会调整大小，现在您可以粘贴大文本，它不会从其 real/suppose-to-be 边界凸出。
谢谢@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)
{
}
}