.NET MAUI BLAZOR-桌面UI的最佳实践
#css #网络开发人员 #dotnet #desktop

.net Maui Blazor是一个开源框架，可让您与Web UI组件和C＃代码创建跨平台应用程序。它使用BlazorWebView在移动和桌面上渲染剃须刀组件。因此，就像主要用于手机的last article一样，这次我将向您展示一些方便的桌面UI提示。

禁用F5键刷新，然后用鼠标滚动缩放

在您的MainPage.xaml中，使用Loaded tag的Loaded事件覆盖BlazorWebView的默认设置，如下面的代码：

   public MainPage()
    {
        InitializeComponent();
        Loaded += ContentPage_Loaded;
    }

    private async void ContentPage_Loaded(object sender, EventArgs e)
    {
#if WINDOWS && RELEASE
        var webView2 = (blazorWebView.Handler.PlatformView as Microsoft.UI.Xaml.Controls.WebView2);
        await webView2.EnsureCoreWebView2Async();

        var settings = webView2.CoreWebView2.Settings;
        settings.IsZoomControlEnabled = false;
        settings.AreBrowserAcceleratorKeysEnabled = false;
#endif
    }

禁用上下文菜单

默认情况下，Windows上下文菜单已禁用，但macOS却没有，因此我们需要在您的index.html文件中使用一些JavaScript禁用它：

window.addEventListener('contextmenu', (event) => event.preventDefault());

更改Windows TitleBar颜色

在Platforms/Windows/App.xaml中添加这些行并将颜色更改为您想要的任何东西。

<maui:MauiWinUIApplication
    x:Class="YouProject.Client.App.Platforms.Windows.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui">
    <maui:MauiWinUIApplication.Resources>
        <ResourceDictionary>
            <SolidColorBrush x:Key="WindowCaptionForeground">#512bdf</SolidColorBrush>
            <SolidColorBrush x:Key="WindowCaptionBackground">#ffffff</SolidColorBrush>
            <SolidColorBrush x:Key="WindowCaptionForegroundDisabled">#512bdf</SolidColorBrush>
            <SolidColorBrush x:Key="WindowCaptionBackgroundDisabled">#ffffff</SolidColorBrush>
        </ResourceDictionary>
    </maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>

从Microsoft documentation。

了解更多信息。

常见的HTML/CSS技巧

1。禁用拖动图像并选择文本
好吧，我想我们都同意，并非每个图像都应该是可拖动的，也不应该选择每个文本，因此您需要添加所有图像：

* {
     user-drag: none;
     user-select: none;
     -webkit-user-drag: none;
     -webkit-user-select: none;
}

2。有一些工具提示
还记得开发桌面应用程序中的工具提示吗？您可以使用任何HTML元素上的title属性来完成。
例如：

<button @onclick="Close()" class="close-button" title="Close"></button>

3。更改鼠标光标
对于不同的元素和组件，可以更改鼠标光标，这是使用cursor属性将光标更改为指针的一个示例，当时悬停在div标签上使用item的类别将光标更改为指针：


.item {
    cursor: pointer;
}

4。添加一些主动和悬停效果
默认情况下，在某些本机控件中，有一些悬停和活动（点击）效果会改变颜色，因此我们可以在网络上这样做：

  .item {
       background-color: white;
    }

  .item:active {
       background-color: whitesmoke;
    }

  .item:hover {
       background-color: lightgray;
    }

获取窗口大小

有时您需要有窗口大小才能在C＃代码中进行一些计算，以便您可以使用JavaScript进行这样的计算：

在您的剃须刀组件中添加这些代码

public partial class YourComponent : ComponentBase
{
    public int WindowWidth { get; set; }
    private string _resizeEventListenerId = string.Empty;
    private DotNetObjectReference<YourComponent>? _dotnetObjectReference;

    [Inject] private IJSRuntime JSRuntime { get; set; } = default!;

    protected override async Task OnInitializedAsync()
    {
        _dotnetObjectReference = DotNetObjectReference.Create(this);
        await base.OnInitializedAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("UpdateWindowWidth", _dotnetObjectReference);
            await InitWindowWidthListener();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    [JSInvokable]
    public void UpdateWindowWidth(int windowWidth)
    {
        WindowWidth = windowWidth;
        StateHasChanged();
    }

    private async Task InitWindowWidthListener()
    {
        _resizeEventListenerId = Guid.NewGuid().ToString();
        await JSRuntime.InvokeVoidAsync("AddWindowWidthListener", _dotnetObjectReference, _resizeEventListenerId);
    }
}

并将它们放入JavaScript文件中，然后将其添加到您的index.html
中 

let windowEventListeners = {};

function AddWindowWidthListener(objReference, id) {
    let eventListener = () => UpdateWindowWidth(objReference);
    window.addEventListener("resize", eventListener);
    windowEventListeners[id] = eventListener;
}

function RemoveWindowWidthListener(id) {
    window.removeEventListener("resize", windowEventListeners[id]);
    delete windowEventListeners[id];
}

function UpdateWindowWidth(objReference) {
    objReference.invokeMethodAsync("UpdateWindowWidth", window.innerWidth);
}

好吧，我想最好在一个项目中同时拥有移动设备和桌面最佳实践，因此我更新了包含我们讨论过的所有代码的示例回购。您可以拥有from here。

快乐的编码; d