UWP Windows曆史上最漂亮的UWP架構出爐！！！

標籤：etl   each   資訊   ring   gis   日誌   design   menu item   status   

原文:UWP Windows曆史上最漂亮的UWP架構出爐！！！

UWP Windows曆史上最漂亮的UWP架構出爐！！！

 

本架構基於微軟的開源項目WTS開發，並在其基礎上增加了FDS（流暢設計項目，高光、亞克力等）、多語言系統、沈浸式體驗（擴充內容到標題列）

同時又保留了WTS的強大擴充性，你可以添加你所需要的頁面，來快速定製自己個人化的App。

 

先看圖，有圖有真相！（點開圖看原圖更清晰）

 

Light Mode:

 

Dark mode:

 

 

簡介：

0、App.xaml(.cs)

　　啟動App的引導，包含了類似C語言的Main()函數一樣

1、ShellPage.xaml(.cs)

　　App的運行殼，修改其xaml可同意定製App的外觀，同時包含了左側導覽功能表，右側的Content。

　　這二者都運用了Fluent Design System元素，所以App才顯得這麼漂亮??

2、MainPage.xaml(.cs)

　　主介面，即開啟App要呈現給使用者的介面

3、FirstRunDialog.xaml(.cs)

　　第一次運行時展現給使用者的資訊，比如介紹一下你的App。可以通過修改資源檔中的FirstRun_Body.Text來實現

4、WhatsNewDialog.xaml(.cs)

　　後續每次更新提供的更新日誌等，可以通過修改資源檔中的AfterUpdate_Body.Text來實現

5、SettingsPage.xaml(.cs)

　　設定面板，我增加了多語言選項，你基於本架構，還可以添加更多的語言。但是不要忘記在strings檔案夾添加對應的資源檔

 

當然，光上面介紹的頁面不能夠滿足對使用者層面的需要，那麼你可以使用WTS嚮導，添加需要的頁面/功能。

 

在你添加了新的頁面後，進入ShellPage.xaml.cs中，添加上對應的代碼，實現菜單導航。

　　　　 private void PopulateNavItems()        {            _primaryItems.Clear();            _secondaryItems.Clear();            // TODO WTS: Change the symbols for each item as appropriate for your app            // More on Segoe UI Symbol icons: https://docs.microsoft.com/windows/uwp/style/segoe-ui-symbol-font            // Or to use an IconElement instead of a Symbol see https://github.com/Microsoft/WindowsTemplateStudio/blob/master/docs/projectTypes/navigationpane.md            // Edit String/en-US/Resources.resw: Add a menu item title for each page            _primaryItems.Add(ShellNavigationItem.FromType<MainPage>("Shell_Main".GetLocalized(), Symbol.Document));            _secondaryItems.Add(ShellNavigationItem.FromType<SettingsPage>("Shell_Settings".GetLocalized(), Symbol.Setting));        }

 

 

在拓展內容到標題列的時候，需要區分一下案頭版和手機版代碼略不同

手機版不需要設定標題列，所以需要把標題列所在的那一行行高設定為0（必選），並且進入全螢幕模式（可選）。

　　　　　　　if (!Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))            {                // Hide default title bar.                var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;                coreTitleBar.ExtendViewIntoTitleBar = true;                UpdateTitleBarLayout(coreTitleBar);                // Set XAML element as a draggable region.                Window.Current.SetTitleBar(AppTitleBar);                var view = ApplicationView.GetForCurrentView();                view.TitleBar.ButtonBackgroundColor = Colors.Transparent;                // Register a handler for when the size of the overlaid caption control changes.                // For example, when the app moves to a screen with a different DPI.                coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;                // Register a handler for when the title bar visibility changes.                // For example, when the title bar is invoked in full screen mode.                coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;            }            else            {                rowTitleBar.Height = new GridLength(0);                var view = ApplicationView.GetForCurrentView();                view.TryEnterFullScreenMode();            }

 

 

還有一點必須注意的是，AppTitleBar背景色必須設定透明，否則標題列不能移動雙擊等操作，切記！！！

<Grid x:Name="AppTitleBar" Background="Transparent">

 

 

關於設定裡面的多語言，我選擇了儲存在本地

        private void comboBoxLanguage_SelectionChanged(object sender, SelectionChangedEventArgs e)        {            string temp = comboBoxLanguage.SelectedItem.ToString();            string[] tempArr = temp.Split(‘ ‘);            ApplicationData.Current.LocalSettings.Values["strCurrentLanguage"] = tempArr[0];        }

你也可以儲存在RoamSettings裡面來漫遊設定，這樣可以實現設定跨Win 10平台。

 

注意：本架構最低系統要求是創意者更新Build15063（Creators Update），目標系統是秋季創意者更新Build16299（Fall Creators Update）

 

項目開源地址：https://github.com/hupo376787/A-Beautiful-UWP-Frame.git

 

 

 

 ??

 ??

 ??

 ??

 ??

 ??

 ??

 ??

 彩蛋：敢不敢把ShellPage.xaml中的最外層的Grid fcu:Background 畫筆刷子換成 SystemControlBackgroundAccentRevealBorderBrush 

 

UWP Windows曆史上最漂亮的UWP架構出爐！！！