UWP 文本框调整大小问题与长文本
[英]UWP TextBox resize issue with a long text
问题描述
我开发了一个聊天应用程序，但 Chat TextBox有问题。 当我尝试将以下文本粘贴到该TextBox时，它会调整大小而不是将其包装在给定的空间中。 您可以在下面的图片中看到，甚至聊天气泡都从屏幕上消失了。 任何帮助将不胜感激。
粘贴的文字：
这是初始用户界面：
这是粘贴文本后的 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>
2 个解决方案
解决方案1
1 2021-05-06 07:48:55
普通聊天window动态显示如下：
当输入框的高度增加时，旧消息将从可见区域消失，但最后一条消息必须始终可见。 当输入框达到高度限制时，最后一条消息仍然可见。
在您的场景中，有一个 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事件中控制滚动 position。
例如：
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>
解决方案2
0 已采纳 2021-05-07 07:07:48
我通过以编程方式设置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)
{
}
}
UWP文本框带有省略号，用于在未聚焦时显示长文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.