使用C#开发ChatGPT聊天程序

新闻 1970-01-01

433 0

总体效果如下：

源码下载

关键点1：无边框窗口拖动

Window中设置AllowsTransparency="True"、 Background="Transparent"以及WindowStyle="None"这样设置的话默认窗口的标题栏为不可见状态，且无法用鼠标拖动，使用windowChorme来解决

<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="50" UseAeroCaptionButtons="False" />
</WindowChrome.WindowChrome>

该设置的详细讲解参见WPF之Window无边框拖动、特殊形状、Grid拖拽

关键点2：输入栏实现删除按钮

定义TextBox的ControlTemplate模板（节取重要部分）

实现Button按钮事件

private void Button_Click(object sender, RoutedEventArgs e)
{
Button? btn = sender as Button;
if (btn != null)
{
var parent = VisualTreeHelper.GetParent(btn);
while (!(parent is TextBox))
{
parent = VisualTreeHelper.GetParent(parent);
}
TextBox txt = parent as TextBox;
if (txt != null)
{
txt.Clear();
}
}
}

关键点3：ListBox实现聊天效果

本文使用ListBox来完成消息框的展示，因为涉及到发送和收到两种类型的消息，应该对应两种不同格式，所以会用到样式选择器，不知道怎么用的小伙伴可以看一下这篇文章WPF控件模板、数据模板、容器样式选择器。

public class DateTemplateSelector:DataTemplateSelector
{
public DataTemplate SendTemplate { get; set; }
public DataTemplate ResTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
Message message = (Message)item;

if (message.IsSend)
{
return SendTemplate;
}
else
{
return ResTemplate;
}
}
}

在Windwo.Resources中定义数据模板

发送模板

接收模板

因为发送消息和接受消息的对齐方式不同，一个是左一个是右，所以要定义下ListBox.ItemContainerStyle

为了实现ListBox始终保持下拉到最后的状态，自定义类，重写OnItemsChanged方法

class ScrollingListBox : ListBox
{
protected override void OnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
if (e.NewItems == null) return;
var newItemCount = e.NewItems.Count;

if (newItemCount > 0)
this.ScrollIntoView(e.NewItems[newItemCount - 1]);

base.OnItemsChanged(e);
}
}

XAML中设置

<local:ScrollingListBox
Grid.Row="0"
BorderBrush="#D3D3D3"
BorderThickness="0,1,0,1"
ItemsSource="{Binding Path=Messages, ElementName=mainWindow}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.CanContentScroll="False"
SelectionMode="Extended">
<ListBox.ItemTemplateSelector>
<local:DateTemplateSelector ResTemplate="{StaticResource chatRes}" SendTemplate="{StaticResource chatSend}" />
</ListBox.ItemTemplateSelector>
<ListBox.ItemContainerStyle>
<Style BasedOn="{StaticResource listViewItemStyle}" TargetType="{x:Type ListBoxItem}" />
</ListBox.ItemContainerStyle>
</local:ScrollingListBox>

如何调用OpenAI的接口，及各种常用参数的设置参见C#/.Net开发chatGPT、openAI 源码下载

本文使用文章同步助手同步

ChatGPT编程