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


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