XAML 如何使用StackPanel动态调整ScrollViewer的大小？

k3bvogb1 于 2022-12-07 发布在其他

关注(0)|答案(2)|浏览(145)

作为参考，这是一个聊天应用程序。这应该给予你一些最终目标的想法。
另外，我对WPF还很陌生。这是我的第一个应用程序之一，我将其作为概念验证。在此之前，我一直在使用Windows窗体，因此任何对它的比较或参考都将帮助我更好地理解。
所以现在的问题是
我的聊天应用程序的聊天框是一个StackPanel（应该是这样吗？），它是用TextBlock元素编程填充的。**我需要找到一种方法，在可用空间用完时向下滚动这个StackPanel。**我还需要它自动滚动到底部（就像聊天一样;否则您将无法看到最近的消息）。
的问题：如何使用StackPanel动态调整ScrollViewer的大小？
此外，我还需要这个StackPanel来动态调整窗口的大小。这反过来会影响滚动条。
我目前的“解决方案”是使用ScrollViewer和嵌套的StackPanel。但是，ScrollViewer和StackPanel不能随着窗口大小的变化而正确调整大小，如屏幕截图#2所示。XAML代码和设计器的屏幕截图如下所示。

<Window x:Name="Main" x:Class="dprCxUiDemoWpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:dprCxUiDemoWpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Background="#FF171717">
        <TextBox x:Name="ChatBox" TextWrapping="Wrap" Background="#FF4F4F4F" Foreground="White" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" RenderTransformOrigin="-0.118,12.093" Margin="146,0,0,1" VerticalAlignment="Bottom" Height="46" BorderBrush="#FFFF00F3" KeyDown="ChatBox_KeyDown"/>
        <Image x:Name="DprLogo" Source="/dprCxUiDemoWpf;component/Images/logo1.png" HorizontalAlignment="Left" Height="60" Margin="10,0,0,10" VerticalAlignment="Bottom" Width="123"/>
        <ScrollViewer  Background="Red" Height="Auto" Width="Auto" ScrollViewer.CanContentScroll="True" Margin="146,0,0,0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" VerticalAlignment="Top" MinHeight="372">
            <StackPanel x:Name="ChatPanel" Height="Auto" Width="Auto" Background="DimGray" ScrollViewer.CanContentScroll="True" />
        </ScrollViewer>
    </Grid>
</Window>

（来源：gcurtiss.dev）
关于第一个屏幕截图，请注意以下事项：A.黑色列（包含徽标）只是窗口的背景色;那里什么也没有。
B.灰色部分为ChatBox（StackPanel）
C.下面的粉红色突出显示框是输入消息的文本框。
我感谢并接受任何帮助！

xaml

来源：https://stackoverflow.com/questions/66168614/how-can-i-make-a-scrollviewer-properly-size-dynamically-with-a-stackpanel

2条答案

按热度按时间

pkwftd7m1#

您必须正确使用Grid面板。您可以定义列和栏来配置其子系。Grid是以栏/列为基础的配置容器。然后设定列和栏定义，以控制储存格及其内容的调整大小行为。
使用绝对定位和大小当然会阻止控件响应其父控件的大小更改。大多数控件会拉伸以适应可用空间。但这需要将维度属性设置为Auto。
你说你是一个“更多的动手学习者”，但你仍然应该阅读一些文档。否则你会大大减缓你的进步，直到停滞不前。
有大量的博客在等着你去阅读。在黑暗中四处乱翻会让你一事无成。你至少需要知道一些基本知识。而不是等待13个多小时的复制和粘贴准备好的答案，你可以已经完成了多个教程，并解决自己的问题。成功是一种很好的感觉。这是一个非常微不足道的问题。
给自己找一个好的教程，你觉得容易理解，并开始实验网格后，阅读它。
根据您发布的代码，您显然对该面板的工作原理以及如何使用它来对齐控件一无所知。

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <ScrollViewer Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
    <StackPanel />
  </ScrollViewer>

  <Image Grid.Row="1" Grid.Column="0"
         Height="60" 
         Width="123 />
  <TextBox Grid.Row="1" Grid.Column="1" />
</Grid>

赞(0）回复(0）举报 2022-12-07

lstz6jyr2#

我需要找到一种方法来向下滚动这个StackPanel一旦可用空间用完。我还需要它自动滚动到底部（就像聊天会;否则您将无法看到最新的邮件）
你应该先阅读数据绑定和MVVM。通常你在你的VM上保存一个ObservableCollection项目，并将它们绑定到你的视图上的一个ListBox。
然后，每次向收藏中添加新项时，您都可以向下滚动ListBox：

private void ScrollRecordsListToBottom()
{
    if (RecordsList.Items.Count == 0)
        return;

    var lastItem = RecordsList.Items[RecordsList.Items.Count - 1];
    RecordsList.ScrollIntoView(lastItem);
}

赞(0）回复(0）举报 2022-12-07

我来回答

XAML 如何使用StackPanel动态调整ScrollViewer的大小？

2条答案

相关问题

热门标签

最新问答