UWP程序用多頁面實現應用實例多開
Windows 10 IoT ARM64平臺下，UWP應用和MFC程序不一樣，同時只能打開一個應用實例。以串口程序為例，如果用戶希望同時打開多個應用實例，一個應用實例打開串口1，一個應用實例打開串口2，那么我們可以加載多個頁面，在各個頁面分別加載功能模塊，實現程序功能模塊多開。
本文以UWP串口例程為例，介紹如何用代碼實現同時打開多個串口模塊頁面，進行測試。
1、創建UWP工程
1. 打開visual studio 2022，點擊“創建新項目”。
2. 選擇篩選條件，語言C++，平臺選擇Windows，應用類型選擇UWP。
3. 選擇“空白應用”，本文以C++/CX為例。
2、導入需要多開的功能模塊頁面
1. 創建工程后，右鍵點擊工程->添加->新建項。
2. 選擇XAML空白頁，給頁面命名為SerialPage.xaml，點擊添加。
3. 在工程中可以看到添加的頁面SerialPage，將之前寫好的UWP串口程序代碼COPY過來（參考文章《UWP串口程序開發》），把串口程序的xaml內容拷貝到SerialPage.xaml中，把代碼文件.xaml.h和.xaml.cpp的內容也拷貝到對應文件SerialPage.xaml.h和SerialPage.xaml.cpp中。如果原UWP程序頁面名稱（默認為MainPage）和當前工程名稱（SerialPage）不一樣，注意全部替換一下。
4. 雙擊頁面SerialPage.xaml，檢查下是否添加成功。編譯一下，確認代碼都正確COPY過來了。
3、通過Navigate加載新頁面
UWP中頁面Frame的概念，類似MFC中的窗口Dialog，但功能更強大些。主頁面可以打開新的子頁面，頁面本身也可以執行跳轉，回退操作。頁面的回收由系統負責，當沒有Content指向頁面后，頁面自動被回收
在主頁面中添加一個按鈕，按鈕中執行代碼。
Windows::UI::Xaml::Controls::Frame^ frame= new ref new Windows::UI::Xaml::Controls::Frame(); frame->Navigate(TypeName(SerialPage::typeid));
設置新頁面為當前操作頁面。
Window.Current.Content = frame; Window.Current.Activate();
每點擊一次按鈕，就可以加載一個新的SerialPage頁面了。
4、用導航控件SplitView管理多窗口
為了便于管理打開的新頁面，能在它們之間隨意切換，可以使用SplitView控件來實現。SplitView由一個導航區域和一個頁面區域組成，可以在導航區域Panel中添加不同按鈕，在點擊后，在頁面區域Content中顯示對應的頁面。根據需求，可以設置導航區域大小，是否自動隱藏等。
1. 在主頁面中添加一個SplitView控件，命名為SplitViewMain。在它的Pane中可以用一個StackPanel來裝按鈕，給Content命名為FrameMain，在里面隨意加一段文字。
<SplitView x:Name="SplitViewMain" DisplayMode="Inline" IsPaneOpen="True" > <SplitView.Pane> <StackPanel x:Name="BtnContainer"> </StackPanel> </SplitView.Pane> <SplitView.Content> <Frame x:Name="FrameMain"> <TextBlock Text="未添加測試接口" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Frame> </SplitView.Content> </SplitView>
2. 在Pane中添加幾個按鈕，可以加到StackPanel中，讓StackPanel來自動排列。
<SplitView.Pane> <StackPanel x:Name="BtnContainer"> <Button Content="Button1" Click="Button1_Click"/> <Button Content="Button2" Click="Button2_Click"/> </StackPanel> </SplitView.Pane>
3. 在按鈕中加入代碼
void SPT::MainPage:: Button1_Click (Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
if (m_frame[0] == nullptr)
{
m_frame[0] = ref new Windows::UI::Xaml::Controls::Frame();
m_frame[0]->Navigate(TypeName(SerialPage::typeid)); //指定SerialPage
}
FrameMain = m_frame[0];
SplitViewMain->Content = FrameMain;
}這樣，就可以通過點擊不同按鈕，進入對應的頁面了
5、動態管理導航控件SplitView內導航按鈕
有時候，如果導航按鈕的數量不確定，希望根據實際情況添加或刪除導航按鈕。本文例程中，每點擊一次添加按鈕，便添加一個串口測試頁面，做法如下。
1. 在主頁面中添加一個按鈕，點擊一次，便在SplitView的Pane里加入一個按鈕，給這個按鈕設置參數Tag，便于區分不同按鈕。給按鈕綁定點擊響應函數OnClick。
void SPT::MainPage::BtnSerial_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
Button^ newButton;
newButton = ref new Button;
m_Count++;
newButton->Tag = m_Count;
newButton->Click += ref new Windows::UI::Xaml::RoutedEventHandler(this, &SPT::MainPage::OnClick);
BtnContainer->Children->Append(newButton);
m_frame[m_Count] = ref new Windows::UI::Xaml::Controls::Frame();
m_frame[m_Count]->Navigate(TypeName(SerialPage::typeid));
FrameMain = m_frame[m_Count];
SplitViewMain->Content = FrameMain;
}2. 在按鈕的響應函數中讀出按鈕參數，根據不同的參數決定如何處理，加載哪個頁面。
void SPT::MainPage::OnClick(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
Button^ clickButton = safe_cast<Button^>(sender);
int id = safe_cast<int>(clickButton->Tag);
if (m_frame[id] == nullptr)
{
return;
}
FrameMain = m_frame[id];
SplitViewMain->Content = FrameMain;
}6、主頁面與導航打開的新頁面之間數據通信
目前導航頁面和加載的子頁面相對獨立，很多時候主界面需要傳遞數據給子頁面，便于子頁面初始化，甚至需要給子頁面提供函數接口。子頁面退出時也需要回調函數通知主頁面，并返回處理后的數據。
本文串口例程中
1. 設置一個數據結構，把所有主頁面要傳輸的數據打包到這個數據接口中。文本例程中打包數據包括子頁面ID，和一個回調接口。
public ref class PageData sealed : public Platform::Object
{
public:
PageData(int initValue, Windows::Foundation::EventHandler<int>^ callback)
: _initValue(initValue), _exitCallback(callback){}
property int InitValue {int get() { return _initValue; }}
property Windows::Foundation::EventHandler<int>^ ExitCallback {
Windows::Foundation::EventHandler<int>^ get() { return _exitCallback; }
}
private:
int _initValue;
Windows::Foundation::EventHandler<int>^ _exitCallback;
};2. 在主頁面加載子頁面時，將打包數據一起傳過去，修改Navigate調用。
m_frame[i] = ref new Windows::UI::Xaml::Controls::Frame(); auto exitHandler = ref new Windows::Foundation::EventHandler<int>( this, &MainPage::OnPageExit); auto data = ref new PageData(i, exitHandler); m_frame[i]->Navigate(TypeName(SerialPage::typeid), data); FrameMain = m_frame[i]; SplitViewMain->Content = FrameMain;
3. 子頁面SerialPage重載OnNavigatedTo函數，添加初始化代碼
virtual void OnNavigatedTo(Windows::UI::Xaml::Navigation::NavigationEventArgs^ e) override;
Windows::Foundation::EventHandler<int>^ m_ExitCallback;
void SerialPage::OnNavigatedTo(NavigationEventArgs^ e)
{
auto data = dynamic_cast<PageData^>(e->Parameter);
if (data != nullptr)
{
m_id = data->InitValue;
m_ExitCallback = data->ExitCallback;
}
}4. 子頁面退出時調用回調函數，傳回參數頁面ID
void SPT::SerialPage::BtnExit_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
try
{
CancelReadTask();
ClosePort();
}
catch (Platform::Exception^ ex)
{
}
if (Frame->CanGoBack)
{
Frame->GoBack();
}
Frame->Content = nullptr;
if (m_ExitCallback != nullptr)
{
m_ExitCallback->Invoke(this, m_id);
}
}5. 主頁面處理回調函數
void SPT::MainPage::OnPageExit(Platform::Object^ sender, int id)
{
for (int i = 0; i < BtnContainer->Children->Size; ++i)
{
if (Button^ btn = dynamic_cast<Button^>(BtnContainer->Children->GetAt(i)))
{
if (btn->Tag != nullptr && safe_cast<int>(btn->Tag) == id)
{
BtnContainer->Children->RemoveAt(i);
return;
}
}
}
} 7、界面優化
調整控件的邊界Margin，用LinearGradientBrush設置頁面及控件背景色，在代碼中適當調整控件字體樣式，使得界面滿足設計需求。
8、調試
打開Win10 IoT板子上的調試助手。
選擇工程平臺為ARM64，編譯運行，示例如下。
需要程序源碼可以聯系英創工程師獲得。