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]