使用C#开发ChatGPT聊天程序

举报
步步为营 发表于 2023/01/19 09:16:46 2023/01/19
【摘要】 最近chatGPT比较火,但大多是用PYTHON来开发,本文使用C#开发一款ChatGPT聊天程序

使用C#开发ChatGPT聊天程序

总体效果如下:

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

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

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

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

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

  1. 定义TextBox的ControlTemplate模板(节取重要部分)
<Style x:Key="TextBoxPromote" TargetType="{x:Type TextBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border
                            x:Name="border"
                            CornerRadius="6"
                            <DockPanel LastChildFill="True">
                        	<!--新增btn按钮,并绑定Click事件-->
                                <Button
                                    x:Name="btn"
                                    Grid.Column="1"
                                    Background="White"
                                    BorderThickness="0"
                                    Click="Button_Click"
                                    Content="&#xe8d5;"
                                    DockPanel.Dock="Right"
                                    FontFamily="./img/#iconfont" />

                                <ScrollViewer
                                    x:Name="PART_ContentHost"
                                    DockPanel.Dock="Left"
                                    Focusable="false"
                                    HorizontalScrollBarVisibility="Hidden"
                                    VerticalScrollBarVisibility="Hidden" />
                            </DockPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                           <!--新增DataTrigger,当Text属性部位为空时,不显示按钮,Hiddern表示不显示,但是用空格来代替按钮来保持布局,而Collapsed则是不显示且不保留空格-->
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="">
                                <Setter TargetName="btn" Property="Visibility" Value="Collapsed" />
                            </DataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
  1. 实现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控件模板、数据模板、容器样式选择器

  1. 定义选择器类

    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;
            }
        }
    }
    
  2. 在Windwo.Resources中定义数据模板

发送模板

<DataTemplate x:Key="chatSend">
    <StackPanel
        x:Name="SendMsg"
        Margin="0,12,20,0"
        HorizontalAlignment="Right"
        Orientation="Horizontal">
        <StackPanel Margin="0,0,10,0" Orientation="Vertical">
            <!--  消息内容  -->
            <Border
                MinWidth="50"
                MinHeight="30"
                MaxWidth="{Binding Path=ActualWidth,ElementName=borderWidth}"
                Background="#c8dd1f"
                BorderBrush="#ddd"
                BorderThickness="1"
                CornerRadius="8,0,8,8">
                <TextBox
                    MinWidth="30"
                    Margin="8"
                    VerticalAlignment="Center"
                    Background="Transparent"
                    BorderThickness="0"
                    FontSize="14"
                    IsReadOnly="True"
                    Text="{Binding Msg}"
                    TextWrapping="WrapWithOverflow" />
            </Border>
        </StackPanel>
        <!--  头像  -->
        <Border
            Width="35"
            Height="35"
            Margin="0,2,0,0"
            VerticalAlignment="Top"
            BorderThickness="0">
            <Border.Background>
                <ImageBrush ImageSource="/img/user.jpg" />
            </Border.Background>
        </Border>
    </StackPanel>
</DataTemplate>

接收模板

<DataTemplate x:Key="chatRes">
    <StackPanel
        x:Name="SendMsg"
        Margin="0,12,20,0"
        HorizontalAlignment="Right"
        Orientation="Horizontal">
        <!--  头像  -->
        <Border
                    Width="35"
                    Height="35"
                    Margin="0,2,0,0"
                    VerticalAlignment="Top"
                    BorderThickness="0">
                    <Border.Background>
                        <ImageBrush ImageSource="/img/图标ChatGPT.ico" />
                    </Border.Background>
                </Border>
        <StackPanel Margin="0,0,10,0" Orientation="Vertical">
            <!--  消息内容  -->
            <Border
                MinWidth="50"
                MinHeight="30"
                MaxWidth="{Binding Path=ActualWidth,ElementName=borderWidth}"
                Background="#c8dd1f"
                BorderBrush="#ddd"
                BorderThickness="1"
                CornerRadius="0,8,8,8">
                <TextBox
                    MinWidth="30"
                    Margin="8"
                    VerticalAlignment="Center"
                    Background="Transparent"
                    BorderThickness="0"
                    FontSize="14"
                    IsReadOnly="True"
                    MaxLength="25"
                    Text="{Binding Msg}"
                    TextWrapping="WrapWithOverflow" />
            </Border>
        </StackPanel>
    </StackPanel>
</DataTemplate>
  1. 因为发送消息和接受消息的对齐方式不同,一个是左一个是右,所以要定义下ListBox.ItemContainerStyle
<Style x:Key="listViewItemStyle" TargetType="{x:Type ListBoxItem}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border
                    Name="Bd"
                    Margin="1"
                    Padding="{TemplateBinding Padding}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    SnapsToDevicePixels="true">
                    <ContentPresenter
                        Margin="1"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <!--判断是否为发送,从而使用不同的对齐方式-->
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsSend}" Value="True">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </DataTrigger>
        <DataTrigger Binding="{Binding IsSend}" Value="False">
            <Setter Property="HorizontalContentAlignment" Value="Left" />
        </DataTrigger>
    </Style.Triggers>
</Style>
  1. 为了实现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);
    }
}
  1. XAML中设置
<!--  消息显示区  -->
<!--设置ScrollViewer.CanContentScroll="False"可以使得滚动条更加丝滑-->
<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>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。