WPF使用Blazor的快速案例

这篇具有很好参考价值的文章主要介绍了WPF使用Blazor的快速案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

  • WPF
  • Blazor
  • Masa Blazor
  • Monaco

安装Masa Blazor模板

使用CMD指令安装模板

dotnet new install MASA.Template

新建Masa Blazor WPF App

  1. 找到如图的模板,然后点击下一步
    WPF使用Blazor的快速案例

  2. 下一步,新建项目名称FileEditor
    WPF使用Blazor的快速案例

添加Monaco

  1. 打开wwwroot/index.html,并且引用Monaco的依赖,将一下依赖添加到body里面的最尾部。
<script>
    var require = { paths: { 'vs': 'https://cdn.masastack.com/npm/monaco-editor/0.34.1/min/vs' } };
</script>
<script src="https://cdn.masastack.com/npm/monaco-editor/0.34.1/min/vs/loader.js"></script>
<script src="https://cdn.masastack.com/npm/monaco-editor/0.34.1/min/vs/editor/editor.main.nls.js"></script>
<script src="https://cdn.masastack.com/npm/monaco-editor/0.34.1/min/vs/editor/editor.main.js"></script>
  1. 新建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
{
    /// <summary>
    /// 文本内容
    /// </summary>
    private string value;

    private MMonacoEditor _editor;

    private DotNetObjectReference<Index>? _objRef;

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

    private string fullName;

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

    /// <summary>
    /// 具体文件路径
    /// </summary>
    [Parameter]
    [CascadingParameter(Name = nameof(FullName))]
    public string FullName
    {
        get => fullName;
        set
        {
            fullName = value;
            UpdateValue();
        }
    }

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

    /// <summary>
    /// 更新value
    /// </summary>
    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();
    }

    /// <summary>
    /// 更新文件内容
    /// </summary>
    [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

<MMonacoEditor InitCompleteHandle="async () => await InitMonaco()"
               @bind-Value="value"
               Height="@("100%")"
               EditorOptions="options" @ref="_editor">
</MMonacoEditor>

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

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

@using Microsoft.Win32
@inherits LayoutComponentBase

<MApp>
    <MAppBar App>
        <MAppBarNavIcon @onclick="() => _drawer = !_drawer"></MAppBarNavIcon>
        <MToolbarTitle>FileEditor</MToolbarTitle>
        <MButton OnClick="OpenFile">打开文件</MButton>
        <MSpacer></MSpacer>
        <MButton Text Color="primary" Target="_blank" Href="https://docs.masastack.com/blazor/introduction/why-masa-blazor">About</MButton>
    </MAppBar>

    <MNavigationDrawer App @bind-Value="_drawer">
        <MList Nav Routable>
            <MListItem Href="/" ActiveClass="primary--text">
                <MListItemIcon>
                    <MIcon>mdi-home</MIcon>
                </MListItemIcon>
                <MListItemContent>
                    <MListItemTitle>Home</MListItemTitle>
                </MListItemContent>
            </MListItem>
            <MListItem Href="/counter" ActiveClass="primary--text">
                <MListItemIcon>
                    <MIcon>mdi-plus</MIcon>
                </MListItemIcon>
                <MListItemContent>
                    <MListItemTitle>Counter</MListItemTitle>
                </MListItemContent>
            </MListItem>
            <MListItem Href="/fetchdata" ActiveClass="primary--text">
                <MListItemIcon>
                    <MIcon>mdi-list-box</MIcon>
                </MListItemIcon>
                <MListItemContent>
                    <MListItemTitle>Fetch data</MListItemTitle>
                </MListItemContent>
            </MListItem>
        </MList>
    </MNavigationDrawer>

    <MMain>
        <MContainer Fluid Style="height: 100%">
            <CascadingValue Value="fullName" Name="FullName">
                <MErrorHandler>
                    @Body
                </MErrorHandler>
            </CascadingValue>
        </MContainer>
    </MMain>
</MApp>

@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组件的绑定传递到<CascadingValue></CascadingValue>内的所有子组件。

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

WPF使用Blazor的快速案例

技术交流

qq群:452761192

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

源码下载地址:https://code-token.oss-cn-beijing.aliyuncs.com/FileEditor.zip文章来源地址https://www.toymoban.com/news/detail-687740.html

到了这里,关于WPF使用Blazor的快速案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Blazor HyBrid 授权讲解

    本文介绍 ASP.NET Core 对 Blazor Hybrid 应用中的安全配置和管理及 ASP.NET Core Identity 的支持。 Blazor Hybrid 应用中的身份验证由本机平台库处理,因为后者提供了浏览器沙盒无法给予的经过增强的安全保证。 本机应用的身份验证使用特定于操作系统的机制或通过联合协议,如 OpenID

    2024年02月07日
    浏览(32)
  • 【独立闯天下】Prime新传奇!💥原团队的Blazor版本迟迟无音,合并请求石沉大海。于是,我们决定单干!加入Prime Blazor版项目,一起开创崭新的旅程吧!🌟📚

    共建Prime的Blazor版:为开源社区注入新活力 Prime组件库作为一款广受欢迎的开源组件库,一直以来都备受开发者们的青睐。然而,随着技术的不断发展和更新,原团队的Blazor版本似乎已经逐渐失去了活力,长时间没有得到更新和维护。在这样的背景下,一群热爱开源、热衷于

    2024年02月03日
    浏览(73)
  • Blazor UI库 Bootstrap Blazor 快速上手 (v7.5.7)

    最近组件库更新比较频繁,有些同学感觉有点迷茫,就着今天刚上了张老板一节课立马撸个新的上手教程回馈社区, ;- 增加主题样式表到 Pages/_Host.cshtml 文件中 删除 link rel=\\\"stylesheet\\\" href=\\\"css/bootstrap/bootstrap.min.css\\\" / 并在下面添加两行 添加 Javascript 引用到 Pages/_Host.cshtml 文件中 在

    2023年04月27日
    浏览(41)
  • Blazor快速开发框架Known-V2.0.0

    Known 是基于 Blazor 的企业级快速开发框架,低代码,跨平台,开箱即用,一处代码,多处运行。 官网:http://known.pumantech.com Gitee: https://gitee.com/known/Known Github:https://github.com/known/Known 概述 基于 C# 和 Blazor 的快速开发框架,开箱即用,跨平台。 模块化,单页应用,混合桌面应

    2024年02月02日
    浏览(48)
  • bh002- Blazor hybrid / Maui 保存设置快速教程

    1. 建立工程 bh002_ORM 源码 2. 添加 nuget 包 3. 添加命名空间引用 _Imports.razor @using BootstrapBlazor.Components 4. 添加服务 MauiProgram.cs 在 return builder.Build(); 之前加入这句 5. 添加代码后置文件 Pages/Index.razor.cs Index.razor.cs 6. 添加 UI Index.razor 7. 执行效果 8. 添加清除按钮 Index.razor Index.razor.c

    2024年02月11日
    浏览(36)
  • 全面的ASP.NET Core Blazor简介和快速入门

      因为咱们的MongoDB入门到实战教程Web端准备使用Blazor来作为前端展示UI,本篇文章主要是介绍Blazor是一个怎样的Web UI框架,其优势和特点在哪?并带你快速入门上手ASP.NET Core Blazor(当然这个前提是你要有一定的C#编程基础的情况,假如你完全没有接触过C#的话建议你先从基本语

    2024年02月19日
    浏览(40)
  • 【SpringBoot】Starter的使用与案例讲解

    🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《SpringBoot》。🎯🎯 👉点击这里,就可以查看我的主页啦!👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待你的加入,一起学

    2024年02月04日
    浏览(37)
  • react的redux和router的使用案例讲解

    react的redux和router的使用案例讲解 安装依赖: 首先,你需要安装一些必要的依赖项。使用以下命令安装Redux、React Redux和React Router: 配置Redux Store: 创建一个Redux store来管理应用程序的状态。在这个案例中,我们将存储待办事项列表和当前选定的待办事项。 使用Redux: 在Reac

    2024年01月22日
    浏览(55)
  • 使用Spring Boot集成中间件:Kafka的高级使用案例讲解

    在实际应用中,Kafka作为一种强大的分布式消息系统,广泛应用于实时数据处理和消息传递。本文将通过一个全面的使用案例,详细介绍如何使用Spring Boot集成Kafka,并展示其在实际场景中的应用。 在开始之前,我们需要确保已经完成以下准备工作: 安装并启动Kafka集群 创建

    2024年02月01日
    浏览(51)
  • wireshark常见使用操作讲解以及几个故障解决案例分享

    (1)网卡选择 对于电脑本身有多个网卡的时候,选择网卡就成为了一个困惑的地方,其实这里很简单,只要把鼠标放在对应的网卡上面就可以看到地址等信息,就容易判断出来了。 (2)过滤器 直接抓包,电脑发出去的所有包,或者镜像过来的包 都非常的多,比便于查看某

    2024年02月15日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包