经验总结

  1. 首页 > 生活 > >

【炫丽】从0开始做一个WPF+Blazor对话小程序( 六 )

生活百科

DragMove方法，您可以尝试使用看看它报什么错），移动窗体有更好的方法欢迎留言 。

  • Razor组件里窗体控制按钮的使用看上面的代码不难理解，不过多解释 。
    • 上面效果的样式文件修改如下，wwwroot\css\app.css：
    /*BlazorDesktopWPF-CustomTitleBar -Copyright 2021 - Jam-Es.comLicensed under the MIT License (MIT). See LICENSE in the repo root for license information.*/html, body {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;padding: 0;margin: 0;}.valid.modified:not([type=checkbox]) {outline: 1px solid #26b050;}.invalid {outline: 1px solid red;}.validation-message {color: red;}#blazor-error-ui {background: lightyellow;bottom: 0;box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);display: none;left: 0;padding: 0.6rem 1.25rem 0.7rem 1.25rem;position: fixed;width: 100%;z-index: 1000;}#blazor-error-ui .dismiss {cursor: pointer;position: absolute;right: 0.75rem;top: 0.5rem;}.page-container {display: flex;flex-direction: column;height: 100vh;}.content-container {padding: 0px 20px 20px 20px;flex-grow: 1;overflow-y: scroll;}.titlebar {width: 100%;height: 32px;min-height: 32px;background-color: #7160E8;display: flex;flex-direction: row;}.titlebar-btn, .titlebar-cbtn {width: 46px;background-color: #7160E8;color: white;border: none;border-radius: 0;}.titlebar-btn:hover {background-color: #5A5A5A;}.titlebar-btn:focus, .titlebar-cbtn:focus {outline: 0;}.titlebar-cbtn:hover {background-color: #E81123;}.window-title {display: flex;flex-direction: column;justify-content: center;margin-left: 5px;color: white;}上面的一些代码即实现了由Razor组件实现窗体的标题显示、窗体的最小化、最大化（还原）、关闭、移动等操作，然而还是会有3.1结尾出现的问题，即窗体圆角和窗体最大化铺满操作系统桌面任务栏的问题，下面一小节我们尝试解决他 。
    小节总结：通过上面的代码，如果放Tab控件铺满整个窗体，是不是有思路了？
    本小节源码在这Razor组件实现窗体标题栏功能
    3.4 Blazor与WPF比较完美的实现效果其实上面的代码可以当做学习，即使有不小瑕疵（哈哈），本小节我们还是使用第三包解决窗体圆角和最大化问题 。
    首先添加Nuget包ModernWpfUI，该WPF控件库本站介绍链接开源WPF控件库：ModernWpf：
    <PackageReference Include="ModernWpfUI" Version="0.9.7-preview.2" />然后打开App.xaml，引用上面开源WPF控件的样式：
    <Application x:Class="WPFBlazorChat.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:ui="http://schemas.modernwpf.com/2019"StartupUri="MainWindow.xaml"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ui:ThemeResources /><ui:XamlControlsResources /></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources></Application>最后打开MainWindow.xaml，修改如下（主要是引入的几个属性ui:xxxxx）：
    <Window x:Class="WPFBlazorChat.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:ui="http://schemas.modernwpf.com/2019"xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"xmlns:razorViews="clr-namespace:WPFBlazorChat.RazorViews"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"ui:TitleBar.ExtendViewIntoTitleBar="True"ui:TitleBar.IsBackButtonVisible="False"ui:TitleBar.Style="{DynamicResource AppTitleBarStyle}"ui:WindowHelper.UseModernWindowStyle="True"><Border Background="#7160E8" CornerRadius="5"><blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}"><blazor:BlazorWebView.RootComponents><blazor:RootComponent Selector="#app" ComponentType="{x:Type razorViews:Counter}" /></blazor:BlazorWebView.RootComponents></blazor:BlazorWebView></Border></Window>

    经验总结扩展阅读


    上一篇：10克怎么自己在家量

    下一篇：2023年农历七月廿八剖腹产吉日 2023年9月12日剖腹产黄道吉日