Avalonia中用FluentAvalonia+DialogHost.Avalonia实现界面弹窗和对话框

盤古

Avalonia中用FluentAvalonia+DialogHost.Avalonia实现界面弹窗和对话框

本文是项目中关于 弹窗界面 设计的技术分享，通过 FluentAvalonia+DialogHost.Avalonia 开源nuget包来实现项目中需要 弹框显示的界面 和所有的 对话框 的展示。
效果如下：

1.项目介绍

本项目是基于Avalonia的GPT的AI会话项目。采用的是最新稳定版本11.0.0-rc1.1。希望通过该项目了解和学习Avalonia开发的朋友可以在我的github上拉取代码，同时希望大家多多点点star。
https://github.com/raokun/TerraMours.Chat.Ava
V1.0版本

下载地址：V1.0版本win64下载地址
目前可用的第一个版本
功能：

• 最全的接口参数配置
  
• 支持反向代理
  
• 支持聊天记录的数据本地化存储
  
• 支持填写SystemMessage
  

2.扩展包介绍

1.DialogHost.Avalonia

这是一个用于Avalonia的弹框的扩展，可以通过使用 DialogHost.Avalonia ，把我们的界面或者对话框内容显示在最顶层，同时可以设置弹框后其他界面不能点击，避免用户误操作。
DialogHost.Avalonia 开源代码地址：DialogHost.Avalonia
2.FluentAvalonia

FluentAvalonia 提供多种UI 的Avalonia 的工具包，本文中我们只用到 ContentDialog 实现对话框式的设置界面。
FluentAvalonia 开源代码地址：FluentAvalonia
FluentAvalonia 文档地址：FluentAvaloniaDocs
3.实现数据库设置

数据库设置的界面效果：

1.创建数据库设置界面

创建数据库设置界面 DatabaseSettingsView.axaml

2.代码调用-弹窗

ShowDatabaseSettingsAsync

ShowDatabaseSettingsAsync 是弹窗方法，弹窗的内容是DatabaseSettingsView

代码如下：

1. private async Task ShowDatabaseSettingsAsync() {
2.      Application.Current!.TryFindResource("My.Strings.DatabaseInfo", out object resource1);
3.      var dialog = new ContentDialog() {
4.          Title = resource1,
5.          PrimaryButtonText = "OK"
6.      };
8.      dialog.Content = new DatabaseSettingsView();
9.      await ContentDialogShowAsync(dialog);
10. }

复制代码

• TryFindResource 获取语言资源文件中的显示字段配置
  
• ContentDialog 是 FluentAvalonia  的弹窗
  
• Title 配置窗体的标题
  
• PrimaryButtonText 设置窗体操作栏的按钮显示名称
  
• dialog.Content 设置窗体中显示的界面的数据源
  
• ContentDialogShowAsync 调用弹窗显示
  

ContentDialogShowAsync

ContentDialogShowAsync 是显示弹框的方法

代码如下：

1. public async Task<ContentDialogResult> ContentDialogShowAsync(ContentDialog dialog) {
2.     var dialogResult = await dialog.ShowAsync();
3.     return dialogResult;
4. }

复制代码

4.实现API接口设置

API接口设置效果如下：

API接口设置 是弹窗的另一种实现，通过axaml中设置。内容不使用 ContentDialog
1.axaml设置弹窗

在MainWindow.axaml 中设置 DialogHost

代码如下：

1. <Window xmlns="https://github.com/avaloniaui"
2.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3.         xmlns:vm="using:TerraMours.Chat.Ava.ViewModels"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
7.         x:
8.                 x:DataType="vm:MainWindowViewModel"
9.                 xmlns:dialogHost="clr-namespace:DialogHostAvalonia;assembly=DialogHost.Avalonia"
10.                 RenderOptions.BitmapInterpolationMode="HighQuality"
11.                 xmlns:sty="using:FluentAvalonia.Styling"
12.                 xmlns:ui="using:FluentAvalonia.UI.Controls"
13.                 xmlns:local="using:TerraMours.Chat.Ava.Views"
14.         Icon="/Assets/terramours.ico"
15.         Title="TerraMours.Chat.Ava">
16.         <dialogHost:DialogHost IsOpen="{Binding        ApiSettingIsOpened}"
17.                                                    DialogMargin="16"
18.                                                         DisableOpeningAnimation="True"
19.                                                    dialogHost:DialogHostStyle.CornerRadius="8"
20.                                                    Background="rgb(52, 53, 65)">
21.                 <dialogHost:DialogHost.DialogContent>
22.                         <local:ApiSettingsView />
23.                 </dialogHost:DialogHost.DialogContent>
25.                 <Panel>
26.                         <local:MainView />
27.                 </Panel>
29.         </dialogHost:DialogHost>
31. </Window>

复制代码

通过 IsOpen 来控制 弹窗的显示
通过 DialogContent 设置弹窗的界面
5.实现通用的对话框提示

通过 FluentAvalonia+DialogHost.Avalonia  可以直接在代码里调用显示弹框，而不用新建一个界面。节省开发时间和维护成本。
大面积运用于结果提示和操作确定的对话框中。
示例代码：

代码如下：

1. var dialog = new ContentDialog()
2. {
3.     Title = $"接口调用失败，报错内容: {response.Error.Message}",
4.     PrimaryButtonText = "Ok"
5. };
6. await VMLocator.MainViewModel.ContentDialogShowAsync(dialog);

复制代码

6.FluentAvalonia  的样式设置

通过在 App.axaml 中添加样式资源可以控制对话框的背景色，以下的设置，是 FluentAvalonia  的文档里没有写的。我还是拉下来 FluentAvalonia  的源码查到的怎么修改对话框颜色。

代码如下：

1. <Application.Resources>
2.        
3.         <Color x:Key="ContentDialogBackground">rgb(42, 43, 55)</Color>
4.        
5.         <Color x:Key="ContentDialogTopOverlay">rgb(62, 63, 75)</Color>
6.        
7.        
8. </Application.Resources>

复制代码

7.技术总结记录

通过 FluentAvalonia+DialogHost.Avalonia 开源nuget包来实现项目中需要 弹框显示的界面和所有的对话框的展示。节省开发时间和维护成本。关于FluentAvalonia有更多的UI的扩展，值得花时间去学一学。现在网上的关于Avalonia的资料太少了。
更多项目技术总结记录在我的博客中：
1.基于Avalonia 11.0.0+ReactiveUI 的跨平台项目开发1-通用框架
2.基于Avalonia 11.0.0+ReactiveUI 的跨平台项目开发2-功能开发
3.Avalonia项目打包安装包
4.Avalonia中用FluentAvalonia+DialogHost.Avalonia实现界面弹窗和对话框
阅读如遇样式问题，请前往个人博客浏览： https://www.raokun.top
拥抱ChatGPT：https://ai.terramours.site
开源项目地址：https://github.com/raokun/TerraMours.Chat.Ava

来源:https://www.cnblogs.com/raok/archive/2023/07/23/17575878.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！