WinUI3 系統工具列 小圖示 示範

在 WinUI 3 中要建立系統工具列上的小圖示(icon) 不太容易，可以說是有點小麻煩，不過一樣是還好有神通廣大的大神，已經將這些步驟做完，也做成套件讓我們使用了，現在要做出系統工具列上的小圖示(icon)只要會使用套件即可，非常簡單。

安裝套件

先使用 NuGet 安裝 H.NotifyIcon.WinUI 套件，或是使用 .NET CLI 執行以下指令安裝

	
dotnet add package H.NotifyIcon.WinUI
    

安裝 CommunityToolkit.Mvvm

	
dotnet add package CommunityToolkit.Mvvm
    

顯示 Icon

首先先找一張圖片，副檔名為 icon，可以使用網路上的工具將 png 轉換為 icon，放到 Assets 資料夾中，用作系通工具列上要顯示的小圖示。本文放置的圖片檔名為 Logo.ico

    
<Window
    x:Class="WinUi3TaskbarIconTest.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:notifyIcon="using:H.NotifyIcon"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <notifyIcon:TaskbarIcon
            x:Name="TaskbarIcon"
            ToolTipText="提示文字 Ruyut"
            IconSource="/Assets/Logo.ico" />
    </StackPanel>
</Window>
    

執行後就會看到 Icon 出現在系統工具列中了(有可能會和其他的 Icon 收合在一起)

增加按鈕事件

在 MainWindow.xaml.cs 中增加一個 ShowBox 的 method ，用來測試 Icon 有被正常觸發

    
// using CommunityToolkit.Mvvm.Input;

[RelayCommand]
private void ShowBox()
{
    var newWindow = new Window();

    newWindow.Content = new TextBlock
    {
        Text = "已點擊",
        HorizontalAlignment = HorizontalAlignment.Center,
        VerticalAlignment = VerticalAlignment.Center
    };

    newWindow.AppWindow.Resize(new(400, 300));
    newWindow.Activate();
}
    

其中上面套上了 RelayCommand 這個 Attribute ，就是我們第二個套件(CommunityToolkit.Mvvm) 裡的內容，會自動幫我們建立 ShowBoxCommand 事件(method 名稱後面加上 Command)，方便我們綁定按鈕事件。

綁定的方式如下：(滑鼠左鍵點擊一次觸發)

    
<notifyIcon:TaskbarIcon
    x:Name="TaskbarIcon"
    ToolTipText="提示文字 Ruyut"
    IconSource="/Assets/Logo.ico"
    LeftClickCommand="{x:Bind ShowBoxCommand}" />
    

如果不想要在 XAML 中綁定，也可以使用 C# 來進行事件綁定

    
TaskbarIcon.LeftClickCommand = new RelayCommand(ShowBox);
    

顯示/隱藏視窗

通常使用系統工具列的 Icon 就是主畫面可能會隱藏，在背景執行，使用者可以點選 Icon 快速使用常用功能或是將視窗(主畫面)顯示，那該如何顯示和隱藏視窗呢？

先到 App.xaml.cs 修改已有的程式碼，公開 Window 方便存取：

    
protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
{
    MainWindows = new MainWindow();
    MainWindows.Activate();
}

public static Window MainWindows;
    

建立切換視窗顯示和隱藏的方法：

    
private void ShowOrHideWindow()
{
    var window = App.MainWindows;
    if (window == null) return;

    if (window.Visible) window.Hide();
    else window.Show();
}
    

這裡就使用 C# 綁定滑鼠左鍵的點擊事件：

    
public MainWindow()
{
    this.InitializeComponent();
    TaskbarIcon.LeftClickCommand = new RelayCommand(ShowOrHideWindow);
}
    

參考資料：
GitHub - HavenDV/H.NotifyIcon
GitHub - microsoft / microsoft-ui-xaml - How to minimize WinUI app on System Tray?