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<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]


Related Article

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.