Windows 10 (2) and Windows 10

Source: Internet
Author: User

Windows 10 (2) and Windows 10

[Download source code]


Backwater world war I Windows 10 (2)-UI: Overview, startup screen, screen direction



Author: webabcd


Introduction
UI of Windows 10

  • UI design overview
  • Start Screen (flashing screen)
  • Screen direction



Example
1. UI design overview
UI/Summary. xaml

<Page x: Class = "Windows10.UI. Summary" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows10.UI "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: ignorable = "d"> <Grid Background = "Transparent"> <StackPanel Margin = "10 0 10"> <TextBlock Name = "lblMsg" TextWrapping = "Wrap" Margin =" 0 10 10 10 "> <Run> 1. UWP-Universal Windows Platform </Run> <LineBreak/> <Run> 2. When designing UWP applications, design with valid pixels instead of physical pixels. The reason is that the device determines the resolution in units of valid pixels Based on the pixel density and viewing distance </Run> <LineBreak/> <Run> 3. Valid resolution; physical resolution-resolution in the unit of physical pixels </Run> <LineBreak/> <Run> 4. For effective resolution, refer to the concept of logical resolution in ios, for example, the physical resolution of the iPhone 4S is 960*640, and its logical resolution is 480*320 (designed based on this resolution) </Run> <LineBreak/> <Run> 5. How is the ratio between valid resolution and physical resolution determined? The ratio is determined by the system based on the pixel density and viewing distance of the device </Run> <LineBreak/> <Run> 6. When the system scales the UI, it scales in multiples of 4 (multiples of 4, literally not necessarily an integer. To ensure a clear appearance after scaling, paste your design to a 4*4 Pixel Grid, set the margin, size, and position of the UI element to a multiple of four valid pixels </Run> </TextBlock> </StackPanel> </Grid> </Page>

 
2. Start the screen (flashing screen)
UI/MySplashScreen. xaml

<Page x: Class = "Windows10.UI. mySplashScreen "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: local =" using: Windows10.UI "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc: ignorable = "d"> <! -- Var color = (Color) this. resources ["SystemAccentColor"]; --> <Grid Name = "grid" Background = "{ThemeResource SystemAccentColor}"> <Image x: name = "splashImage" Source = "/Assets/SplashScreen.png" HorizontalAlignment = "Center"/> <StackPanel Orientation = "Vertical" placement = "Center" verticalignment = "Bottom" Margin =" 0 0 0 20 "> <ProgressRing IsActive =" True "Foreground =" White "/> <TextBlock Name =" lblMsg "Text =" I Am a custom launch page, 1 second later, jump to the Homepage "Margin =" 0 10 0 0 "/> </StackPanel> </Grid> </Page>

UI/MySplashScreen. xaml. cs

/** Demonstrate how to customize the startup screen (pop-up screen) ** description and application scenarios: * 1. In Package. you can set the app startup screen in appxmanifest, for example, <uap: SplashScreen Image = "Assets \ SplashScreen.png" BackgroundColor = "# ff0000"/>, it is an image shown in the middle of the window (620*300) and a full window background color * 2. After the app starts the screen, you can display a custom startup screen * 3. Some program initialization work can be done when the custom startup screen is displayed. After initialization, you can enter the main program */using System; using System. threading. tasks; using Windows. applicationModel. activation; using Windows. foundation; using Windows. UI. X Aml; using Windows. UI. xaml. controls; namespace Windows10 {using Windows10.UI; public partial class App {// partial method, which implements the App. xaml. declare partial void OnLaunched_SplashScreen (LaunchActivatedEventArgs args) in cs {// display the custom startup screen if (args. previusexecutionstate! = ApplicationExecutionState. running) {MySplashScreen mySplashScreen = new MySplashScreen (args); Window. current. content = mySplashScreen ;}}namespace Windows10.UI {public sealed partial class MySplashScreen: Page {/** the startup Screen Object of the SplashScreen-app, you can obtain the position information of the Image of * ImageLocation-app startup screen from the event parameters of several event processors in the Application, returns the event triggered when the Rect type object * Dismissed-app startup screen is disabled * // information about the app startup screen private SplashScreen _ splashScreen; public MySplashScreen () {this. initializeComponent (); lblMsg. text = "Custom app startup screen. The demo on this page is displayed when the app is opened";} public MySplashScreen (LaunchActivatedEventArgs args) {this. initializeComponent (); ImplementCustomSplashScreen (args);} private async void ImplementCustomSplashScreen (LaunchActivatedEventArgs args) {// adjust the custom startup screen Window when the Window size changes. current. sizeChanged + = Current_SizeChanged; // obtain information about the app startup screen _ splashScreen = args. splashScreen; // The Event _ splashScreen triggered when the startup screen of the app is disabled. dismissed + = _ splashScreen_Dismissed; // obtain the position of the image on the app startup screen, and adjust the position of the custom image on the startup screen. Rect splashImageRect = _ splashScreen. imageLocation; splashImage. setValue (Canvas. leftProperty, splashImageRect. x); splashImage. setValue (Canvas. topProperty, splashImageRect. y); splashImage. height = splashImageRect. height; splashImage. width = splashImageRect. width; await Task. delay (1000); // turn off the custom startup screen and jump to the homepage of the program. var rootFrame = new Frame (); rootFrame. navigate (typeof (MainPage), args); Window. current. content = rootFrame; Window. current. activate ();} void Current_SizeChanged (object sender, Windows. UI. core. windowSizeChangedEventArgs e) {// obtain the latest position of the image on the app startup screen, and adjust the position of the custom startup screen image based on the position Rect splashImageRect = _ splashScreen. imageLocation; splashImage. setValue (Canvas. leftProperty, splashImageRect. x); splashImage. setValue (Canvas. topProperty, splashImageRect. y); splashImage. height = splashImageRect. height; splashImage. width = splashImageRect. width;} private void _ splashScreen_Dismissed (SplashScreen sender, object args) {// the startup screen of the app is disabled }}}


3. screen orientation
UI/ScreenOrientation. xaml

<Page x: Class = "Windows10.UI. screenOrientation "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: local =" using: Windows10.UI "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc: ignorable = "d"> <Grid Background = "Transparent"> <StackPanel Margin = "10 0 10"> <ToggleButton Name = "btnLock" Content = "lock current direction" IsChecked = "False" Checked = "btnLock_Checked" Unchecked = "btnLock_Unchecked"/> <TextBlock Name = "lblMsg" Margin = "0 10 0 0"/> </StackPanel> </Grid> </Page>

UI/ScreenOrientation. xaml. cs

/** Demonstrate "screen direction" knowledge points */using System; using Windows. graphics. display; using Windows. UI. xaml; using Windows. UI. xaml. controls; using Windows. UI. xaml. navigation; namespace Windows10.UI {public sealed partial class ScreenOrientation: Page {public ScreenOrientation () {this. initializeComponent ();} protected override void OnNavigatedTo (NavigationEventArgs e) {// recommended direction when using a device. Generally, it is the direction of the device when the "windows" Key is below. Mobile phones are generally Portrait, and flags are generally Landscape lblMsg. text = "NativeOrientation:" + DisplayInformation. getForCurrentView (). nativeOrientation. toString (); lblMsg. text + = Environment. newLine; // device direction (Windows. graphics. display. displayOrientations enumeration: None, Landscape, Portrait, LandscapeFlipped, PortraitFlipped) // Note: LandscapeFlipped is 180 degrees flipped by Landscape, and PortraitFlipped is 180 degrees flipped by Portrait. // note: landscape clockwise turn (right turn) 90 degrees is Portrait, then clockwise turn (right turn) 90 degrees is LandscapeFlipped lblMsg. text + = "CurrentOrientation:" + DisplayInformation. getForCurrentView (). currentOrientation. toString (); // the event that is triggered when NativeOrientation or CurrentOrientation changes (NativeOrientation is generally not changed) DisplayInformation. getForCurrentView (). orientationChanged + = ScreenOrientation_OrientationChanged;} private void ScreenOrientation_OrientationChanged (DisplayInformation sender, object args) {lblMsg. text + = Environment. newLine; lblMsg. text + = "NativeOrientation:" + DisplayInformation. getForCurrentView (). nativeOrientation. toString (); lblMsg. text + = Environment. newLine; lblMsg. text + = "CurrentOrientation:" + DisplayInformation. getForCurrentView (). currentOrientation. toString ();} protected override void OnNavigatedFrom (NavigationEventArgs e) {DisplayInformation. getForCurrentView (). orientationChanged-= ScreenOrientation_OrientationChanged;} private void btnLock_Checked (object sender, RoutedEventArgs e) {/* in Package. in appxmanifest, you can configure the app's permitted direction, similar to the following (if not configured, it allows any direction) <uap: InitialRotationPreference> <uap: Rotation Preference = "portrait"/> <uap: rotation Preference = "landscape"/> <uap: Rotation Preference = "portraitFlipped"/> <uap: Rotation Preference = "landscapeFlipped"/> <uap: initialRotationPreference> * // DisplayInformation. autoRotationPreferences-specifies the preferred direction of the current app, that is, it is forcibly displayed in the specified direction (must be in Package. one of the permitted directions of the appxmanifest configuration) DisplayInformation. autoRotationPreferences = DisplayInformation. getForCurrentView (). currentOrientation; btnLock. content = "unlock";} private void btnLock_Unchecked (object sender, RoutedEventArgs e) {DisplayInformation. autoRotationPreferences = DisplayOrientations. none; btnLock. content = "locking the current direction ";}}}



OK
[Download source code]

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.