C# WPF實用的注冊窗體

間如流水，只能流去不流回！
點贊再看，養成習慣，這是您給我創作的動力！
本文 Dotnet9 https://dotnet9.com 已收錄，站長樂于分享dotnet相關技術，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相關的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己會的。

閱讀導航：

一、先看效果
二、本文背景
三、代碼實現
四、文章參考
五、代碼下載

一、先看效果

二、本文背景

無。

三、代碼實現

站長使用.Net Core 3.1創建的WPF工程，創建名稱為“Register”的解決方案后，需要添加Nuget庫，下面兩個庫都需要添加：

App.xaml添加MaterialDesign的樣式文件

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Purple.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

注冊窗體MainWindow.xaml

<Window x:Class="Register.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Register"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="1000">
    <Grid Background="#FFDADADA">
        <Border Margin="15" MaxWidth="600" Background="White" VerticalAlignment="Center" Padding="30" CornerRadius="15">
            <Border.Effect>
                <DropShadowEffect BlurRadius="30" Color="LightGray" ShadowDepth="0"/>
            </Border.Effect>
            <StackPanel>
                <TextBlock Text="歡迎" FontSize="30" FontWeight="Bold" Margin="0 0 0 20"/>

                <Grid Margin="0 0 0 20">
                    <Button Content="注冊" HorizontalAlignment="Left"/>
                    <Button Content="登錄" HorizontalAlignment="Right" Style="{StaticResource MaterialDesignFlatButton}"/>
                </Grid>

                <TextBox materialDesign:HintAssist.Hint="用戶名" Style="{StaticResource MaterialDesignFloatingHintTextBox}" Margin="0 5"/>
                <PasswordBox materialDesign:HintAssist.Hint="密碼" Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" Margin="0 5"/>
                <PasswordBox materialDesign:HintAssist.Hint="確認密碼" Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" Margin="0 5"/>
                <TextBox materialDesign:HintAssist.Hint="電子郵件" Style="{StaticResource MaterialDesignFloatingHintTextBox}" Margin="0 5"/>
                <Button Content="注冊" Margin="0 20"/>
            </StackPanel>
        </Border>
    </Grid>
</Window>

四、文章參考

參考：
Design com WPF ： https://www.youtube.com/watch?v=B1azT_aRdHU&t=190s

五、代碼下載

文章中代碼已經全部貼出，就這么幾行代碼，不要奇怪，就是這么多。

除非注明，文章均由 Dotnet9 整理發布，歡迎轉載。
轉載請注明本文地址：https://dotnet9.com/2019/12/it-technology/csharp/wpf/register-window.html

言

WPF作為Windows平臺上強大且成熟的桌面應用程序開發技術，擁有豐富的UI控件庫、強大的數據綁定機制和豐富的圖形渲染能力，與此同時，Blazor作為一種基于Web的新興技術，無需學習JavaScript。Blazor借助WebAssembly技術，使Web項目代碼能夠在桌面程序中運行。因此，將WPF和Blazor結合起來開發混合應用，成為了一種可以落地實踐的做法。因為可以充分發揮兩者的優勢，彌補彼此的不足。通過這種方式，可以利用WPF強大的桌面開發能力，同時又能夠借助Blazor實現跨平臺部署，使應用程序能夠同時運行在Windows平臺和Web瀏覽器中，從而實現一份代碼，多端運行的目標。

下面我們來實踐下混合開發的帶來的奇妙體驗，跟著步驟，一起來：

一、創建 WPF 應用

在 Visual Studio 中創建一個新的WPF項目,命名為WpfBlazorApp。

二、修改項目文件

對其項目（.csproj）文件進行一些修改。在“解決方案資源管理器”中，右鍵單擊項目名稱“WpfBlazorApp”，然后選擇“編輯項目文件”以訪問項目文件（WpfBlazorApp.csproj）,項目文件最初的樣子。

我們需要先在這里做一些改變。

<Project Sdk> 元素： 這指定了項目使用的 SDK。此 SDK 提供用于構建項目的工具、編譯器和其他必要組件。我們需要將其從<Project Sdk=“Microsoft.NET.Sdk”>更改為<Project Sdk=“Microsoft.NET.Sdk.Razor”>。通過此更改，該項目將利用 Razor 語法和功能來創建動態 Web 內容。
<PropertyGroup>中的<RootNamespace>：這是項目的根命名空間。現在，我們需要將其設置為 WpfBlazorApp，項目中的所有代碼文件都屬于此命名空間。這有助于避免不同命名空間之間的命名沖突。

三、添加Microsoft.AspNetCore.Components.WebView.Wpf組件包

Microsoft.AspNetCore.Components.WebView.Wpf 是一個 .NET 庫，用于在 WPF應用程序中承載 Blazor WebAssembly 應用程序。這個庫允許將基于 Web 的用戶界面嵌入到 WPF 應用程序中，從而充分利用 Blazor WebAssembly 的功能和優勢。

核心技術：Build WPF apps with Blazor and WebView2.

四、創建 wwwroot/Index.html 文件

每個 Web 應用程序都需要一個 wwwroot 文件夾。將一個添加到您的項目中，并將起始文件（將Index.HTML）放入其中。以下是該index的內容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WpfBlazorApp</title>
    <base href="/" />
</head>

<body>
    <div id="app">Loading...</div>
    <script src="_framework/blazor.webview.js"></script>
</body>

</html>

五、添加新的 Razor 組件

創建一個 Razor 組件。將名為“QuickGridExample”的組件添加到項目的根目錄。此組件演示一個快速網格。

可以使用 QuickGrid，需要從 NuGet 包安裝“Microsoft.AspNetCore.Components.QuickGrid”組件。添加如下代碼：

@using Microsoft.AspNetCore.Components.QuickGrid

<h1> Displaying C# Programming Books </h1>
<h3>C# Programming Books</h3>

<QuickGrid Items="@cSharpBooks">
    <PropertyColumn Title="Title" Property="@(b => b.Title)" Sortable="true" />
    <PropertyColumn Title="Author" Property="@(b => b.Author)" Sortable="true" />
    <PropertyColumn Title="Publication Year"  Property="@(b => b.PublicationYear)" Format="yyyy" Sortable="true" />
</QuickGrid>

@code {
    record CSharpBook(string Title, string Author, DateTime PublicationYear);
    private IQueryable<CSharpBook> cSharpBooks = new List<CSharpBook>
    {
        new CSharpBook("C# in Depth", "Jon Skeet", new DateTime(2019, 1, 1)),
        new CSharpBook("Effective C#: 50 Specific Ways to Improve Your C#", "Bill Wagner", new DateTime(2017, 1, 1)),
        new CSharpBook("CLR via C#", "Jeffrey Richter", new DateTime(2012, 1, 1)),
        new CSharpBook("Pro C# 7: With .NET and .NET Core", "Andrew Troelsen, Philip Japikse", new DateTime(2017, 1, 1)),
        new CSharpBook("C# Programming Yellow Book", "Rob Miles", new DateTime(2014, 1, 1)),
        new CSharpBook("Head First C#", "Andrew Stellman, Jennifer Greene", new DateTime(2013, 1, 1)),
        new CSharpBook("Programming C# 8.0: Build Cloud, Web, and Desktop Applications", "Ian Griffiths", new DateTime(2019, 1, 1)),
        new CSharpBook("C# 7.0 in a Nutshell: The Definitive Reference", "Joseph Albahari, Ben Albahari", new DateTime(2017, 1, 1)),
        new CSharpBook("Essential C# 8.0", "Mark Michaelis", new DateTime(2019, 1, 1))
    }.AsQueryable();
}

最終的文件夾結構如下所示。

六、從 XAML 窗口集成 Razor 組件

將 WPF 窗口與剛剛創建的 Blazor 組件進行映射。打開“MainWindow.xaml”文件并添加以下命名空間。

xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"

MainWindow.Xaml 中的修改

<Window x:Class="WpfBlazorApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfBlazorApp"
        xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:QuickGridExample}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
    </Grid>
</Window>

MainWindow.xaml.cs文件中添加如下代碼：

namespace WpfBlazorApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var serviceCollection = new ServiceCollection();
            serviceCollection.AddWpfBlazorWebView();
            Resources.Add("services", serviceCollection.BuildServiceProvider());
        }
    }
}

運行

運行成功，Wpf加載的html頁面

讓我們進行一些外觀更改以增強其 UI。向組件添加樣式。

<style>
    table {
        border-collapse: collapse;
        width: 100%;
        border: 2px solid #ccc;
    }

    th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    h1, h3 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
        text-align: center;
    }

    th {
        background-color: #28b463;
        color: white;
        font-weight: bold;
        font-size: 16px;
        border: none;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    th:hover {
        background-color: #45a049;
    }
</style>

再次運行項目

結論

WPF 和 Blazor 的融合開發，代表了桌面程序嵌套Web項目開發越來越容易，在某些特定的場合，混合開發帶了的優勢非常明顯。在本文中，我們探討了從設置 WPF 項目到合并 Razor 組件以及將 Razor 組件與 WPF 綁定的集成過程。學習了如何在 WPF 應用程序中呈現 HTML 內容。借助 WPF 和 Blazor，可以在混合應用開發中開辟新的領域，這將塑造跨不同平臺的用戶體驗的未來。

如果本文對你有幫助，我將非常榮幸。

如果你對WPF和Blazor混合應用開發非常熟悉或者有其他的方式開發混合應用，歡迎留言交流。

如果你喜歡我的文章，謝謝三連，點贊，關注，轉發吧！！

#春曰生活打卡季#

PF 消息傳遞簡明教程

獨立觀察員 2023 年 4 月 24 日

0、說明

參考：https://www.cnblogs.com/cdaniu/p/16852620.html

使用包：CommunityToolkit.Mvvm（8.1.0）

1、訂閱

讓需要使用消息的 ViewModel 繼承 ObservableRecipient，構造函數中設置 IsActive=true：

重寫 OnActivated () 和 OnDeactivated () 方法：

```
#region 消息處理
/// <summary>/// 注冊消息接收 /// </summary>protected override void OnActivated(){ WeakReferenceMessenger.Default.Register<MainWindowViewModel, MyMessage, string>(this, nameof(MyMessage), OnReceiveMessage);}
/// <summary>/// 收到消息時的處理方法/// </summary>/// <param name="recipient">接收者</param>/// <param name="message">消息</param>private void OnReceiveMessage(MainWindowViewModel recipient, MyMessage message){ //處理邏輯；}
/// <summary>/// 注銷消息接收/// </summary>protected override void OnDeactivated(){ base.OnDeactivated(); WeakReferenceMessenger.Default.Unregister<MyMessage, string>(this, nameof(MyMessage));}
#endregion
```
解釋：

2、發送消息
- ```
var message = new MyMessage(){ //屬性賦值,};WeakReferenceMessenger.Default.Send(message, nameof(MyMessage));
```
  3、注意事項
  主要用法就是上面兩點，還是挺簡單的，但是網上的文章卻看得人云里霧里的。這一節說一些注意事項。
  
  3.1、消息類型不要混用
  消息類應當是每個消息專用的，推薦使用 sealed 標記：
  
  3.2、訂閱要在發送之前執行
  這一條大家可能會覺得這有什么好提醒的，本來就要這樣啊。但是，實際寫的時候，還是容易發生執行到發送的邏輯時，訂閱的那部分代碼實際還沒執行，通常就是那個 ViewModel 還沒出生呢。不過這個也很好排查出來，一般出現發了消息，但是消息處理方法那里沒反應，就是這個問題了。解決方法就是讓訂閱的對象先生成出來即可，只不過有的時候這樣可能沒什么道理，大家有更好的方法，歡迎交流。
  
  就說這么多吧，感謝閱讀。
  
  原創文章，轉載請注明： 轉載自 獨立觀察員 (dlgcy.com)
  本文鏈接地址:[WPF 消息傳遞簡明教程](http://dlgcy.com/toolkit-mvvm-message/)
  關注微信公眾號 獨立觀察員博客（DLGCY_BLOG） 第一時間獲取最新文章
  
  WPF
  WPF 屬性變動后的業務處理及恢復原始值的方法
  我向 ChatGPT 討教了一下 WPF 中的行為 Behavior
  使用通用附加屬性來減少 WPF 元素自定義樣式的多余代碼
  幾十款 WPF 控件 - UI 庫，總有一款適合你
  WPF 用戶控件分享之邊上帶輸入框的圓圈
  分享一個 WPF 氣泡彈框
  WPF 表單驗證之 INotifyDataErrorlnfo 接口的使用示例
  [翻譯] WPF 中用戶控件 DataContext/Binding 和依賴屬性的問題
  OxyPlot 導出圖片及 WPF 元素導出為圖片的方法
  讓 WPF 的 RadioButton 支持再次點擊取消選中的功能
  WPF DataGrid 如何將被選中行帶到視野中
  WPF 觸屏事件后觸發鼠標事件的問題及 DataGrid 誤觸問題
  WPF DataGrid 通過自定義表頭模擬首行固定
  WPF ComboBox 使用 ResourceBinding 動態綁定資源鍵并支持語言切換
  【翻譯】WPF 中附加行為的介紹 Introduction to Attached Behaviors in WPF
  WPF 使用 Expression Design 畫圖導出及使用 Path 畫圖
  WPF MVVM 彈框之等待框
  解決 WPF 綁定集合后數據變動界面卻不更新的問題（使用 ObservableCollection）
  WPF 消息框 TextBox 綁定新數據時讓光標和滾動條跳到最下面
  真?WPF 按鈕拖動和調整大小
  WPF MVVM 模式下的彈窗
  WPF 讓一組 Button 實現 RadioButton 的當前樣式效果
  WPF 原生綁定和命令功能使用指南
  WPF 用戶控件的自定義依賴屬性在 MVVM 模式下的使用備忘
  在WPF的MVVM模式中使用OCX組件
  
  第三方庫使用
  WPF 依賴注入之 Microsoft.Extensions.DependencyInjection
  WPF 表格控件 ReoGrid 的簡單使用
  OxyPlot.WPF 公共屬性一覽
  OxyPlot.Wpf 圖表控件使用備忘

在線咨詢

上一篇：HTML個人筆記
下一篇：HTML(5) 代碼規范

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商