WPF使用Blazor的快速案例

无聊看看新闻

下面我们将讲解在WPF中使用Blazor，并且使用Blazor做一些文件编辑操作，下面是需要用到的东西

• WPF
  
• Blazor
  
• Masa Blazor
  
• Monaco
  

安装Masa Blazor模板

使用CMD指令安装模板

1. dotnet new install MASA.Template

复制代码

新建Masa Blazor WPF App

• 找到如图的模板，然后点击下一步
  
  
  
• 下一步，新建项目名称FileEditor
  
  
  

添加Monaco

• 打开wwwroot/index.html，并且引用Monaco的依赖，将一下依赖添加到body里面的最尾部。
  

1. [/code][list=1]
2. [*]新建Pages/Index.razor.cs文件
3. [/list][code]using System.IO;
4. using System.Text;
5. using Masa.Blazor;
6. using Masa.Blazor.Presets;
7. using Microsoft.AspNetCore.Components;
8. using Microsoft.JSInterop;
10. namespace FileEditor.Pages;
12. public partial class Index : IDisposable
13. {
14.     /// <summary>
15.     /// 文本内容
16.     /// </summary>
17.     private string value;
19.     private MMonacoEditor _editor;
21.     private DotNetObjectReference<Index>? _objRef;
23.     /// <summary>
24.     /// 定义Monaco的初始配置
25.     /// </summary>
26.     private object options = new
27.     {
28.         language = "md", // 设置语法
29.         automaticLayout = true, // 高度自适应
30.         theme = "vs-dark", // 主题
31.     };
33.     private string fullName;
35.     protected override void OnInitialized()
36.     {
37.         _objRef = DotNetObjectReference.Create(this);
38.     }
40.     /// <summary>
41.     /// 具体文件路径
42.     /// </summary>
43.     [Parameter]
44.     [CascadingParameter(Name = nameof(FullName))]
45.     public string FullName
46.     {
47.         get => fullName;
48.         set
49.         {
50.             fullName = value;
51.             UpdateValue();
52.         }
53.     }
55.     /// <summary>
56.     /// Monaco初始化事件
57.     /// </summary>
58.     private async Task InitMonaco()
59.     {
60.         // 监听CTRL+S 2097 = CTRL+S 快捷键
61.         // 调用Monaco的Command，传递当前对象，并且指定当触发快捷键的时候调用当签对象的指定方法。
62.         await _editor.AddCommandAsync(2097, _objRef, nameof(SaveValue));
63.     }
65.     /// <summary>
66.     /// 更新value
67.     /// </summary>
68.     private void UpdateValue()
69.     {
70.         if (string.IsNullOrEmpty(fullName))
71.         {
72.             return;
73.         }
75.         var info = new FileInfo(fullName);
76.         if (!info.Exists) return;
77.         using var fileStream = info.OpenText();
78.         value = fileStream.ReadToEnd();
79.     }
81.     /// <summary>
82.     /// 更新文件内容
83.     /// </summary>
84.     [JSInvokable]
85.     public async Task SaveValue()
86.     {
87.         try
88.         {
89.             await using var fileStream = File.OpenWrite(fullName);
90.             fileStream.Position = 0;
91.             await fileStream.WriteAsync(Encoding.UTF8.GetBytes(value));
92.             fileStream.Close();
93.         }
94.         catch (Exception e)
95.         {
96.             await PopupService.EnqueueSnackbarAsync(new SnackbarOptions()
97.             {
98.                 Title = "保存文件错误",
99.                 Content = e.Message
100.             });
101.         }
102.     }
104.     public void Dispose()
105.     {
106.         _editor.Dispose();
107.         _objRef?.Dispose();
108.     }
109. }

复制代码

在Index.razor.cs文件中我们实现了拦截FullName的set，当被set的时候说明上级组件选择了文件并且通过CascadingParameter传递了参数到当前组件。
并且对于当前的Value进行更新，
打开Index.razor

1. @page "/"
2. @inject IPopupService PopupService
4. <MMonacoEditor InitCompleteHandle="async () => await InitMonaco()"
5.                @bind-Value="value"
6.                Height="@("100%")"
7.                EditorOptions="options" @ref="_editor">
8. </MMonacoEditor>

复制代码

我们对于cs的一些方法和参数进行了绑定，并且bind-value了value的值，我们在cs文件中更新了value就自动更新了UI的显示的值。
然后我们打开Shared/MainLayout.razor文件添加打开文件选择器，从而选择文件。

1. @using Microsoft.Win32
2. @inherits LayoutComponentBase
4. <MApp>
5.     <MAppBar App>
6.         <MAppBarNavIcon @onclick="() => _drawer = !_drawer"></MAppBarNavIcon>
7.         <MToolbarTitle>FileEditor</MToolbarTitle>
8.         <MButton OnClick="OpenFile">打开文件</MButton>
9.         <MSpacer></MSpacer>
10.         <MButton Text Color="primary" Target="_blank" Href="https://docs.masastack.com/blazor/introduction/why-masa-blazor">About</MButton>
11.     </MAppBar>
13.     <MNavigationDrawer App @bind-Value="_drawer">
14.         <MList Nav Routable>
15.             <MListItem Href="/" Active>
16.                 <MListItemIcon>
17.                     <MIcon>mdi-home</MIcon>
18.                 </MListItemIcon>
19.                 <MListItemContent>
20.                     <MListItemTitle>Home</MListItemTitle>
21.                 </MListItemContent>
22.             </MListItem>
23.             <MListItem Href="/counter" Active>
24.                 <MListItemIcon>
25.                     <MIcon>mdi-plus</MIcon>
26.                 </MListItemIcon>
27.                 <MListItemContent>
28.                     <MListItemTitle>Counter</MListItemTitle>
29.                 </MListItemContent>
30.             </MListItem>
31.             <MListItem Href="/fetchdata" Active>
32.                 <MListItemIcon>
33.                     <MIcon>mdi-list-box</MIcon>
34.                 </MListItemIcon>
35.                 <MListItemContent>
36.                     <MListItemTitle>Fetch data</MListItemTitle>
37.                 </MListItemContent>
38.             </MListItem>
39.         </MList>
40.     </MNavigationDrawer>
42.     <MMain>
43.         <MContainer Fluid >
44.             <CascadingValue Value="fullName" Name="FullName">
45.                 <MErrorHandler>
46.                     @Body
47.                 </MErrorHandler>
48.             </CascadingValue>
49.         </MContainer>
50.     </MMain>
51. </MApp>
53. @code {
55.     private bool? _drawer;
57.     private string fullName;
59.     private void OpenFile()
60.     {
61.         var openFileDialog = new OpenFileDialog();
62.         openFileDialog.Title = "请选择您的文件";
63.         openFileDialog.Filter = "文本文件 (*.txt, *.md)|*.txt;*.md";
64.         bool? result = openFileDialog.ShowDialog();
65.         if (result == true)
66.         {
67.             fullName = openFileDialog.FileName;
68.         }
69.     }
70. }

复制代码

在这里我们将使用Microsoft.Win32.OpenFileDialog打开文件选择器，并且指定选择文件的类型，
当前文件选择器返回true，则fullName的值，fullName则会通过CascadingValue组件的绑定传递到内的所有子组件。
下面我们看看实际使用效果。

技术交流

qq群：452761192
wx：wk28u9123456789(请备注技术交流)
源码下载地址：https://code-token.oss-cn-beijing.aliyuncs.com/FileEditor.zip

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