後續來啦：Winform/WPF中快速搭建日誌面板

繼昨天發文ASP.NET Core 視覺化記錄元件使用(閱讀文章，查看影片)後，影片下有朋友留言 “Winform 用戶端的程式能用它不?”，微信也有朋友問能否嫁接到WPF上，站長今早嘗試了，是可以的！

原理是將Winform或WPF 應用程式，宿主到ASP.NET Core Web API上，具體先來個小影片看看效果，想要程式碼直接往下面翻：

【影片佔位】

實戰步驟：

1. 建立一個 WPF 應用程式
2. 新增ASP.NET Core、Serilog支援
3. WPF 視窗中使用 Serilog
4. 完結

本文實戰開始

1. 建立一個 WPF 應用程式

使用 VS 2019，建立一個WPF 應用程式專案，命名為WPFWithLogDashboard，本文基於.NET 6搭建。

2. 新增ASP.NET Core、Serilog支援

2.1 NuGet 安裝相關 NuGet 套件

Microsoft.Extensions.Hosting要指定版本，不能高於 2.2.0:

Install-Package Microsoft.Extensions.Hosting -Version 2.2.0
Install-Package Serilog.AspNetCore
Install-Package LogDashboard

2.2 配置 Serilog 和 ASP.NET Core

開啟App.xaml.cs檔案，新增如下程式碼。仔細看，如下配置和上一篇文章 Program.cs 檔案中的配置都是差不多的，主要是配置Serilog，記得輸出記錄分隔符使用 ||。

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;
using Serilog;
using Serilog.Events;
using System;
using System.Windows;

namespace WPFWithLogDashboard
{
	/// <summary>
	/// Interaction logic for App.xaml
	/// </summary>
	public partial class App : Application
	{
		protected override void OnStartup(StartupEventArgs e)
		{
			base.OnStartup(e);

			#region Serilog配置

			string logOutputTemplate = "{Timestamp:HH:mm:ss.fff zzz} || {Level} || {SourceContext:l} || {Message} || {Exception} ||end {NewLine}";
			Log.Logger = new LoggerConfiguration()
			  .MinimumLevel.Override("Default", LogEventLevel.Information)
			  .MinimumLevel.Override("Microsoft", LogEventLevel.Error)
			  .MinimumLevel.Override("Microsoft.Hosting.Lifetime", LogEventLevel.Information)
			  .Enrich.FromLogContext()
			  .WriteTo.Console(theme: Serilog.Sinks.SystemConsole.Themes.AnsiConsoleTheme.Code)
			  .WriteTo.File($"{AppContext.BaseDirectory}Logs/Dotnet9.log", rollingInterval: RollingInterval.Day, outputTemplate: logOutputTemplate)
			  .CreateLogger();

			#endregion

			Host.CreateDefaultBuilder(e.Args)
				.UseSerilog()
				.ConfigureWebHostDefaults(webBuilder =>
				{
					webBuilder.UseStartup<Startup>();
				}).Build().RunAsync();
		}
	}
}

新增Startup.cs檔案，程式碼如下：

using LogDashboard;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Serilog;

namespace WPFWithLogDashboard
{
	public class Startup
	{
		private ILogger logger;
		public ILogger MyLoger
		{
			get
			{
				if (logger == null)
				{
					logger = Log.ForContext<Startup>();
				}
				return logger;
			}
		}

		public void ConfigureServices(IServiceCollection services)
		{
			MyLoger.Information("ConfigureServices");

			services.AddLogDashboard();
			services.AddControllers();
		}

		public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
		{
			MyLoger.Information("Configure");

			app.UseLogDashboard();

			app.UseRouting();

			app.UseEndpoints(endpoints =>
			{
				endpoints.MapControllers();
			});
		}
	}
}

在該檔案中，主要作用是新增LogDashboard元件，配置.NET CORE Web API路由。

完成上述程式碼，Serilog和LogDashboard兩個元件其實已經安裝、配置完成了:

1. 程式輸出目錄的Logs目錄已經產生了記錄檔案。
2. 瀏覽器輸入下面的連結，也能開啟LogDashboard視覺化記錄面板了。

http://localhost:5000/logdashboard

3. WPF 視窗中使用 Serilog

主視窗MainWindow.xaml新增幾個按鈕，用於模擬新增一般記錄、新增異常記錄、開啟視覺化記錄面板網頁：

<Window
  x:Class="WPFWithLogDashboard.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Windows中使用Serilog"
  Height="250"
  Width="350"
>
  <StackPanel Margin="20">
    <button
      Content="開啟記錄面板"
      Width="100"
      Height="35"
      Click="OpenLogDashboard_Click"
    />
    <button
      Content="新增一般記錄"
      Width="100"
      Height="35"
      Margin="0 20"
      Click="AddInfoLog_Click"
    />
    <button
      Content="新增異常記錄"
      Width="100"
      Height="35"
      Click="AddErrorLog_Click"
    />
  </StackPanel>
</Window>

MainWindow.xaml.cs中完成上述功能：

using Serilog;
using System.Diagnostics;
using System.Windows;

namespace WPFWithLogDashboard
{
	public partial class MainWindow : Window
	{
		private ILogger logger;
		public ILogger MyLoger
		{
			get
			{
				if (logger == null)
				{
					logger = Log.ForContext<MainWindow>();
				}
				return logger;
			}
		}

		public MainWindow()
		{
			InitializeComponent();

			MyLoger.Information("WPF視窗中記錄的記錄");
		}
		private void AddInfoLog_Click(object sender, RoutedEventArgs e)
		{
			MyLoger.Information("測試新增Info記錄");

		}

		private void AddErrorLog_Click(object sender, RoutedEventArgs e)
		{
			MyLoger.Error("測試新增異常記錄");
		}

		private void OpenLogDashboard_Click(object sender, RoutedEventArgs e)
		{
			OpenUrl("http://localhost:5000/logdashboard");
		}

		private void OpenUrl(string url)
		{
			Process.Start(new ProcessStartInfo("cmd", $"/c start {url}")
			{
				UseShellExecute = false,
				CreateNoWindow = true
			});
		}
	}
}

OK，功能已完成，本文基於WPF搭建的專案，也適用於Winform專案範本。

4. 完結

本文注重實作，如果您對ASP.NET Core不太了解，建議您查看微軟官方文件系統學習；不求甚解，直接複製文中程式碼也可。

本文是否對您有用？記得 3 連走起哦。

文中範例原始碼：https://github.com/dotnet9/TerminalMACS.ManagerForWPF/tree/master/src/Demo/WPFWithLogDashboard