WPF 聊天框控件

Question

目前我正在开发一个聊天客户端，并将我的客户端从 windows 表单（因为表单很糟糕）更改为 WPF。我不太确定可以使用哪个控件来实现聊天框。我可以带一个 TextBox，但是当它已满时，它不会显示完整的内容。我也尝试使用 ListBox 但是当我尝试添加项目时它们没有显示。我使用这段代码向其中添加内容：

internal void AddMessage(string message)
{
    listBox_messages.Items.Add(message);
    listBox_messages.Items.Refresh();
}

有人知道哪种控件最适合此目的吗？

感谢您的帮助！

编辑：我为此实现了一个 TextBox 并禁用了它。但是我通过这种方法附加的文本没有显示。我的 class:

using System.ComponentModel;
using System.Windows;

namespace Chat_Client
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        /// <summary>
        /// MainWindow constructor
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            textBox_messages.AppendText("Test" + "\n");
            textBox_messages.AppendText("Test" + "\n");
            textBox_messages.AppendText("Test" + "\n");

            Closing += OnWindowClosing;
        }

        private void OnWindowClosing(object sender, CancelEventArgs e)
        {
            Program.Shutdown();
        }

        private void button_connect_Click(object sender, RoutedEventArgs e)
        {
            if(Program.Connected)
            {
                Program.Disconnect();
            }
            else
            {
                Program.Connect();
            }            
        }

        private void button_sendMessage_Click(object sender, RoutedEventArgs e)
        {

        }

        internal void AddMessage(string message)
        {
            textBox_messages.AppendText(message + "\n");
        }
    }
}

显示了测试字符串，但没有显示通过 AddMessage 方法添加的文本。我可以验证是否调用了该方法，我只是在该方法中使用断点对其进行了检查。有人知道这是怎么发生的吗？

Answer 1

您可以在 Xaml 文件中使用 TextBox 并将 VerticalAlignment 设置为 Stretch。

<文本框x:Name="textbox" VerticalAlignment="Stretch">

Answer 2

*回应您的编辑：您从哪里调用 AddMessage()？我试过你的代码，只是调用了 AddMessage("foo");来自按钮点击事件并且工作正常。

对于聊天框，我会使用 TextBox 来编写聊天消息，并用 ScrollViewer 将其包装起来以便滚动。在 TextBox 上使用 AppendText() 写入消息后，您可以调用 ScrollToEnd() 滚动到 TextBox 的底部。

在XAML中：

<ScrollViewer x:Name="ScrollViewer" ScrollChanged="ScrollViewer_OnScrollChanged"> <TextBox x:Name="ChatBox"/> </ScrollViewer>

在后面的代码中：

    private void WriteToChat(string message)
    {
        ChatBox.AppendText(message);
        ChatBox.ScrollToEnd();
    }

    private bool _autoScroll = true;
    private void ScrollViewer_OnScrollChanged(object sender, ScrollChangedEventArgs e)
    {
        if (e.ExtentHeightChange == 0)
        {
            _autoScroll = ScrollViewer.VerticalOffset == ScrollViewer.ScrollableHeight;
        }

        if (_autoScroll && e.ExtentHeightChange != 0)
        {
            ScrollViewer.ScrollToVerticalOffset(ScrollViewer.ExtentHeight);
        }
    }

Answer 3

更新

如果程序 class 从 UI 线程以外的另一个线程中调用 AddMessage(string)，则必须使用 Dispatcher 才能更新 UI。

Application.Current.Dispatcher.BeginInvoke(new Action(() =>
{
    mainWindow.AddMessage(message);
}));

MVVM 是使用 WPF 的方法。

将您的消息添加到您的 ViewModel class (ChatViewModel.cs) 中的 ObservableCollection:

public class ChatViewModel
{
    public ObservableCollection<string> Messages { get; } = new ObservableCollection<string>();

    internal void AddMessage(string message)
    {
        Messages.Add(message);
    }
}

将此 ViewModel 设置为视图的 DataContext (ChatView.xaml)

public ChatView : UserControl
{
    public ChatView()
    {
        InitializeComponent();
        DataContext = new ChatViewModel();
    }
}

在 XAML-代码中将 ObservableCollection 绑定到 ItemsSource property of your ListBox:

<ListBox ItemsSource="{Binding Messages}") />

当您将消息添加到 Messages 集合时，它应该出现在 ListBox 中。这不是一个完整的示例，但它应该可以指导您朝着正确的方向前进。

WPF 聊天框控件

WPF Chatbox control

c#

wpf

textbox

chat

wpf-controls