การพัฒนา Windows 10 - Adaptive Code
ในบทนี้เราจะสาธิตการนำแอปพลิเคชันของคุณไปใช้กับอุปกรณ์ต่างๆที่ Windows 10 รองรับเราได้เรียนรู้เกี่ยวกับการนำ UI ของคุณและกลเม็ดเทคนิคและการควบคุมทั้งหมดที่ใช้ในแอปพลิเคชัน UWP ไปใช้แล้ว
ตอนนี้เราจะเรียนรู้เกี่ยวกับการใช้งานโค้ดของคุณเนื่องจาก
รหัสแอปพลิเคชันไม่เหมือนกันในทุกอุปกรณ์
API ที่ใช้โดยเฉพาะอย่างยิ่งสำหรับ Xbox จะไม่สามารถใช้ได้กับอุปกรณ์เคลื่อนที่ สิ่งเดียวกันนี้เป็นจริงสำหรับ HoloLens เป็นต้น
Adaptive โค้ดสามารถทำให้แอปพลิเคชันของคุณสว่างขึ้นตามเงื่อนไขและรันโค้ดได้เฉพาะเมื่อทำงานบนตระกูลอุปกรณ์เฉพาะและ / หรือบนแพลตฟอร์ม / ส่วนขยาย API เวอร์ชันใดเวอร์ชันหนึ่งเท่านั้น
การเขียนโค้ด
ใน Windows 10 คุณสามารถใช้แอปพลิเคชัน UWP ใน Visual Studio ได้โดยใช้ C ++, C #, Visual Basic หรือ JavaScript
ด้วย C # และ Visual Basic คุณสามารถใช้ XAML สำหรับการออกแบบ UI
ด้วย C ++ คุณสามารถใช้ DirectX แทนการใช้ XAML
สำหรับ JavaScript คุณสามารถใช้ HTML สำหรับเลเยอร์การนำเสนอของคุณซึ่งเป็นมาตรฐานเว็บข้ามแพลตฟอร์ม
Windows Core API ทำงานในลักษณะเดียวกับอุปกรณ์ทั้งหมดซึ่งมีฟังก์ชันส่วนใหญ่ที่คุณต้องการสำหรับโค้ดและ UI ของคุณ อย่างไรก็ตามสำหรับโค้ดและ UI ที่ปรับแต่งสำหรับตระกูลอุปกรณ์เฉพาะคุณจำเป็นต้องใช้โค้ดที่ปรับเปลี่ยนได้และ UI แบบปรับได้
Calling an API that is NOT implemented by the target device family −
UI ปรับให้เข้ากับหน้าจอต่างๆได้อย่างง่ายดาย แต่ตระกูลอุปกรณ์ที่แตกต่างกันไม่เพียง แต่มีขนาดหน้าจอที่แตกต่างกันเท่านั้น แต่ยังมีมากกว่านั้นอีกมาก
ตัวอย่างเช่นโทรศัพท์มือถือมีปุ่มฮาร์ดแวร์บางปุ่มเช่น Back และ Camera ซึ่งอาจไม่มีในอุปกรณ์อื่นเช่น PC
โดยค่าเริ่มต้น API หลักจะมีฟังก์ชันการทำงานส่วนใหญ่ซึ่งใช้ได้กับอุปกรณ์ทั้งหมด แต่สามารถใช้ฟังก์ชันเฉพาะของอุปกรณ์ได้โดยอ้างอิงถึง SDK ส่วนขยายในแอปพลิเคชัน UWP ของคุณเช่นเดียวกับแอสเซมบลีภายนอก
หากต้องการเพิ่ม SDK ส่วนขยายใด ๆ ที่จำเป็นในแอปพลิเคชันของคุณให้ทำตามขั้นตอนที่กำหนดด้านล่าง -
คลิกขวาที่ไฟล์ References.
เลือก “Add References..”. กล่องโต้ตอบต่อไปนี้จะเปิดขึ้น
การเพิ่มส่วนขยายทำได้ง่ายเพียงแค่เพิ่มการอ้างอิงโครงการ
ตอนนี้คุณสามารถเพิ่ม SDK ส่วนขยายใด ๆ จากรายการซึ่งมีส่วนขยายเดสก์ท็อปส่วนขยาย IoT และส่วนขยายมือถือเป็นต้น
ส่วนขยายเดสก์ท็อปและอุปกรณ์เคลื่อนที่เป็นสองส่วนขยายของแพลตฟอร์มที่ใช้กันทั่วไป ตัวอย่างเช่นส่วนขยายมือถือเปิดใช้งาน API ที่จำเป็นในการใช้ปุ่มกล้องฮาร์ดแวร์
คุณสามารถตรวจสอบความสามารถของอุปกรณ์ได้โดยใช้ไฟล์ Windows.Foundation.Metadata.ApiInformationวิธีการคลาสซึ่งส่งคืนเอาต์พุตบูลีนหากประเภทได้รับการสนับสนุนบนอุปกรณ์ปัจจุบัน ตัวอย่างเช่นคุณสามารถเปิดใช้งานแอป Windows ของคุณเพื่อใช้ปุ่มกล้องพร้อมรหัสเช่นนี้ -
bool isHardwareButtonsAPIPresent =
Windows.Foundation.Metadata.ApiInformation.
IsTypePresent("Windows.Phone.UI.Inpu t.HardwareButtons");
if (isHardwareButtonsAPIPresent) {
Windows.Phone.UI.Input.HardwareButtons.CameraPressed += HardwareButtons_CameraPressed;
}
รหัสปุ่มกล้องโทรศัพท์จะทำงานก็ต่อเมื่อเปิดใช้งาน Mobile Extension SDK บนอุปกรณ์ ในทำนองเดียวกันคุณสามารถตรวจสอบเหตุการณ์วิธีการหรือคุณสมบัติเฉพาะใน API เวอร์ชันปัจจุบันได้โดยใช้IsEventPresent, IsMethodPresent, IsPropertyPresent, แทน IsTypePresent ดังแสดงด้านล่าง
bool isHardwareButtons_CameraPressedAPIPresent =
Windows.Foundation.Metadata.ApiInformation.IsEventPresent
("Windows.Phone.UI.Input.HardwareButtons", "CameraPressed");
Win32 API ใน UWP
แอปพลิเคชัน Universal Widows Platform (UWP) หรือ Windows Runtime Component ซึ่งเขียนด้วย C ++ / CX สามารถเข้าถึง Win32 API ซึ่งเป็นส่วนหนึ่งของ UWP ได้ในขณะนี้ ตระกูลอุปกรณ์ Windows 10 ทั้งหมดสามารถใช้ Win32 API ได้โดยการเชื่อมโยงแอปพลิเคชันของคุณกับWindowsapp.lib.
Windowsapp.libเป็น lib "ร่ม" ที่ให้การส่งออกสำหรับ UWP API กำลังเชื่อมโยงกับWindowsapp.lib จะเพิ่มการอ้างอิงแอปของคุณบน dlls ที่มีอยู่ในตระกูลอุปกรณ์ Windows 10 ทั้งหมด
ให้เราดูตัวอย่างง่ายๆที่แอปพลิเคชันกำหนดเป้าหมายทั้งเดสก์ท็อปและโทรศัพท์ ดังนั้นเมื่อแอปพลิเคชันทำงานบนเดสก์ท็อปแอปพลิเคชันจะไม่แสดงแถบสถานะ แต่เมื่อแอปพลิเคชันเดียวกันทำงานบนโทรศัพท์จะแสดงแถบสถานะ
ด้านล่างนี้คือรหัส XAML ซึ่งมีการเพิ่มการควบคุมที่แตกต่างกัน
<Page
x:Class = "UWPAdoptiveCode.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:UWPAdoptiveCode"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Page.Background>
<SolidColorBrush Color = "Green"/>
</Page.Background>
<Page.BottomAppBar>
<CommandBar x:Name = "commandBar" >
<AppBarButton Icon = "Accept" Label = "appbarbutton"/>
<AppBarButton Icon = "Cancel" Label = "appbarbutton"/>
</CommandBar>
</Page.BottomAppBar>
<Grid Background = "AliceBlue">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<local:DeviceFamilyTrigger DeviceFamily = "Desktop" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target = "StatusBarControls.Visibility"
Value = "Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel HorizontalAlignment = "Left" Margin = "75,164,0,0"
VerticalAlignment = "Top" >
<RadioButton x:Name = "ShowAppBarRadioButton" Content = "Show AppBar"
HorizontalAlignment = "Stretch" VerticalAlignment = "Stretch"
IsChecked = "True" Checked = "RadioButton_Checked"/>
<RadioButton x:Name = "ShowOpaqueAppBarRadioButton"
Content = "Show Transparent AppBar" HorizontalAlignment = "Stretch"
VerticalAlignment = "Stretch" Checked = "RadioButton_Checked"/>
<RadioButton x:Name = "HideAppBarRadioButton" Content = "Hide AppBar"
HorizontalAlignment = "Stretch" VerticalAlignment = "Stretch"
Checked = "RadioButton_Checked"/>
</StackPanel>
<StackPanel x:Name = "StatusBarControls" Orientation = "Vertical"
Margin = "75,350,0,0" Visibility = "Visible">
<CheckBox x:Name = "StatusBarBackgroundCheckBox"
Content = "Set StatusBar Background"
Checked = "StatusBarBackgroundCheckBox_Checked"
Unchecked = "StatusBarBackgroundCheckBox_Unchecked"/>
<CheckBox x:Name = "StatusBarHiddenCheckBox"
Content = "Set StatusBar Hidden" Checked = "StatusBarHiddenCheckBox_Checked"
Unchecked = "StatusBarHiddenCheckBox_Unchecked"/>
</StackPanel>
</Grid>
</Page>
ด้านล่างนี้คือการใช้งาน C # สำหรับเหตุการณ์ต่างๆ
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at
http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace UWPAdoptiveCode {
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page {
private Color? DefaultTitleBarButtonsBGColor;
private Color? DefaultTitleBarBGColor;
public MainPage() {
this.InitializeComponent();
//Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().
VisibleBoundsCh anged += MainPage_VisibleBoundsChanged;
var viewTitleBar = Windows.UI.ViewManagement.ApplicationView.
GetForCurrentView().TitleBar;
DefaultTitleBarBGColor = viewTitleBar.BackgroundColor;
DefaultTitleBarButtonsBGColor = viewTitleBar.ButtonBackgroundColor;
}
private void RadioButton_Checked(object sender, RoutedEventArgs e) {
// Bottom AppBar shows on Desktop and Mobile
if (ShowAppBarRadioButton != null) {
if (ShowAppBarRadioButton.IsChecked.HasValue &&
(ShowAppBarRadioButton.IsChecked.Value == true)) {
commandBar.Visibility = Windows.UI.Xaml.Visibility.Visible;
commandBar.Opacity = 1;
} else {
commandBar.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}
}
if (ShowOpaqueAppBarRadioButton != null) {
if (ShowOpaqueAppBarRadioButton.IsChecked.HasValue &&
(ShowOpaqueAppBarRadioButton.IsChecked.Value == true)){
commandBar.Visibility = Windows.UI.Xaml.Visibility.Visible;
commandBar.Background.Opacity = 0;
} else{
commandBar.Background.Opacity = 1;
}
}
}
private void StatusBarHiddenCheckBox_Checked(object sender, RoutedEventArgs e){
// StatusBar is Mobile only
if (Windows.Foundation.Metadata.ApiInformation.
IsTypePresent("Windows.UI.ViewManag ement.StatusBar")){
var ignore = Windows.UI.ViewManagement.StatusBar.GetForCurrentView().HideAsync();
}
}
private void StatusBarHiddenCheckBox_Unchecked(object sender, RoutedEventArgs e){
// StatusBar is Mobile only
if (Windows.Foundation.Metadata.ApiInformation.
IsTypePresent("Windows.UI.ViewManag ement.StatusBar")){
var ignore = Windows.UI.ViewManagement.StatusBar.GetForCurrentView().ShowAsync();
}
}
private void StatusBarBackgroundCheckBox_Checked(object sender, RoutedEventArgs e){
// StatusBar is Mobile only
if (Windows.Foundation.Metadata.ApiInformation.
IsTypePresent("Windows.UI.ViewManag ement.StatusBar")){
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().
BackgroundColor = Windows.UI.Colors.Blue;
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().
BackgroundOpacity = 1;
}
}
private void StatusBarBackgroundCheckBox_Unchecked(object sender, RoutedEventArgs e){
// StatusBar is Mobile only
if (Windows.Foundation.Metadata.ApiInformation.
IsTypePresent("Windows.UI.ViewManag ement.StatusBar")){
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().
BackgroundOpacity = 0;
}
}
}
public class DeviceFamilyTrigger : StateTriggerBase{
//private variables
private string _deviceFamily;
//Public property
public string DeviceFamily {
get {
return _deviceFamily;
}
set{
_deviceFamily = value;
var qualifiers = Windows.ApplicationModel.Resources.Core.ResourceContext.
GetForCurrentView().Qua lifierValues;
if (qualifiers.ContainsKey("DeviceFamily"))
SetActive(qualifiers["DeviceFamily"] == _deviceFamily);
else
SetActive(false);
}
}
}
}
เมื่อโค้ดที่ระบุข้างต้นถูกรวบรวมและดำเนินการบนมือถือคุณจะเห็นหน้าต่างต่อไปนี้
คุณสามารถเปลี่ยนสีพื้นหลังของแถบสถานะด้วยช่องทำเครื่องหมายดังที่แสดงในภาพ
คุณยังสามารถซ่อนแถบสถานะ
ตอนนี้เมื่อคุณเรียกใช้แอปพลิเคชันเดียวกันบนอุปกรณ์เดสก์ท็อปคุณจะเห็นหน้าต่างต่อไปนี้ซึ่งมองไม่เห็นแถบสถานะและช่องทำเครื่องหมายเฉพาะสำหรับแถบสถานะ