UWP tutorial 2-how to implement an adaptive user interface

UWP tutorial 2-how to implement an adaptive user interface
As mentioned above, the layout panel specifies the size and position of the interface elements based on the available screen space. For example, StackPanel arranges interface elements horizontally or vertically. The Grid layout is similar to the table control in CSS. You can arrange each element by unit.

The newly provided RelativePanel is a relative layout. Each element has a relative relationship and can be used to create an adaptive interface. When a user's device changes, the user interface will be re-arranged, and with RelativePanel, the interface elements will be re-arranged.

Regardless of the device you are using, the blue button is always placed on the right side of the text box, side by side on the top of the yellow button.

The XAML code is as follows:
 

<RelativePanel>    <TextBox x:Name="textBox1" Text="textbox" Margin="5"/>    <Button x:Name="blueButton" Margin="5" Background="LightBlue" Content="ButtonRight" RelativePanel.RightOf="textBox1"/>    <Button x:Name="orangeButton" Margin="5" Background="Orange" Content="ButtonBelow" RelativePanel.RightOf="textBox1" RelativePanel.Below="blueButton"/></RelativePanel> 

Use a visual status trigger to create an adaptive UI

UWP provides adaptive visual status, which can be adjusted based on the window size. StateTriggers defines a threshold value, which triggers a visual state. In the following example, when the window is larger than 720 pixels, The wideView state is triggered, and the game panel is rearranged ,:

When the window is smaller than PX, narrowView is triggered. Because the wideView trigger cannot meet the conditions, the NarrowView State places Best-rated games at the bottom and alignment to the left.

The XAML code is as follows:
 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <VisualStateManager.VisualStateGroups>        <VisualStateGroup>            <VisualState x:Name="wideView">                <VisualState.StateTriggers>                    <AdaptiveTrigger MinWindowWidth="720" />                </VisualState.StateTriggers>                <VisualState.Setters>                    <Setter Target="best.(RelativePanel.RightOf)" Value="free"/>                    <Setter Target="best.(RelativePanel.AlignTopWidth)" Value="free"/>                </VisualState.Setters>            </VisualState>            <VisualState x:Name="narrowView">                <VisualState.Setters>                    <Setter Target="best.(RelativePanel.Below)" Value="paid"/>                    <Setter Target="best.(RelativePanel.AlignLeftWithPanel)" Value="true"/>                </VisualState.Setters>                <VisualState.StateTriggers>                    <AdaptiveTrigger MinWindowWidth="0" />                </VisualState.StateTriggers>            </VisualState>        </VisualStateGroup>    </VisualStateManager.VisualStateGroups>    ...</Grid>

 

Tools available for UWP Creation

When creating an App, the target device is usually identified. to Preview the App on a device, you can use the Preview toolbar (Preview Toolbox) in VS to view the App. Different devices, such as PCs, can be simulated, TV, smartphone, etc.

Adaptive Scaling

Windows 10 introduces an upgraded version of the "Scaling Model". In addition to scaling vector graphs, a unified set of scaling factors ensures that the UI elements are in different screen sizes and resolutions, the page element size is consistent. The scaling factor is compatible with multiple operating systems, such as iOS and Android. The Resource Division shares resources across multiple platforms.

General Input Processing

You can use a universal control to create a universal Windows App to manage and control different input modes, such as the mouse, keyboard, touch pen, and controller. This article lists the following APIs to access the input:

CoreIndependentInputSource: A New API that can migrate source input to the main thread or background thread.

PointerPoint: Unified touch, mouse, and pen data. Has consistent interfaces and events.

PointerDevice: A device API that supports querying input capabilities supported by devices.

The new InkCanvas XAML control and InkPresenter API can access Stroke data.

Write code

The development of the Windows10 project in VS supports multiple development languages, such as C ++, C #, VB, and JavaScript. You can also use XAML to develop a native UI user experience.

Call API to implement the target device family

No matter which API you want to call, you need to know whether the device group that the API adapts to meets your App development needs. As shown in the following code, the device family is Universal:

    Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += TestView_BackRequested;

Of course, you can also call the API, which is not implemented in the App.

This usually means that when your target device family is not marked in the document, you can call this api and modify some code.

Use the ApiInformation class to write adaptive code

To write adaptive code, you only need to take two steps. One is to determine the API to be called, and the other is to test the API using the Windows. Foundation. Metadata. ApiInformation class. It can be used to assess whether the App is running well.

To call many APIs at the same time, you can use the ApiInformation. IsTypePresent method as follows:

 

   // Note: Cache the value instead of querying it more than once.    bool isHardwareButtonsAPIPresent =        Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons");     if (isHardwareButtonsAPIPresent)    {        Windows.Phone.UI.Input.HardwareButtons.CameraPressed +=            HardwareButtons_CameraPressed;    }

In the preceding example, the HardwareButtons class implements the CameraPressed event because the class members have the same information requirements.

User Experience

General-purpose Windows apps can use all device features to present apps. Apps can take full advantage of the processing capabilities of desktop devices, the natural interaction of tablets, and the convenience and mobility of smartphones.

Good design starts with determining the user interaction mode and meets the functionality and appearance of the App. The user experience has a very important impact on whether users like your App or whether they are happy or remain positive during use. To design a universal App, pay more attention to the different device factors that affect the user experience.

In addition to different device interaction methods, you also need to take advantage of cross-platform advantages, such:

• Use cloud computing to access resources of different devices
• Consider how to migrate from one device to another and maintain consistency.
• Use the navigation design guide to design workflows so that apps are compatible with mobile devices, small screens, or large screen devices.
• In special cases, the screen of a small mobile device may fail, or some functional areas may not work on a fixed desktop, but must be on a mobile device.
• Consider compatibility with multiple input formats

Submit common Windows applications through Dashboard

With the new Universal Windows Developer Center dashboard, you can manage and submit all applications for Windows devices in the same location. The new feature simplifies the process and provides more control permissions.