UWP TextBox 用长文本调整大小问题答案

【问题标题】：UWP TextBox resize issue with a long textUWP TextBox 用长文本调整大小问题
【发布时间】：2021-07-27 19:48:11
【问题描述】：

我开发了一个聊天应用程序，但遇到了聊天 TextBox 的问题。当我尝试将以下文本粘贴到 TextBox 时，它会调整大小而不是将其包装在给定的空间中。您可以在下面的图片中看到，甚至聊天气泡都从屏幕上消失了。任何帮助将不胜感激。

粘贴的文字：

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss P>

这是初始用户界面：

这是粘贴文本后的 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>

【问题讨论】：

标签： uwp win-universal-app winrt-xaml uwp-xaml windows-10-universal

【解决方案1】：

普通聊天窗口动态显示如下：

当输入框的高度增加时，旧消息将从可见区域消失，但最后一条消息必须始终可见。当输入框达到高度限制时，最后一条消息仍然可见。

在您的场景中，有一个 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);

根据你的情况计算偏移量，然后在你的TextBox的TextChanged事件中使用ScrollViewer.ScrollToVerticalOffset(Double)方法控制滚动位置。

例如：

 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 应该在其定义的范围内，并且粘贴的文本应该重新调整自身以适应 TextBox。我在问我添加的 TextBox 有什么问题？为什么粘贴文本时会调整大小？
原因是位于Grid.Row="2" 中的grid 的MaxHeight property 设置为125。此网格包含您的文本框和发送按钮。当你粘贴的文字超过文本框的高度时，网格高度会自动增长，直到达到125。直接的方法是设置MaxHeight等于文本框的起始高度。
我之前的解决方案是在不改变MaxHeight的情况下调整可见区域，这样聊天消息就不会被覆盖了。这是两种不同的解决方案，如果您不想要第一种，可以直接更改该网格的MaxHeight 属性。
我将 125 设置为 TextBox 和 Grid 的 MaxHeight property。还是没有变化。还尝试在 TextBox 中将 Height property 设置为 125。但问题依然存在。
可能你误解了我的意思，我已经更新了答案，你可以试试第二种方案。

【解决方案2】：

我通过以编程方式设置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)
        {
        }
    }

【讨论】：