浙江龙网

  1. 首页 > 生活百科 > >

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

生活百科

一个按钮【快快点我】，点击@onclick="IncrementCount"使变量currentCount自增，同时页面显示此变量值，相信你能看懂 。
2.6 Blazor与WPF窗体关联这是两者产生关系的关键一步 ， 打开窗体MainWindow.xaml，修改如下：

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

文章插图
如上代码，要点如下：
  1. 添加上面引入的Nuget包Microsoft.AspNetCore.Components.WebView.Wpf的命名空间，命名为blazor，主要是要使用BlazorWebView组件;
  2. BlazorWebView组件属性HostPage指定承载的html文件，Services指定razor组件的Ioc容器 ， 看下面MainWindow()里标红的代码;
  3. RootComponent的Selector="#app"属性指示Razor组件渲染的位置，看index.html中id为app的html元素 ， ComponentType指示需要在#app中渲染的Razor组件类型 。
打开MainWindow.xaml.cs，修改如下：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
在WPF里可以使用Prism等框架提供的Unity、DryIoc等Ioc容器实现视图与服务的注入；Razor组件这里，默认使用ASP.NET Core的IServiceCollection容器；如果WPF窗体与Razor组件需要共享数据，可以通过后面要说的Messager发送消息 ， 也可以通过Ioc容器注入的方式实现，比如从WPF窗体中注入的数据（通过MainWindow构造函数注入），通过IServiceCollection容器再注入Razor组件使用 ， 这里后面也有提到 。
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
上面步骤做完后，运行程序：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
OK ， WPF与Blazor集成成功，打完收工？
等等，还没完呢，本小节源码在这WPF中添加Blazor，接着往下看 。
3. 自定义窗体
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
看上图，窗体边框是WPF默认的样式 ， 有时会感觉比较丑，或者不丑，设计师有其他的窗体风格设计，往往我们要自定义窗体，本节分享部分WPF与Blazor的自定义窗体实现，更多定制化功能可能需要您自行研究 。
3.1 WPF自定义窗体一般实现是设置窗体的三个属性WindowStyle="None" AllowsTransparency="True" Background="Transparent"，即可隐藏默认窗体的边框，然后在内容区自己画标题栏、最小化、最大化、关闭按钮、客户区等 。
MainWindow.xaml：隐藏WPF默认窗体边框
<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"><Grid><blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}"><blazor:BlazorWebView.RootComponents><blazor:RootComponent ComponentType="{x:Type razorViews:Counter}" Selector="#app" /></blazor:BlazorWebView.RootComponents></Grid></Window>上面的代码只是隐藏了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>

推荐阅读


上一篇：day12-Servlet02

下一篇：JVM学习笔记——内存模型篇