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

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

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

在 EP 18 已經有設計了 Combox 可供選擇不同的系統角色扮演 Prompt，但目前在選擇後並沒有任何作用。

在本回就來看看該怎麼處理吧~~~

Avalonia UI 的 Combox 本身有設計 SelectionChanged 的事件可供註冊使用，但為了保持 MVVM 的處理，這邊要來安裝一個 "Avalonia.Xaml.Behaviors" 套件，讓透過使用 "XAML Behaviors" 的規劃達到與 UI 互動的效果。

在 NuGet 套件管理員當中搜尋與安裝，如下圖紅框所示：

在專案當中安裝完成：

接著，找到 Views/ChatPageView.axmal 當中的 ComboBox 標記，在其標記當中加入以下標記：

<Interaction.Behaviors>
    <ValueChangedTriggerBehavior Binding="{Binding SelectedSystemRole}">
        <InvokeCommandAction Command="{Binding SelectedCommand}" />
    </ValueChangedTriggerBehavior>
</Interaction.Behaviors>

如下圖紅框所示：

其中的 InvokCommandAction 所 Binding 的 Command 則是前一回 EP 17 中在 ChatPageViewModel 所設計的 Selected 方法，透過 RelayCommand 的擴充而成為 SelectedCommand。

所以上述的 "Interaction.Behaviors" 概念上就是若 SelectedSystemRole 的值有變化時則會執行 SelectedCommand。

接著可以來偵錯並執行(F5)看看：

選取 Chat 當中的 ComboBox 選項。

變換所選取的項目時，Visual Studio 偵錯時的輸出窗格，顯示 "Selected..."。

選取 Chat 當中的 ComboBox 選項。

變換所選取的項目時，Visual Studio 偵錯時的輸出窗格，顯示 "Selected..."。

而在 ViewModels 當中的 ChatPageViewModel 找到原本設計的 Selected 方法，並再加入下列程式碼：

ChatText = $"Welcome to TopAOAIConnector!{Environment.NewLine}";

如下圖紅框所示：

配合變換不同的系統角色扮演時，就會把先前的對話資訊從 Chat 頁面 UI 上移除。

若要再擴充 UI 讓 Chat 的系統角色扮演可以自行自訂的話也不是不行。

但這就看要如何搭配設計囉~~~