IT评测·应用市场-qidao123.com技术社区

标题: Avalonia开发Markdown编辑器 [打印本页]
作者: 光之使者    时间: 2023-6-30 02:23
标题: Avalonia开发Markdown编辑器
Avalonia开发Markdown编辑器

今天熟悉Avalonia UI，做一个Markdown的文本编辑器。
代码我上传了Github，地址：
https://github.com/raokun/AvaloniaMarkdown.git
1.创建Avalonia MVVM项目

我使用开发工具的是visual studio 2022 preview ，上一篇博客已经写过了SDK的安装和基础项目的创建，需要了解的可以跳转查看：
创建Avalonia 模板项目-基础

2.添加用于Markdown渲染的nuget包

由于Avalonia UI 本身不带Markdown的展示，我们使用nuget包 Markdown.Avalonia
在csproj中添加包
  1. [/code][img]https://www.raokun.top/upload/2023/06/image-20230629213506420.png[/img]
  2. [size=5]3.界面功能设计[/size]
  4. 我们修改MainWindow 实现功能
  5. [list]
  6. [*]左边输入框，使用TextBox
  7. [*]右边添加Markdown.Avalonia控件
  8. [*]打开文件按钮-打开文件，提取文件内容
  9. [*]保存-如果是新文件，选择保存路径-如果是已打开的文件，保存现有文件。
  10. [/list][size=4]1.编写界面布局[/size]
  12. [img]https://www.raokun.top/upload/2023/06/image-20230629223400095.png[/img]
  13. [code]<Grid>
  14.         <Grid.ColumnDefinitions>
  15.                 <ColumnDefinition Width="10*"/>
  16.                 <ColumnDefinition Width="10*"/>
  17.         </Grid.ColumnDefinitions>
  18.         <Grid.RowDefinitions>
  19.                 <RowDefinition Height="1*"/>
  20.                 <RowDefinition Height="10*"/>
  21.         </Grid.RowDefinitions>
  22. </Grid>
复制代码
2.编辑框和Markdown展示代码
  1. <TextBox Grid.Row="1"
  2.     Grid.Column="0"
  3.     VerticalAlignment="Stretch"
  4.     AcceptsReturn="True"
  5.     Text="{Binding Text}"
  6.     TextWrapping="Wrap"
  7.     />
  8.     <md:MarkdownScrollViewer Grid.Row="1"
  9.         Grid.Column="1" Name="abc" Markdown="{Binding Text}"/>
复制代码
3.保存和打开
  1. <TextBox Grid.Row="1"
  2.     Grid.Column="0"
  3.     VerticalAlignment="Stretch"
  4.     AcceptsReturn="True"
  5.     Text="{Binding Text}"
  6.     TextWrapping="Wrap"
  7.     />
  8.     <md:MarkdownScrollViewer Grid.Row="1"
  9.         Grid.Column="1" Name="abc" Markdown="{Binding Text}"/>打开<TextBox Grid.Row="1"
  10.     Grid.Column="0"
  11.     VerticalAlignment="Stretch"
  12.     AcceptsReturn="True"
  13.     Text="{Binding Text}"
  14.     TextWrapping="Wrap"
  15.     />
  16.     <md:MarkdownScrollViewer Grid.Row="1"
  17.         Grid.Column="1" Name="abc" Markdown="{Binding Text}"/>保存
复制代码
4.成果


阅读如遇样式问题，请前往个人博客浏览： https://www.raokun.top

拥抱ChatGPT：https://ai.terramours.site

开源项目地址：https://github.com/firstsaofan/TerraMours


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4