隨著 Windows 11 的正式發(fā)布,Windows 的 UI 以及交互又一次迎來了巨變,相比于 Windows 10 基于 Windows 8.X 的「撥亂反正」,Windows 11 則更像是 Windows 系統(tǒng)最大的一次的交互創(chuàng)新,最引人注目的首先就是開始菜單:它打破了以往 Windows 開始菜單的使用邏輯,程序列表被進一步的隱藏到更深的二級菜單中,原先在 Windows 10 上的應用磁貼則在 Windows 11 演變成了開始屏幕,延展到任務欄中也無法像以往那樣直接將桌面快捷方式拖拽添加到快速啟動欄。
這些變化使得很多習慣于 Windows 10 開始菜單的用戶在 Windows 11 中變得不習慣,也正是這樣的使用需求催生出了多款 Windows 11 開始菜單增強工具,都在不同維度上解決了系統(tǒng)原生開始菜單的使用痛點。
我也在 Windows 11 的使用過程中體驗了三款第三方開始菜單增強工具: StartAllBack、Start11 以及 Start Menu X,它們除了對于 Windows 11 開始菜單方面的增強功能,還在任務欄、搜索、資源管理器等功能上有諸多特性和優(yōu)化。如果你恰好希望讓 Windows 11 上開始菜單以及相關組件更好用,那么這篇文章或許可以給你提供一些參考。
既然是第三方的開始菜單增強工具,那么最為核心的就是改善開始菜單的樣式。很多不習慣 Windows 11 開始菜單的用戶,通常也并非是對系統(tǒng)本身感到不好用,而是覺得新系統(tǒng)的開始菜單不符合自己以往的使用習慣,因此對于第三方的開始菜單增強工具,開始菜單本身的樣式和功能是否能符合老系統(tǒng)用戶的使用習慣就變得至關重要。
Start11 的風格選擇可以說最為豐富,如果你的系統(tǒng)是 Windows 11,那么安裝的時候除了 Windows 11 風格之外,還有 Windows 10 風格、Windows 7 風格以及現代風格。如果選擇了某個系統(tǒng)風格的開始菜單,基本上就是該系統(tǒng)風格原生開始菜單的基礎上進行進一步的調整。
在選擇好開始菜單風格樣式之后,你可以進一步配置開始菜單內的功能,如果選擇了 Windows 11 風格樣式的開始菜單,那么你可以讓 Windows 11 的開始菜單底部加入 Windows 10 開始菜單中的各種「快捷方式」,比如文檔、下載文件夾、音樂文件夾、個人文件夾、控制面板、設置、運行等等。
對于大部分 Windows 11 新用戶不那么喜歡的「推薦的項目」,在 Start11 的開始菜單中也可以進行進一步的調整,比如你可以選擇「顯示最近添加的應用」或者「顯示最近的文件」。另外如果不喜歡原來 Windows 11 菜單中將應用列表藏到第二級菜單的做法,也可以勾上默認直接顯示所有程序的列表。
視覺外觀上,Start11 可以自定義的范圍會更多,是否可以自動設置顏色自然不必說,包括菜單的字體尺寸、開始菜單透明都可以進行調整。視覺特效上也可以進行細微調整,比如你可以選擇是否讓開始菜單和任務欄分離,是否開啟動畫,以及是否將菜單元素設置成圓角等等。
當然如果你完全不能接受 Windows 11 形式的開始菜單,也可以夢回 Windows 10 的開始菜單,將開始按鈕改回熟悉的左下角,再選擇「Windows 10 風格」就可以。幾乎不用做任何調整,原本的 Windows 11 上「已固定」的應用自動變回了 Windows 10 開始菜單中的磁貼。
甚至更極端的你可以將開始菜單改成 Windows 7 的樣式,你會發(fā)現他就像是原來的 Windows 7 開始菜單套上了亞克力的視覺效果。
StartAllBack 的開始菜單樣式選擇上完全拋棄了 Windows 11 的開始菜單,無論是在開始選擇「正宗 11」「相識 10」或者「重制 7」,其實開始菜單上都是更接近 Windows 7 這種經典開始菜單的樣式。如果當前系統(tǒng)是 Windows 11 且開始按鈕是底部居中,在完成 StartAllBack 初始化后也會自動將其放在左下角原先 Windows 10 開始按鈕的位置。
實際上即便是選擇了「正宗 11」,其開始菜單也完全不正宗——只要勾選上「啟動增強型經典開始菜單」后,其開始菜單的樣式就會和 Windows 7 的開始菜單幾乎一個結構(可能開發(fā)者考慮的就是直接回到用戶最熟悉的開始菜單中),只不過更像是在當前的 Windows 11 設計下弄出了亞克力的效果。
所以 StartAllBack 倒是更像是給習慣 Windows 10 或者 Windows 7 開始菜單用戶準備的老版本復刻,尤其是當你選擇「重制 7」的時候,會包含任務欄以及開始按鈕都會改成最初 Windows 7 的樣式,甚至還可以呈現出Windows 7 經典的玻璃透明效果。
和前面的兩者相比,Start Menu X 更像是重新構建了一個開始菜單——無論是默認樣式、Classic Start Menu 還是 Start Menu X 都和 Windows 開始菜單差距甚遠,反而更像是基于更早期的 Windows 開始菜單所逐步發(fā)展過來的開始菜單樣式。但即便如此,這種近乎原創(chuàng)的設計有著便捷之處——最為重要的程序菜單被放在第一層展示,對于習慣在開始菜單中運行程序的朋友會覺得很方便。
但要說到更多的細節(jié)調整可能就顯得乏善可陳。雖然菜單可以更換皮膚,但是大體的結構并沒有任何可以調整的空間,最大的可調整性就是可以勾選哪些按鈕可以出現在開始菜單中。
如果說開始菜單是的 Windows 使用體驗的核心,那么 Windows 系統(tǒng)體驗的靈魂可能就是任務欄,但原生的 Windows 11 任務欄卻顯得非常雞肋——如果你右鍵任務欄會發(fā)現只有一個選項「任務欄設置」,以至于以往熟悉調出任務管理器的方法又變回了 ctrl + alt + del。而這三款開始菜單替換工具都對任務欄進行了一定程度的調整,讓你在使用系統(tǒng)系統(tǒng)時可以更方便。
Start11 的任務欄設置更偏向實用性,也可以對外觀進行調整,比如模糊周圍的壁紙、自動設置顏色、調整透明度,也可以定義自定義的紋理等等。功能上最為實用的當屬可以設定任務欄的右鍵菜單,比如在右鍵點擊開始按鈕時可以顯示 Win + X 菜單、并且可以使用 Windows 10 風格的任務欄右鍵菜單來替換現有的菜單,這樣就可以像以往那樣快速地在任務欄調出任務管理器了。
因為 StartAllBack 定位為復刻之前 Windows 7 的使用體驗,因此和開始菜單配套的任務欄也在其復刻范圍內,這尤其體現在選擇「相識 10 」或者 「重制 7」這兩個主題之后。尤其是任務欄增強中還加入了原先 Windows 7 的一些處理任務標題的方式,例如你可以選擇是否合并任務欄按鈕、是否分割任務欄,以及是否啟用動態(tài)效果等等。
同時在開啟 StartAllBack 的增強任務欄之后,任務欄右鍵菜單也會和選擇的主題相對應,比如說 Windows 7 的樣式下,任務欄右鍵菜單中就和原來的 Windows 7 下的任務欄右鍵菜單內容基本一致。
除了以上的開始菜單和任務欄,部分開始菜單工具還支持一些其他組件的調整,包括搜索、文件資源管理器等,這些設計也在一定程度上改善了 Windows 11 其他方面的使用體驗。
Windows 的搜索向來都比較雞肋,因此對于不少 Windows 用戶而言,往往都會使用第三方搜索工具來進行系統(tǒng)內的文件 / 應用 / 設置搜索。Start11 其實也提供了一個搜索組件來替換掉 Windows 搜索,并且支持顯示搜索結果篩選圖標,也可以同時搜索文件內容和文件名。
使用起來其實使用后不難發(fā)現,Start11 搜索其實只是替換掉了原來開始菜單的搜索入口,而 Windows 11 其實在任務欄中還有單獨的搜索入口,但 Start11 并不會將這個入口也進行替換,所以如果你的搜索入口是 Windows 11 單獨的搜索入口,那么 Start11 的搜索并不那么直觀好用。
既然主打復刻老系統(tǒng)的體驗,那么除了開始菜單、任務欄之外,系統(tǒng)的資源管理器樣式自然也最好可以實現復刻了,StartAllBack 也確實提供了不同的資源管理器樣式。
默認情況下選擇了什么系統(tǒng)就會自動選擇對應系統(tǒng)的資源管理器樣式,當然也可以根據需要自由選擇,甚至也可以關掉開始菜單增強和任務欄增強,只是將原本 Windows 11 的資源管理器改成 Windows 10 的 Ribbon 樣式的資源管理器。
其他的用戶界面增強實用性也很高,比如勾選了「經典上下文菜單」,右鍵菜單就會恢復成 Windows 10 傳統(tǒng)右鍵菜單,勾選「選中項目背景顯示使用強調色」則可以進一步的突出選中的項目。
總體而言,如果你希望優(yōu)化當前 Windows 11 的開始菜單以及相關的系統(tǒng)使用體驗,那么基于原系統(tǒng)開始菜單做增強的 Start11 可能是你的首選。而如果你希望開始菜單可以恢復成 Windows 10 或者 Windows 7 的樣式,那么 StartAllBack 則可以完全滿足你的需要,至于 Start Menu X 則更像是完全脫離原系統(tǒng)開始菜單的工具,適合對于只希望開始菜單就是用來運行程序的用戶。
如果你正在考慮選擇第三方的開始菜單增強工具,希望這次橫評可以給你帶來啟發(fā)。
“Hello World”是程序員初學的一句編程套用語。在這節(jié)中,我們將以C++和XAML 為例,開發(fā)一個含有“Hello World”的通用應用。
與常規(guī)情況的差異
如果你習慣使用 C++ 編寫 Windows 桌面程序,你可能會發(fā)現 Windows 應用商店應用和 Windows Phone 應用編程的某些方面與此類似,但在其他一些方面則需要了解更多知識。
相同之處有:
你可以使用 STL、CRT(有某些例外)以及任何其他 C++ 庫,只要代碼不嘗試調用不可從 Windows 運行時環(huán)境訪問的 Windows 函數。
如果你習慣可視設計器,你仍然可以使用內置于 Microsoft Visual Studio 的設計器,或者你可以使用功能更加完整的 Blend for Visual Studio。如果你習慣手動編寫 UI 代碼,則可以手動編寫 XAML 的代碼。
你仍然可以創(chuàng)建使用 Windows 操作系統(tǒng)類型和你自己的自定義類型的應用。
你仍然可以使用 Visual Studio 調試器、探查器和其他開發(fā)工具。
你仍然可以通過使用 Visual C++ 編譯器創(chuàng)建用來編譯原生機器代碼的應用。使用 C++編寫的Windows 應用商店應用不能在托管的運行時環(huán)境中執(zhí)行。
Windows 應用商店應用和 Universal Windows App 的設計準則與桌面應用的設計準則有很大差別。設計的重點不再是窗口邊框、標簽和對話框等。內容才是最重要的。出色的Universal Windows App 從最開始的規(guī)劃階段就嚴格遵循這些準則。
你將使用 XAML 定義整個 UI。在 Universal Windows App 中,UI 與核心程序邏輯之間的分離遠比在 MFC 或 Win32 應用中更為清晰。你在代碼文件中處理行為的同時,其他用戶可以在 XAML 文件中處理 UI 的外觀。
盡管在 Windows 設備上 Win32 仍然可用于某些功能,但你將主要面向一個易于導航且面向對象的全新 API(即 Windows 運行時)進行編程。
使用 C++/CX 使用和創(chuàng)建 Windows 運行時對象。C++/CX 支持 C++ 異常處理、代理、事件和動態(tài)創(chuàng)建的對象的自動引用計數。使用 C++/CX 時,基礎 COM 和 Windows 體系結構的詳細信息從應用代碼中隱藏。有關詳細信息,請參閱 C++/CX 語言參考。
你的應用將編譯為一個程序包,其中還包含有關你的應用所包含的類型、它使用的資源以及它需要的功能(文件訪問、Internet 訪問和相機訪問等)的元數據。
在 Windows 應用商店和 Windows Phone 應用商店中,你的應用通過一個驗證流程確定為安全之后,即可面向無數潛在客戶發(fā)布。
我們的第一個應用是“Hello World”,它演示了交互性、布局和樣式的一些基本功能。我們將通過 Universal Windows App 項目模板創(chuàng)建應用。如果你之前開發(fā)過 Windows 8.1和 Windows Phone 8.1 應用,你可能還記得在 Visual Studio 中,你必須具有三個項目:一個用于 Windows App,一個用于手機應用,另一個用于共享代碼。Windows 10 UniversalWindows Platform (UAP) 使只有一個項目成為可能,該項目可在所有設備上運行,包括運行Windows 10 的臺式機和筆記本電腦,平板電腦、手機等設備,等等。
如何使用 Visual Studio 2015 創(chuàng)建 Universal Windows App。
如何了解創(chuàng)建的項目和文件。
如何了解 Visual C++ 組件擴展中的擴展以及何時使用它們。
首先,在 Visual Studio 中創(chuàng)建一個解決方案(圖):
創(chuàng)建空白通用應用
1. 在 Visual Studio 中,依次選擇“文件”>“新建”>“項目”。
2. 在“ 新 建 項 目” 對 話 框 的 左 側 窗 格 中,展 開“ 已 安裝”>“VisualC++”>“Windows”>“Windows 通用”。
3. 在中心窗格中,選擇“空白應用 (Windows 通用)”。
4. 輸入項目名稱。我們將其命名為 HelloWorld。
5. 選擇“確定”按鈕。已創(chuàng)建項目文件。在繼續(xù)之前,讓我們看一下解決方案的內容(圖)。、
解決方案的內容
項目文件中的每個 .xaml 文件都在同一個文件夾有對應的 .xaml.h 文件和 .xaml.cpp 文件,在“生成的文件”文件夾中有 .g 文件和 .g.hpp 文件。修改XAML 文件以創(chuàng)建 UI 元素,并將其連接到數據源 (DataBinding)。修改 .h 和.cpp 文件以為事件處理程序添加自定義邏輯。自動生成的文件表示 XAML 標記到 C++ 的轉換。不要修改這些文件,但是請研究它們以更好地了解代碼隱藏的工作原理。基本上,生成的文件包含XAML 根元素的部分類定義;此類是你在 *.xaml.h 和 .cpp 文件中修改的相同類。生成的文件將 XAML UI 子元素聲明為類成員,以便你可以在你編寫的代上圖解決方案的內容碼中引用它們。在構建時,生成的代碼和你的代碼合并為完整的類定義,然后進行編譯。
App.xaml、App.xaml.h、App.xaml.cpp:代表應用程序對象,這是應用的入口點。App.
xaml 不包含特定于頁面的 UI 標記,但是你可以添加希望可以從任何頁面訪問的 UI 樣式和其他元素。代碼隱藏文件包含 OnLaunched 和OnSuspending 事件的處理程序。通常,你在此處添加自定義代碼以應用啟動時初始化應用并在它掛起或終止時執(zhí)行清理。
MainPage.xaml、MainPage.xaml.h、MainPage.xaml.cpp:包含應用中的默認“開始”
頁面的 XAML 標記和代碼隱藏。它沒有導航支持或內置控件。
pch.h, pch.cpp:預編譯標頭文件和在你的項目中包含它的文件。在 pch.h 中,你可以在解決方案中包含任何不經常更改且包含在其他文件中的標頭。
package.appxmanifest:描述應用所需的設備功能、應用版本信息以及其他元數據的XML 文件。要在“清單設計器”中打開此文件,只需右鍵單擊它。
HelloWorld.Windows_TemporaryKey.pfx:在 Visual Studio 中,支持在此計算機上進行應用部署的密鑰。
如果檢查已共享項目的 App.xaml.h 和 App.xaml.cpp 中以及每個特定于平臺的項目的MainPage.xaml.h 和 .cpp 中的代碼,你將注意到大部分 C++ 代碼看起來都很熟悉。但是,如果你不熟悉 Windows RT 應用,或者你使用過 C++/CLI,某些語法元素可能不那么熟悉。
以下是你將在 C++/CX 中看到的最常見的非標準語法元素:
幾乎所有 Windows 運行時類,包括 Windows API--XAML 控件中的所有類型、應用中的頁面、應用類本身,所有設備和網絡對象、所有容器類型,都聲明為 ref class。(一些Windows 類型是 value class 或 value struct)。引用類可從任何語言使用。在 C++ 中,這些類型的生存期由自動引用計數管理(非垃圾集合),以便你從來不會明確地刪除這些對象。
你也可以創(chuàng)建自己的引用類。
namespace HelloWorld
public ref class MainPage sealed
{
public:
MainPage();
...
};
}
所有 Windows 運行時類型必須在命名空間中進行聲明,而且與 ISO C++ 中不同,這些類型本身具有輔助功能修改器。public 修改器使類對命名空間之外的 Windows 運行時組件可見。sealed 關鍵字表示該類無法用作基類。幾乎已密封所有引用類;不廣泛支持類繼承,因為 Javascript 不理解它。
你通過使用 ^(乘冪號)運算符聲明引用類的變量,并且使用引用新關鍵字實例化該對象。
然后你使用 -> 運算符訪問對象的實例方法,就像 C++ 指針一樣。使用 :: 運算符訪問靜態(tài)方法,就像 ISO C++ 中一樣。
在以下代碼中,我們使用完全限定的名稱來實例化對象,并使用 -> 運算符調用實例方法。
Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapImage =ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();bitmapImage->SetSource(fileStream);通常,在 .cpp 文件中,我們將添加 using namespace Windows::UI::Xaml::Media::Imaging 指令和自動關鍵字,因此相同的代碼看似如下:
auto bitmapImage = ref new BitmapImage();bitmapImage->SetSource(fileStream);屬性引用類可以具有屬性,和在托管的語言中一樣,這些屬性是對使用代碼顯示為字段的特殊成員函數。
public ref class SaveStateEventArgs sealed{public:
// Declare the property
property Windows::Foundation::Collections::IMap<Platform::String^, Platform::-Object^>^ PageStateform::Object^>^ get();{
Windows::Foundation::Collections::IMap<Platform::String^, Plat-}
...
};
...
// consume the property like a public fieldvoid PhotoPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e){if (mruToken != nullptr && !mruToken->IsEmpty()){e->PageState->Insert(“mruToken”, mruToken);}
}
和在托管語言中一樣,代理是包裝帶有特定簽名的函數的引用類型。它們經常與事件和事件處理程序一同使用// Delegate declaration (within namespace scope)public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);// Event declaration (class scope)public ref class NavigationHelper sealed{
public:
event LoadStateEventHandler^ LoadState;
};
// Create the event handler in consuming classMainPage::MainPage(){auto navigationHelper = ref new Common::NavigationHelper(this);navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);}
讓我們來向應用添加一些內容。
步驟 1:修改你的起始頁
在“解決方案資源管理器”中,打開 MainPage.xaml。
通過向根 Grid 添加以下 XAML 來為 UI 創(chuàng)建控件,緊挨在其結束標記之前。它包含StackPanel,后者具有一個詢問用戶名的 TextBlock、一個接受用戶名的 TextBox 元素、一個 Button 和其他 TextBlock 元素。
<StackPanel Margin=”120,30,0,0”>
<TextBlock HorizontalAlignment=”Left” Text=”Hello World” FontSize=”36”/>
<TextBlock Text=”What’s your name?”/>
<StackPanel Orientation=”Horizontal” Margin=”0,20,0,20”>
<TextBox x:Name=”nameInput” Width=”300” HorizontalAlignment=”Left”/>
<Button Content=”Say "Hello"”/>
</StackPanel>
<TextBlock x:Name=”greetingOutput”/>
</StackPanel>
我們將在導航、布局和視圖文章中談論有關 XAML 布局的詳細信息。
此時,你已創(chuàng)建了一個非常基本的 Windows 應用。若要查看 Windows 應用商店應用的外觀,請按 F5,在調試模式下構建、部署并運行該應用。
首先會出現默認的初始屏幕。它有一個圖像 (Assets\SplashScreen.scale-100.png) 以及在應用的清單文件中指定的背景色。若要了解如何自定義初始屏幕,請參閱添加初始屏幕。
當初始屏幕消失時,將顯示你的應用。它顯示黑屏和標題"My Application"。
沒有關閉應用的按鈕或命令。盡管你可以使用關閉手勢或 Alt+F4 來關閉它,但是通常不關閉 Windows 應用商店應用。(第 2 部分:管理應用生命周期和狀態(tài)中討論了這一點。)按Windows 鍵可轉到“開始”菜單的應用列表,而且請注意,部署應用時會將其磁貼添加到“開始”菜單。若要再次運行應用,只需點擊或單擊該應用的磁貼,或在 Visual Studio 中按 F5 在調試模式下運行該應用。
創(chuàng)建的通用應用頁面
它還做不了多少事,但是祝賀你,你已經構建了你的第一個 Windows 應用商店應用!
要停止調試并關閉應用,請返回到 Visual Studio 并按 Shift+F5。
有關詳細信息,請參閱從 Visual Studio 運行 Windows 應用商店應用。
在應用中,你可以在 TextBox 中鍵入,但是單擊 Button 不執(zhí)行任何操作。在以后的步驟中,為按鈕的 Click 事件創(chuàng)建事件處理程序,該事件顯示了個性化問候。向 MainPage.xaml.h 和MainPage.xaml.cpp 文件添加事件處理程序代碼。
你的應用可在任何 Windows 10 設備上運行,讓我們看一下它在 Windows Phone 上的情況如何。
除了在桌面設備上執(zhí)行調試的選項,Visual Studio 還提供用于在連接到計算機的物理移動設備上或移動設備仿真器上部署和調試應用的選項。你可以為帶有不同內存和顯示配置的設備在仿真器中進行選擇。
仿真器 10.0.0.0 WVGA 4 英寸 512MB
采用其他配置的各種仿真器
最好在帶有小型屏幕和有限內存的設備上測試應用,因此請使用“仿真器 10.0.0.0WVGA 4 英寸 512MB”選項。
提示 有關使用手機仿真器的詳細信息,請參閱在仿真器中運行 Windows Phone 應用。
若要在物理設備上調試你的應用,你必須具有已注冊用于開發(fā)的設備。有關詳細信息,請參閱注冊你的 Windows Phone。
在移動設備仿真器上開始調試
1. 在“標準”工具欄上的目標設備菜單 (下圖) 中,選取“仿真器 10.0.0.0
2. 單擊工具欄中的“開始調試”按鈕 (圖) ;或在“調試”菜單中,單擊“開始調試”;
或在移動設備仿真器中,應用的外觀如下所示。
移動應用仿真器中的通用應用界面
你可能還會注意到,你可以在 TextBox 中鍵入內容,但此時單擊 Button 不會起任何作用。在接下來的步驟中,你將為按鈕的 Click 事件創(chuàng)建事件處理程序,以顯示個性化的問候。將事件處理程序代碼添加到 MainPage.xaml.cs 文件。Visual Studio 將啟動選定的仿真器,然后部署和啟動你的應用。你會首先注意到,在本地計算機上能正常顯示的 120 像素左邊距,在屏幕較小的移動設備上會將內容推到屏幕之外。在本教程的后面部分中,你將了解如何使 UI 適應不同的屏幕大小,以使應用始終保持外觀良好。
步驟 2:創(chuàng)建事件處理程序
1. 在 MainPage.xaml 的 XAML 或設計視圖中,在之前添加的 StackPanel 中選擇 "Say Hello"Button。
2. 按 Alt+Enter 打開“屬性窗口”,然后選擇事件按鈕 (圖)。
3. 查找 Click 事件。在其文本框中,鍵入處理 Click 事件的函數名稱。對于本示例,請鍵入 "Button_Click"。
4. 按 Enter。事件處理程序方法在 MainPage.xaml.
cpp 中創(chuàng)建并已打開,因此你可以添加在事件出現時執(zhí)行的代碼。
同時,在 MainPage.xaml 中,更新 Button 的 XAML 以聲明 Click 事件處理程序,如下所示:
<Button Content=”Say "Hello"” Click=”Button_Click”/>
5. 在 MainPage.xaml.cpp 中,將以下代碼添加到你剛剛創(chuàng)建的 Button_Click 事件處理程序。此代碼將從nameInputTextBox 控件檢索用戶名并使用該用戶名創(chuàng)圖中應用控件屬性窗口建問候greetingOutput TextBlock 將顯示相關結果。
6. 按 Enter。事件處理程序方法在 MainPage.xaml.cpp 中創(chuàng)建并已打開,因此你可以添加在事件出現時執(zhí)行的代碼。
同時,在 MainPage.xaml 中,更新 Button 的 XAML 以聲明 Click 事件處理程序,如下所示:<Button Content=”Say "Hello"” Click=”Button_Click”/>
7.在 MainPage.xaml.cpp中,將以下代碼添加到你剛剛創(chuàng)建的 Button_Click 事件處理程序。此代碼將從 nameInputTextBox控件檢索用戶名并使用該用戶名創(chuàng)建問候。
greetingOutput TextBlock將顯示相關結果。
void HelloWorld::MainPage::Button_Clicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e){
greetingOutput->Text = “Hello, “ + nameInput->Text + “!”;}
8. 將項目設置為啟動,然后按 F5 生成并運行應用。當你在文本框中鍵入姓名并單擊閃電按鈕后,應用會顯示個性化問候(圖)。
通用應用中的“問候”
步驟 3:設置起始頁的樣式
選擇主題
輕松自定義應用的外觀。默認情況下,應用使用深色樣式的資源。系統(tǒng)資源還包含淺色主題。
我們來嘗試一下并看看它的外觀。
切換到淺色主題的步驟
1. 在“已共享”項目中,打開 App.xaml。
2. 在開始標記 Application 中,添加 RequestedTheme 屬性,并將其值設置為 Light:
RequestedTheme="Light"
以下是添加了淺色主題的完整 Application 標記:
<Application
x:Class=”HelloWorld.App”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”using:HelloWorld”
RequestedTheme=”Light”>
1.使其中一個平臺項目成為啟動項目,然后按 F5 以構建并運行它。請注意它使用淺色主題。
現在將其他平臺項目設置為啟動項目,按 F5,并且請注意它也使用淺色主題。這是因為 App.
xaml 已由兩個項目共享。
通用應用的淺色主題
你應使用哪個主題?你需要的任何一個。以下我們的觀點:對于主要顯示圖像或視頻的應用,我們建議深色主題;對于包含大量文本的應用,我們建議淺色主題(上圖)。如果你使用的是自定義配色方案,則請使用最適合應用外觀和感覺的主題。
注意 在應用啟動時應用主題,并且無法在應用運行時更改主題。
使用系統(tǒng)樣式
此時,在 Windows 應用中,所有文本都非常小,因此很難閱讀。讓我們通過應用系統(tǒng)樣式來解決該問題。
更改元素樣式的步驟
1. 在 Windows 項目中,打開 MainPage.xaml。
2. 在 XAML 或設計視圖中,選擇以前添加的" 你叫什么名字?"TextBlock。
3. 在“屬性” 窗口(圖)中,選擇右上角的“屬性”按鈕 ()。
4. 展開“文本”組,并將字體大小設置為 18 px。
5. 展開“其他”組并找到“樣式”屬性。
6. 單擊屬性標記(“樣式”屬性右側的綠色框),然后在菜單上,依次選擇“系統(tǒng)資源”>“BaseTextBlockStyle”。
“BasicTextStyle”為在 <root>\Program Files\Windows Kits\Include\winrt\xaml\design\generic.xaml 中的ResourceDictionary 中定義的資源。
屬性窗口
在 XAML 設計圖面中,文本外觀會發(fā)生更改。在 XAML 編輯器中,TextBlock 的 XAML會進行更新:
<TextBlock Text=”What’s your name?” Style=”{StaticResource BasicTextStyle}”/>
7. 重 復 該 過 程 可 設 置 字 體 大 小 并 將“BaseTextBlockStyle”分 配 到greetingOutputTextBlock 元素。
提示 盡管此 TextBlock 中沒有文本,但當你將指針移動到 XAML 設計圖面上時,藍色輪廓會顯示它的位置,以便你可以選擇它。
現在的 XAML 如下所示:
<StackPanel Margin=”120,30,0,0”>
<TextBlock Style=”{ThemeResource BaseTextBlockStyle}” FontSize=”16” Text=”What’s your name?”/>
<StackPanel Orientation=”Horizontal” Margin=”0,20,0,20”>
<TextBox x:Name=”nameInput” Width=”300” HorizontalAlignment=”Left”/>
<Button Content=”Say "Hello"” Click=”Button_Click”/>
</StackPanel>
<TextBlock Style=”{ThemeResource BaseTextBlockStyle}” FontSize=”16” x:Name=”greetingOutput”/>
</StackPanel>
8. 按 F5 構建并運行應用。現在它的外觀如下所示(圖):
淺色主題中通用應用的問候
步驟 4:使 UI 適應不同的窗口大小
現在我們將使 UI 適應不同的屏幕大小,以使其在移動設備上外觀良好。若要執(zhí)行此操作,添加 VisualStateManager 并設置應用于不同視覺狀態(tài)的屬性。
1. 在 XAML 編輯器中,在根 Grid 元素的開始標記后添加此 XAML 塊。
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name=”wideState”>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth=”641” />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name=”narrowState”>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth=”0” />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target=”contentPanel.Margin” Value=”20,30,0,0”/>
<Setter Target=”inputPanel.Orientation” Value=”Vertical”/>
<Setter Target=”inputButton.Margin” Value=”0,4,0,0”/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
2. 在本地計算機上調試應用。請注意,UI 外觀與以前相同,除非窗口變得窄于 641 與設備無關的像素 (DIP)。
3. 在移動設備仿真器上調試應用。請注意 UI 使用你在 narrowState 中定義的屬性并正確顯示在小屏幕上。
如 果 你 在 以 前 版 本 的 XAML 中 使 用 過VisualStateManager,你可能會注意到 XAML 在此處使用簡化的語法。
名 為 wideState 的 VisualState 具 有 一 個AdaptiveTrigger,并且其 MinWindowWidth 屬性設置為641。這意味著僅在窗口寬度不小于 641 DIP 的最小值時應用該狀態(tài)。你沒有為此狀態(tài)定義任何 Setter 對象,因此它會將你在 XAML 中定義的布局屬性用于頁面內容。
名為 narrowState 的第二個 VisualState 具有一個AdaptiveTrigger,其 MinWindowWidth 屬性設置為 0。當窗口寬度大于 0 但小于 641 DIP 時,應用此狀態(tài)。(在 641DIP 時,應用 wideState。)在此狀態(tài)下,定義一些Setter 對象以更改 UI 中控件的布局屬性:
將 contentPanel 元素的左邊距從 120 降低為 20。
將inputPanel 元素的Orientation 從Horizontal 更改為 Vertical。
圖4-13 移動應用仿真器中的淺
色主題通用應用界面
將 4 DIP 的上邊距添加到 inputButton 元素。
這樣,你的第一個通用應用就寫成了。