Windows 10 (2) and Windows 10

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<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 10">

            <TextBlock Name = "lblMsg" TextWrapping = "Wrap" Margin = "0 10 10 10">
                <Run> 1, UWP-Universal Windows Platform </ Run>
                <LineBreak />
                <Run> 2. When designing a UWP application, design in effective pixels instead of physical pixels. Because the device will depend on the pixel density and viewing distance </ Run>
                <LineBreak />
                <Run> 3. Effective resolution-resolution in effective pixels; physical resolution-resolution in physical pixels </ Run>
                <LineBreak />
                <Run> 4. For the understanding of effective resolution, you can refer to the concept of logical resolution of ios. For example, the physical resolution of iPhone 4s is 960 * 640, and its logical resolution is 480 * 320 (designed according to this resolution) </ Run>
                <LineBreak />
                <Run> 5. How is the ratio between effective resolution and physical resolution determined? The system determines the proportion according to the pixel density and viewing distance of the device </ Run>
                <LineBreak />
                <Run> 6. When the system zooms the UI, it will zoom by multiples of 4 (multiples of 4, literally not necessarily the whole multiple). To ensure a clear look after scaling, snap your design to a 4 * 4 pixel grid so that the margins, sizes, and positions of UI elements are multiples of 4 effective 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" HorizontalAlignment = "Center" VerticalAlignment = "Bottom" Margin = "0 0 0 20">
             <ProgressRing IsActive = "True" Foreground = "White" />
             <TextBlock Name = "lblMsg" Text = "I'm a custom startup page, and jump to the home page after 1 second" Margin = "0 10 0 0" />
         </ StackPanel>

     </ Grid>
</ Page>

UI/MySplashScreen. xaml. cs

/ *
 * Demonstrates how to customize the splash screen (splash screen)
 *
 * Description and application scenarios:
 * 1. You can set the startup screen of the app in Package.appxmanifest, for example: <uap: SplashScreen Image = "Assets \ SplashScreen.png" BackgroundColor = "# ff0000" />, which is an image displayed in the middle of the window (620 * 300) and a full window background color
 * 2. After the app's startup screen, a custom startup screen can be displayed
 * 3. When the custom startup screen is displayed, you can initialize some programs, and then enter the main program after the initialization is complete.
 * /

using System;
using System.Threading.Tasks;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10
{
    using Windows10.UI;

    public partial class App
    {
        // partial method implements the declaration in App.xaml.cs
        partial void OnLaunched_SplashScreen (LaunchActivatedEventArgs args)
        {
            // show custom startup screen after startup
            if (args.PreviousExecutionState! = ApplicationExecutionState.Running)
            {
                MySplashScreen mySplashScreen = new MySplashScreen (args);
                Window.Current.Content = mySplashScreen;
            }
        }
    }
}

namespace Windows10.UI
{
    public sealed partial class MySplashScreen: Page
    {
        / *
         * SplashScreen-App's splash screen object, available in event parameters in several event handlers in Application
         * ImageLocation-the location of the image of the app's splash screen, returning a Rect object
         * Dismissed-event triggered when the app's splash screen closes
         * /

        // Information about the app startup screen
        private SplashScreen _splashScreen;

        public MySplashScreen ()
        {
            this.InitializeComponent ();

            lblMsg.Text = "Customize the startup screen of the app, you can see a demo of this page when you open the app";
        }

        public MySplashScreen (LaunchActivatedEventArgs args)
        {
            this.InitializeComponent ();
            
            ImplementCustomSplashScreen (args);
        }

        private async void ImplementCustomSplashScreen (LaunchActivatedEventArgs args)
        {
            // When the window size changes, resize the custom startup screen
            Window.Current.SizeChanged + = Current_SizeChanged;

            // Get information about the app's startup screen
            _splashScreen = args.SplashScreen;

            // event fired when app's startup screen closes
            _splashScreen.Dismissed + = _splashScreen_Dismissed;

            // Get the position of the picture of the app splash screen, and adjust the position of the picture of the custom splash screen by this 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;

            await Task.Delay (1000);

            // Turn off the custom startup screen and jump to the main page 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)
        {
            // Get the latest position of the picture of the app startup screen, and adjust the position of the picture of the custom startup screen by this 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 app's startup screen is closed
        }
    }
}

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 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 knowledge about "screen orientation"
 * /

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)
        {
            // The recommended direction when using the device is generally the direction of the device when the "windows" key is below. Phone is usually Portrait, tablet is Landscape
            lblMsg.Text = "NativeOrientation:" + DisplayInformation.GetForCurrentView (). NativeOrientation.ToString ();
            lblMsg.Text + = Environment.NewLine;

            // Device orientation (Windows.Graphics.Display.DisplayOrientations enumeration: None, Landscape, Portrait, LandscapeFlipped, PortraitFlipped)
            // Note: LandscapeFlipped is Landscape flipped 180 degrees, PortraitFlipped is Portrait flipped 180 degrees
            // Note: Landscape turn clockwise (turn right) 90 degrees is Portrait, and turn clockwise (turn right) 90 degrees is LandscapeFlipped
            lblMsg.Text + = "CurrentOrientation:" + DisplayInformation.GetForCurrentView (). CurrentOrientation.ToString ();

            // Event triggered when NativeOrientation or CurrentOrientation changes (NativeOrientation generally does not change)
            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)
        {
            / * The allowed direction of the app can be configured in Package.appxmanifest, similar to the following (if not configured, any direction is allowed)
               <uap: InitialRotationPreference>
                   <uap: Rotation Preference = "portrait" />
                   <uap: Rotation Preference = "landscape" />
                   <uap: Rotation Preference = "portraitFlipped" />
                   <uap: Rotation Preference = "landscapeFlipped" />
               <uap: InitialRotationPreference>
            * /

            // DisplayInformation.AutoRotationPreferences-specify the preferred orientation of the current app, which forces to display in the specified orientation (must be one of the allowed orientations configured in Package.appxmanifest)
            DisplayInformation.AutoRotationPreferences = DisplayInformation.GetForCurrentView (). CurrentOrientation;
            btnLock.Content = "Unlock direction";
        }

        private void btnLock_Unchecked (object sender, RoutedEventArgs e)
        {
            DisplayInformation.AutoRotationPreferences = DisplayOrientations.None;
            btnLock.Content = "Lock current direction";
        }
    }
} 

OK
[Download source code]