经验总结

  1. 首页 > 生活 > >

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

生活百科

上面的代码只是隐藏了WPF默认窗体的边框，运行程序如下：

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

文章插图
看上图，点击窗体中的按钮（其实是Razor组件的按钮），但未执行按钮点击事件，且窗体消失了，这是怎么回事？您可以尝试研究下为什么，我没有研究个所以然来，暂时加个背景处理BlazorWebView穿透的问题 。
简单的WPF自定义窗体样式
我们加上自定义窗体的基本样式看看：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
MainWindow.xaml代码如下：
<Windowx:Class="WPFBlazorChat.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:razorViews="clr-namespace:WPFBlazorChat.RazorViews"Title="MainWindow"Width="800"Height="450"AllowsTransparency="True" Background="Transparent" WindowStyle="None"mc:Ignorable="d"><Window.Resources><Style TargetType="{x:Type Button}"><Setter Property="Width" Value="https://www.huyubaike.com/biancheng/35" /><Setter Property="Height" Value="https://www.huyubaike.com/biancheng/25" /><Setter Property="Margin" Value="https://www.huyubaike.com/biancheng/2" /><Setter Property="Background" Value="https://www.huyubaike.com/biancheng/Transparent" /><Setter Property="BorderThickness" Value="https://www.huyubaike.com/biancheng/0" /><Setter Property="Foreground" Value="https://www.huyubaike.com/biancheng/White" /></Style></Window.Resources><Border Background="#7160E8" CornerRadius="5"><Grid><Grid.RowDefinitions><RowDefinition Height="35" /><RowDefinition Height="*" /></Grid.RowDefinitions><BorderBackground="#7160E8" CornerRadius="5 5 0 0" MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"><Grid><TextBlockMargin="10,10,5,5"Foreground="White"Text="这里是窗体标题栏，左侧可放Logo、标题，右侧放窗体操作按钮：最小化、最大化、关闭等" /><StackPanel HorizontalAlignment="Right" Orientation="Horizontal"><Button Click="MinimizeWindow_Click" Content="―" /><Button Click="MaximizeWindow_Click" Content="口" /><Button Click="CloseWindow_Click" Content="X" /></StackPanel></Grid></Border><blazor:BlazorWebView Grid.Row="1" HostPage="wwwroot\index.html" Services="{DynamicResource services}"><blazor:BlazorWebView.RootComponents><blazor:RootComponent ComponentType="{x:Type razorViews:Counter}" Selector="#app" /></blazor:BlazorWebView.RootComponents></blazor:BlazorWebView></Grid></Border></Window>我们给整个窗体客户端区域加了一个背景Border(您可以去掉Border背景色，点击界面按钮试试)，然后又套了一个Grid，用于放置自定义的标题栏（标题和窗体控制按钮）和BlazorWebView(用于渲染Razor组件的浏览器组件)，下面是窗体控制按钮的响应事件：
using Microsoft.Extensions.DependencyInjection;using System.Windows;namespace WPFBlazorChat;public partial class MainWindow : Window{public MainWindow(){InitializeComponent();var serviceCollection = new ServiceCollection();serviceCollection.AddWpfBlazorWebView();Resources.Add("services", serviceCollection.BuildServiceProvider());}private void MoveWindow_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e){if (e.ClickCount == 1){this.DragMove();}else{MaximizeWindow_Click(null, null);}}private void CloseWindow_Click(object sender, RoutedEventArgs e){this.Close();}private void MinimizeWindow_Click(object sender, RoutedEventArgs e){this.WindowState = WindowState.Minimized;}private void MaximizeWindow_Click(object sender, RoutedEventArgs e){this.WindowState = this.WindowState == WindowState.Maximized ? WindowState.Normal : WindowState.Maximized;}}

经验总结扩展阅读


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

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