Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的 桌面 應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP08。

在前一回 EP 07 Menu 的 Button 顯示 "-" 有點簡陋，而且只有文字顯示 (Menu 縮起來時文字還會被切到)。

說要來弄得好看一點，是會怎麼個好看法呢？目前的想法就會是朝 Visual Studio Code 的 UI 概念來模仿囉！

概念如下：

所以來幫 TopAOAIConnector App 添加 Icon 們囉！

而這邊要先來介紹一下 Fluent UI：

是微軟當前的 UI 的設計系統，在 WinUI 3 的相關 UI 框架已經被大量採用，在 Windows 11 的介面大部分也都是依照這個 UI 設計系統。如果對 WinUI 3 的 UI 框架有興趣可以參考一下 WinUI 3 Gallery 這個 App：

如果真要類比就是 Google 的 Material Design；Apple 的 HIG，但是 Microsoft 的 Fluent Design 鮮少有人特別會提就是😏😏😏

那在 Fluent Design 當中在探討 UI System 時會運用的 Icon 就稱為 Fluent UI System Icons，不一定是要 表列的這些 Icons 才算是 Fluent UI System Icons，只要看倌有心都可以自己設計符合 Fluent Design 理念的 Icons：

講了以上這麼多，並沒有要探討怎設計 Fluent UI System Icons 只有用簡單的用微軟已經設計好的 Icons😊

看一下 FluentIcons.Avalonia ，看來 TopAOAIConnector App 中安裝 Nuget 套件來使用應該是最簡單輕鬆的。

在 TopAOAIConnector App 專案中打開 Nuget 套件管理員，在瀏覽分頁搜尋 "FluentIcons.Avalonia" 就可以安裝完成：

打開 Views/MainWindow.axaml 編輯一下 XAML。

首先在 XAML 的 Window 宣告內加入 XAML 的 namespace 引用，如下圖紅框：

xmlns:fluenticons="using:FluentIcons.Avalonia"

找到先前撰寫 SplitView.Pane 內部的 Button 標記，置換成如下寫法：

<Button Width="38" Command="{Binding MenuButtonCommand}">
    <fluenticons:SymbolIcon FontSize="20" IconVariant="Regular" Symbol="Navigation" />
</Button>

(此處的 Symbol 值為 "Navigation" 為點1)

找到先前撰寫 ListBox 的 DataTemplate 標記中的 StackPanel，加入如下標記：

<fluenticons:SymbolIcon FontSize="20" IconVariant="Regular" Symbol="{Binding Icon}" />

上述變動結果如下圖紅框所示(綠線處是稍微調整一下選單縮起時的寬度，更符合 Icon 大小的顯示)：

打開 ViewModels/MainWindowViewModel.cs 找到先前建立的 ListItemTemplate 類別，調整其類別設計如下：

public class ListItemTemplate(string icon, Type pageViewType, Type pageViewModelType)
{
    public string Icon { get; } = icon;
    public string Name { get; } = pageViewType.Name.Replace("PageView", "");
    public Type PageViewType { get; } = pageViewType;
    public Type PaggViewModelType { get; } = pageViewModelType;
}

上述變動其實是增加了 Icon 屬性的設計，並且透由建構是直接傳入要設定的值，結果如下圖紅框所示：

再找到 MainWindowViewModel 當中 ObservableCollection<ListItemTemplate> Items 的集合設定，讓建立 ListItemTemplate 物件時能夠呼叫正確的建構方法：

new ListItemTemplate("Chat", typeof(ChatPageView), typeof(ChatPageViewModel)),
new ListItemTemplate("Settings", typeof(SettingPageView), typeof(SettingPageViewModel))

(此處的 string 值為 "Chat" 為點 2 跟 "Settings" 為點 3)

上述變動結果如下圖紅框所示：

完成後就來 "執行並偵錯(F5)"，出現的畫面如下而 Icon 的顯示如紅框：

這樣一來就好看多了😅😅😅

喔~~~

上述文中寫到的點 1 (Navigation)、點2 (Chat)、點3 (Settings) 意思為所使用的 Fluent UI System Icons 中所列出的 Regular 圖示名稱。

那~~~本回就先介紹到這吧！

下回見😉😉😉