WPF使用Blazor的快速案例

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

• WPF
• Blazor
• Masa Blazor
• Monaco

安装Masa Blazor模板

使用CMD指令安装模板

dotnet new install MASA.Template

新建Masa Blazor WPF App

1. 找到如图的模板，然后点击下一步
   

2. 下一步，新建项目名称FileEditor
   

添加Monaco

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

    var require = { paths: { 'vs': 'https://cdn.masastack.com/npm/monaco-editor/0.34.1/min/vs' } };

2. 新建Pages/Index.razor.cs文件

using System.IO;
using System.Text;
using Masa.Blazor;
using Masa.Blazor.Presets;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace FileEditor.Pages;

public partial class Index : IDisposable
{
    /// 

    /// 文本内容
    /// 
    private string value;

    private MMonacoEditor _editor;

    private DotNetObjectReference? _objRef;

    /// 

    /// 定义Monaco的初始配置
    /// 
    private object options = new
    {
        language = "md", // 设置语法
        automaticLayout = true, // 高度自适应
        theme = "vs-dark", // 主题
    };

    private string fullName;

    protected override void OnInitialized()
    {
        _objRef = DotNetObjectReference.Create(this);
    }

    /// 

    /// 具体文件路径
    /// 
    [Parameter]
    [CascadingPar服务器托管网ameter(Name = nameof(FullName))]
    public string FullName
    {
        get => fullName;
        set
        {
            fullName = value;
            UpdateValue();
        }
    }

    /// 

    /// Monaco初始化事件
    /// 
    private async Task InitMonaco()
    {
        // 监听CTRL+S 2097 = CTRL+S 快捷键
        // 调用Monaco的Command，传递当前对象，并且指定当触发快捷键的时候调用当签对象的指定方法。
        await _editor.AddCommandAsync(2097, _objRef, nameof(SaveValue));
    }

    /// 

    /// 更新value
    /// 
    private void UpdateValue()
    {
        if (string.IsNullOrEmpty(fullName))
        {
            return;
        }

        var info = new FileInfo(fullName);
        if (!info.Exists) return;
        using var fileStream = info.OpenText();
        value = fileStream.ReadToEnd();
    }

    /// 

    /// 更新文件内容
    /// 
    [JSInvokable]
    public async Task SaveValue()
    {
        try
        {
            await using var fileStream = File.OpenWrite(fullName);
            fileStream.Position = 0;
            await fileStream.WriteAsync(Encoding.UTF8.GetBytes(value));
            fileStream.Close();
        }
        catch (Exception e)
        {
            await PopupService.EnqueueSnackbarAsync(new SnackbarOptions()
            {
                Title = "保存文件错误",
                Content = e.Message
            });
        }
    }

    public void Dispose()
    {
        _editor.Dispose();
        _objRef?.Dispose();
    }
}

在Index.razor服务器托管网.cs文件中我们实现了拦截FullName的set，当被set的时候说明上级组件选择了文件并且通过CascadingParameter传递了参数到当前组件。

并且对于当前的Value进行更新，

打开Index.razor

@page "/"
@inject IPopupService PopupService

我们对于cs的一些方法和参数进行了绑定，并且bind-value了value的值，我们在cs文件中更新了value就自动更新了UI的显示的值。

然后我们打开Shared/MainLayout.razor文件添加打开文件选择器，从而选择文件。

@using Microsoft.Win32
@inherits LayoutComponentBase


    
         _drawer = !_drawer">
        FileEditor
        打开文件
        
        About
    

    
        
            
                
                    mdi-home
                
                
                    Home
                
            
            
                
                    mdi-plus
                
                
                    Counter
                
            
            
                
                    mdi-list-box
                
                
                    Fetch data
                
            
        
    

    
        
            
                
                    @Body
                
            
        
    


@code {

    private bool? _drawer;

    private string fullName;

    private void OpenFile()
    {
        var openFileDialog = new OpenFileDialog();
        openFileDialog.Title = "请选择您的文件";
        openFileDialog.Filter = "文本文件 (*.txt, *.md)|*.txt;*.md";
        bool? result = openFileDialog.ShowDialog();
        if (result == true)
        {
            fullName = openFileDialog.FileName;
        }
    }
}

在这里我们将使用Microsoft.Win32.OpenFileDialog打开文件选择器，并且指定选择文件的类型，

当前文件选择器返回true，则fullName的值，fullName则会通过CascadingValue组件的绑定传递到内的所有子组件。

下面我们看看实际使用效果。

技术交流

qq群：452761192

wx：wk28u9123456789(请备注技术交流)

源码下载地址：https://code-token.oss-cn-beijing.aliyuncs.com/FileEditor.zip

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 2023-05-28：为什么Redis-单线程模型效率也能那么高？

2023-05-28：为什么Redis-单线程模型效率也能那么高？ 答案2023-05-28： 1.C语言实现，效率高 C语言程序运行速度快，因为其相较于其他高级语言更加接近底层机器。由于C语言直接操作内存，不会像其他语言那样依赖虚拟机或垃圾回收机制等中间层，…