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

这篇具有很好参考价值的文章主要介绍了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

代码如下:

 private async Task ShowDatabaseSettingsAsync() {
     Application.Current!.TryFindResource("My.Strings.DatabaseInfo", out object resource1);
     var dialog = new ContentDialog() {
         Title = resource1,
         PrimaryButtonText = "OK"
     };

     dialog.Content = new DatabaseSettingsView();
     await ContentDialogShowAsync(dialog);
 }
  1. TryFindResource 获取语言资源文件中的显示字段配置
  2. ContentDialogFluentAvalonia 的弹窗
  3. Title 配置窗体的标题
  4. PrimaryButtonText 设置窗体操作栏的按钮显示名称
  5. dialog.Content 设置窗体中显示的界面的数据源
  6. ContentDialogShowAsync 调用弹窗显示

ContentDialogShowAsync

ContentDialogShowAsync 是显示弹框的方法

代码如下:

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

4.实现API接口设置

API接口设置效果如下:

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

1.axaml设置弹窗

MainWindow.axaml 中设置 DialogHost

代码如下:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:TerraMours.Chat.Ava.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="TerraMours.Chat.Ava.Views.MainWindow"
		x:DataType="vm:MainWindowViewModel"
		xmlns:dialogHost="clr-namespace:DialogHostAvalonia;assembly=DialogHost.Avalonia"
		RenderOptions.BitmapInterpolationMode="HighQuality"
		xmlns:sty="using:FluentAvalonia.Styling"
		xmlns:ui="using:FluentAvalonia.UI.Controls"
		xmlns:local="using:TerraMours.Chat.Ava.Views"
        Icon="/Assets/terramours.ico"
        Title="TerraMours.Chat.Ava">
	<dialogHost:DialogHost IsOpen="{Binding	ApiSettingIsOpened}"
						   DialogMargin="16"
							DisableOpeningAnimation="True"
						   dialogHost:DialogHostStyle.CornerRadius="8"
						   Background="rgb(52, 53, 65)">
		<dialogHost:DialogHost.DialogContent>
			<local:ApiSettingsView />
		</dialogHost:DialogHost.DialogContent>

		<Panel>
			<local:MainView />
		</Panel>

	</dialogHost:DialogHost>

</Window>

通过 IsOpen 来控制 弹窗的显示

通过 DialogContent 设置弹窗的界面

5.实现通用的对话框提示

通过 FluentAvalonia+DialogHost.Avalonia 可以直接在代码里调用显示弹框,而不用新建一个界面。节省开发时间和维护成本

大面积运用于结果提示和操作确定的对话框中。

示例代码:

代码如下:

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

6.FluentAvalonia 的样式设置

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

代码如下:

<Application.Resources>
	<!--弹框下层背景-->
	<Color x:Key="ContentDialogBackground">rgb(42, 43, 55)</Color>
	<!--弹框上层背景-->
	<Color x:Key="ContentDialogTopOverlay">rgb(62, 63, 75)</Color>
	<!--蒙版颜色-->
	<!--<Color x:Key="ContentDialogSmokeFill">rgb(155, 138, 255)</Color>-->
</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.toymoban.com/news/detail-597733.html

到了这里,关于Avalonia中用FluentAvalonia+DialogHost.Avalonia实现界面弹窗和对话框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中用echarts实现复合饼图,带关系连接线

    1.拿到产品原型图,需求中有这样一个图表 2.翻看echart的饼图示例,没有这种复合饼图,只有一个嵌套饼图 3. 于是网上查网友的文章,查到两篇类似的贴子,(52条消息) echarts模仿excel复合饼图(饼-饼)_相忘于江湖426543的博客-CSDN博客_echarts复核饼图 和 (52条消息) echarts实现复合

    2024年02月10日
    浏览(45)
  • Simulink中用模拟器件实现环路滤波器仿真二阶PLL

    1.模拟电路的输入和输出需要使用Simulink-PS Converter和PS-Simulink Converter 2.模拟电路中必须接入Solver Configuration 3.模拟电路输出电压信号需要Voltage Sensor 4.模拟电路输入电压信号需要Controlled Voltage Source 无源RC环路滤波器 有源比例积分环路滤波器 参考信号和VCO输出信号 鉴相器LPF输出

    2024年02月16日
    浏览(49)
  • 在SQL server中用sql语句实现数据库的备份以及还原

    本文给大家提供并讲解了在SQL server中用SQL语句实现数据库的备份已经还原 假设你已经有一个数据库Student 创建备份设备,其名称为bk_Student,保存文件为D: Student.bak,并对Student数据库进行完全备份,备份到备份设备bk_ Student中。  在Student数据库中,创建一张表temp并对Student数

    2024年02月03日
    浏览(58)
  • Vue 3 中用组合式函数和 Shared Worker 实现后台分片上传(带哈希计算)

    最近项目需求里有个文件上传功能,而客户需求里的文件基本上是比较大的,基本上得有 1 GiB 以上的大小,而上传大文件尤其是读大文件,可能会造成卡 UI 或者说点不动的问题。而用后台的 Worker 去实现是一个比较不错的解决办法。 Shared Worker 的好处是可以从几个浏览上下文

    2024年02月08日
    浏览(40)
  • 可视化大屏中用vue实现海康威视AR鹰眼画面(物联网项目—涉及硬件设备的连接)

    具体效果可参照海康公众号的演示视频https://mp.weixin.qq.com/s/K7C8BJGgwq3E1woXK7F6SQ 项目效果图: 能够在项目中播放鹰眼视频,其实前端的代码很少。 因为海康威视的AR鹰眼视频已经做成了一个集成控件,也就是一套完整的系统,相当于AR画面里面的东西都不需要重新写,只需要在

    2024年02月05日
    浏览(46)
  • qt 实现点击按钮显示弹窗,再次点击按钮或点击弹窗之外的区域,弹窗消失。

    LumenWidget 为主界面 setting_ 为弹窗界面 tbn_map_setting 为点击按钮 弹窗界面要先设置如下属性 第一步 主界面增加事件过滤器 第二步 将此事件过滤器加入到全部控件中 在主界面的构造函数加入以下代码 或 第三步 设置按钮点击槽函数,本文为 tbn_map_setting

    2024年02月11日
    浏览(49)
  • vue 弹窗实现方法

      Vue实现弹窗的方法有很多种,这里给出一个简单的示例: 1. 首先,在Vue项目中创建一个名为`Modal.vue`的组件文件: ```html template div class=\\\"modal-mask\\\" v-show=\\\"visible\\\" @click.self=\\\"close\\\" div class=\\\"modal-container\\\" div class=\\\"modal-header\\\" slot name=\\\"header\\\" 默认标题 /slot /div div class=\\\"modal-body\\\" sl

    2024年02月08日
    浏览(30)
  • Android 实现Loading弹窗

    总结下一个简单的需求,后续需要用到的时候可以直接用。 在我们网络请求,异步加载数据,等待函数回调,数据库的操作等耗时的过程中,这个时候,界面在等待返回数据来进行展示,此时加上一个loading弹窗会显得有好很多。 在一些情况下不加的话,会导致一些后果:

    2024年02月14日
    浏览(46)
  • uniapp 实现点击出现弹窗

    用uniapp实现一个弹出窗 1.需要引入uni-popup 弹出层 插件 网址如下:uni-popup 弹出层 - DCloud 插件市场  下载到HBuilder中 html部分:  js部分: css部分:

    2024年02月11日
    浏览(45)
  • vue 项目中点击弹窗后实现视频播放(包含关闭弹窗视频暂停)

    vue 项目使用 antd vue 的  Modal 弹窗 , 点击事件触发后,弹窗播放视频,播放视频使用 video 标签 补充: video 标签内可以添加 source 标签 Source标 签用于媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件

    2024年02月17日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包