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

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

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

在前一回 EP 06 提到要繼續處理 Chat、Setting 對應 Page 的畫面設計。

同樣的概念，先在 Views 當中增加兩個 Avalonia UI 的 Page 設計：

在 C# 項目找到 "Avalonia" 再選到 "" 之後填好 "OOOOPageView" 命名(其各別為 "ChatPageView"、"SettingPageView") 並按 "新增"：

完成的結果如下圖箭頭所示：

開啟 ChatPageView 與 SettingPageView：

並在其 UserControl 當中的 Content 加入區別的文字 "This is the OOOO Page"，如下圖紅框所示：

回到 ViewModels/MainWindowViewModel.cs 當中來調整 EP06 暫時透過 OOOOViewModel 所建立的 ItemTemplate 與 CurrentPage 顯示。

把原本：

private ViewModelBase? _currentPage = new ChatPageViewModel();

改成 (點 1)：

private UserControl? _currentPage = new ChatPageView() { DataContext = new ChatPageViewModel()};

(注意此處將 ChatPageViewModel 產生出來的物件直接設定給 ChatPageView 的 DataContext 屬性)

把原本：

new ListItemTemplate(typeof(ChatPageViewModel)),
new ListItemTemplate(typeof(SettingPageViewModel))

改成 (點 2)：

new ListItemTemplate(typeof(ChatPageView), typeof(ChatPageViewModel)),
new ListItemTemplate(typeof(SettingPageView), typeof(SettingPageViewModel))

如下圖紅框所示：

把原本：

var instance = Activator.CreateInstance(value.ModelType);
if (instance is not null && instance is ViewModelBase currentPageViewModel)
    CurrentPage = currentPageViewModel;

改成：

var instance = Activator.CreateInstance(value.PageViewType);
if (instance is not null && instance is UserControl currentPageView)
{
    currentPageView.DataContext = Activator.CreateInstance(value.PaggViewModelType);
    CurrentPage = currentPageView;
}

如下圖紅框所示：

把原本：

public class ListItemTemplate(Type modelType)
{
    public string Name { get; } = modelType.Name.Replace("PageViewModel", "");
    public Type ModelType { get; } = modelType;
}

改成：

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

如下圖紅框所示：

接下來就可以再次透過 "偵錯執行(F5)" 跑跑看吧！

預設為 ChatPageView 的這個 Chat 頁面，會看到顯示 "Welcome to Avalonia! This is the Chat Page" 文字。透過點選 "-" Button 展開 Pane：

在 Pane 中點選 Chat：

會看到顯示 "Welcome to Avalonia! This is the Setting Page" 文字：

目前此 Menu 的 Button 顯示 "-" 有點簡陋，而且只有文字顯示 (Menu 縮起來時文字還被切到)：

下一回，來弄得好看一點吧~~~