Avalonia开发Markdown编辑器
Avalonia开发Markdown编辑器今天熟悉Avalonia UI，做一个Markdown的文本编辑器。
代码我上传了Github，地址：
https://github.com/raokun/AvaloniaMarkdown.git
1.创建Avalonia MVVM项目
我使用开发工具的是visual studio 2022 preview ，上一篇博客已经写过了SDK的安装和基础项目的创建，需要了解的可以跳转查看：
创建Avalonia 模板项目-基础
https://www.raokun.top/upload/2023/06/image-20230629213020322.png
2.添加用于Markdown渲染的nuget包
由于Avalonia UI 本身不带Markdown的展示，我们使用nuget包 Markdown.Avalonia
在csproj中添加包
https://www.raokun.top/upload/2023/06/image-20230629213506420.png
3.界面功能设计
我们修改MainWindow 实现功能
[*]左边输入框，使用TextBox
[*]右边添加Markdown.Avalonia控件
[*]打开文件按钮-打开文件，提取文件内容
[*]保存-如果是新文件，选择保存路径-如果是已打开的文件，保存现有文件。
1.编写界面布局
https://www.raokun.top/upload/2023/06/image-20230629223400095.png
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
</Grid>2.编辑框和Markdown展示代码
<TextBox Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Stretch"
AcceptsReturn="True"
Text="{Binding Text}"
TextWrapping="Wrap"
/>
<md:MarkdownScrollViewer Grid.Row="1"
Grid.Column="1" Name="abc" Markdown="{Binding Text}"/>3.保存和打开
<TextBox Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Stretch"
AcceptsReturn="True"
Text="{Binding Text}"
TextWrapping="Wrap"
/>
<md:MarkdownScrollViewer Grid.Row="1"
Grid.Column="1" Name="abc" Markdown="{Binding Text}"/>打开<TextBox Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Stretch"
AcceptsReturn="True"
Text="{Binding Text}"
TextWrapping="Wrap"
/>
<md:MarkdownScrollViewer Grid.Row="1"
Grid.Column="1" Name="abc" Markdown="{Binding Text}"/>保存4.成果
https://www.raokun.top/upload/2023/06/image-20230629223736054.png
阅读如遇样式问题，请前往个人博客浏览： https://www.raokun.top
拥抱ChatGPT：https://ai.terramours.site
开源项目地址：https://github.com/firstsaofan/TerraMours
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]