The most beautiful UWP framework in UWP Windows history!!!

Original: The most beautiful UWP framework in UWP Windows history!!!

The most beautiful UWP framework in UWP Windows history!!!

This framework was developed based on Microsoft's Open source project WTS and added FDS (fluent design elements, highlights, acrylic, etc.), multi-lingual systems, immersive experiences (extended content to the title bar)

While preserving the power of WTS, you can add the pages you need to quickly customise your app.

First look at the picture, there is a picture of the truth! (Click to see the original image clearer)

Light Mode:

Dark mode:

Brief introduction:

0, App.xaml (. cs)

Launches the app's boot, which contains the same C language as the main () function

1, Shellpage.xaml (. cs)

The app's shell modifies its XAML to agree to the look of the custom app, along with the left navigation menu and the content on the right.

Both use the fluent Design system element, so the app looks so beautiful ??

2, MainPage.xaml (. cs)

The main interface, the interface that opens the app to be presented to the user

3, Firstrundialog.xaml (. cs)

The first time the user is presented with information, such as introducing your app. Can be implemented by modifying the Firstrun_body.text in the resource file

4, Whatsnewdialog.xaml (. cs)

Each subsequent update provides an update log, etc., which can be implemented by modifying the Afterupdate_body.text in the resource file.

5, Settingspage.xaml (. cs)

Setup Panel, I added multiple language options, you can also add more languages based on this framework. But don't forget to add the corresponding resource file in the strings folder

Of course, the page described above does not meet the needs of the user level, then you can use the WTS Wizard to add the desired page/function.

After you have added a new page, go to ShellPage.xaml.cs, add the corresponding code, and implement the menu navigation.

Private voidPopulatenavitems () {_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            //iconelement instead of a Symbol seehttps://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)); }

In the extension of the content to the title bar, you need to distinguish between the desktop version and the phone version of the code slightly different

The mobile version does not need to set the title bar, so you need to set the row height of the title bar to 0 (required), and enter full-screen mode (optional).

if(! Windows.Foundation.Metadata.ApiInformation.IsTypePresent ("Windows.UI.ViewManagement.StatusBar"))            {                //Hide default title bar.                varCoretitlebar =Coreapplication.getcurrentview ().                TitleBar; Coretitlebar.extendviewintotitlebar=true;                Updatetitlebarlayout (Coretitlebar); //Set XAML Element as a draggable region.Window.Current.SetTitleBar (AppTitleBar); varView =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 screens with a different DPI.Coretitlebar.layoutmetricschanged + =coretitlebar_layoutmetricschanged; //Register A handler for when the title bar visibility changes. //For example, when the title bar was invoked in full screen mode.Coretitlebar.isvisiblechanged + =coretitlebar_isvisiblechanged; }            Else{rowtitlebar.height=NewGridLength (0); varView =Applicationview.getforcurrentview (); View.            Tryenterfullscreenmode (); }

It is also important to note that the AppTitleBar background color must be set transparent, otherwise the title bar can not be moved by double-clicking, remember!!!

<grid x:name="apptitlebar" background="Transparent" >

About setting the multiple languages inside, I chose to store the local

        Private void comboboxlanguage_selectionchanged (object  sender, SelectionChangedEventArgs e)        {             string temp = comboBoxLanguage.SelectedItem.ToString ();             string [] Temparr = temp. Split (');            applicationdata.current.localsettings.values["strcurrentlanguage"] = temparr[0];        }

You can also store in roamsettings to roam the settings so that you can set up a cross win 10 platform.

Note: The minimum system requirements for this framework are the Creators update Build15063 (creators update), the target system is the Fall creator update Build16299 (Fall creators Update)

Project Open Source Address: https://github.com/hupo376787/A-Beautiful-UWP-Frame.git

??

??

??

??

??

??

??

??

colored egg : Dare not to Shellpage.xaml in the outermost grid fcu:background brush brush to replace Systemcontrolbackgroundaccentrevealborderbrush

The most beautiful UWP framework in UWP Windows history!!!