Phát triển Windows 10 - Mã thích ứng

Trong chương này, chúng tôi sẽ trình bày việc áp dụng ứng dụng của bạn cho các thiết bị khác nhau được hỗ trợ bởi Windows 10. Chúng tôi đã tìm hiểu về việc áp dụng giao diện người dùng của bạn và tất cả các thủ thuật, kỹ thuật và điều khiển được sử dụng trong các ứng dụng UWP.

Bây giờ, chúng ta sẽ tìm hiểu về việc áp dụng mã của bạn, bởi vì

  • Mã ứng dụng không giống nhau trên tất cả các thiết bị.

  • Các API được sử dụng, đặc biệt cho Xbox, sẽ không khả dụng cho các thiết bị di động. Điều tương tự cũng đúng với HoloLens, v.v.

Adaptive mã có thể làm sáng ứng dụng của bạn một cách có điều kiện và chỉ thực thi mã khi chạy trên một dòng thiết bị cụ thể và / hoặc trên một phiên bản cụ thể của các API nền tảng / tiện ích mở rộng.

Viết mã

Trong Windows 10, bạn có thể triển khai các ứng dụng UWP trong Visual Studio bằng cách sử dụng C ++, C #, Visual Basic hoặc JavaScript.

  • Với C # và Visual Basic, bạn có thể sử dụng XAML để thiết kế giao diện người dùng.

  • Với C ++, bạn có thể sử dụng DirectX thay vì sử dụng XAML.

  • Đối với JavaScript, bạn có thể sử dụng HTML cho lớp trình bày của mình, đây là một tiêu chuẩn Web đa nền tảng.

Các API Windows Core chạy theo cùng một cách cho tất cả các thiết bị, chứa hầu hết các chức năng bạn cần cho mã và giao diện người dùng của mình. Tuy nhiên, đối với mã và giao diện người dùng được điều chỉnh cho các họ thiết bị cụ thể, bạn cần sử dụng mã thích ứng và giao diện người dùng thích ứng.

Calling an API that is NOT implemented by the target device family −

Giao diện người dùng thích ứng với các màn hình khác nhau một cách dễ dàng, nhưng các dòng thiết bị khác nhau không chỉ có kích thước màn hình khác nhau mà nó còn có nhiều hơn thế.

  • Ví dụ: điện thoại di động có một số nút phần cứng như Quay lại và Máy ảnh, những nút này có thể không khả dụng trên các thiết bị khác như PC.

  • Theo mặc định, các API cốt lõi chứa hầu hết các chức năng, hoạt động cho tất cả các thiết bị, nhưng chức năng cụ thể của thiết bị có thể được sử dụng bằng cách tham chiếu SDK mở rộng trong các ứng dụng UWP của bạn giống như các hội đồng bên ngoài.

Để thêm bất kỳ SDK tiện ích mở rộng cụ thể nào, cần thiết vào ứng dụng của bạn, hãy làm theo các bước dưới đây:

  • Nhấp chuột phải vào References.

  • Lựa chọn “Add References..”. Hộp thoại sau sẽ mở ra.

  • Thêm một tiện ích mở rộng cũng đơn giản như thêm một tham chiếu dự án.

  • Giờ đây, bạn có thể thêm bất kỳ SDK mở rộng nào từ danh sách, chứa Tiện ích mở rộng trên máy tính để bàn, Tiện ích mở rộng IoT và Tiện ích mở rộng di động, v.v.

Tiện ích mở rộng dành cho máy tính để bàn và thiết bị di động là hai SDK mở rộng nền tảng phổ biến nhất. Ví dụ: tiện ích mở rộng Di động cho phép các API cần thiết để sử dụng nút camera phần cứng.

Bạn có thể kiểm tra các khả năng của thiết bị bằng cách sử dụng Windows.Foundation.Metadata.ApiInformationphương thức lớp, trả về đầu ra Boolean nếu kiểu được hỗ trợ trên thiết bị hiện tại. Ví dụ: bạn có thể kích hoạt ứng dụng Windows của mình để sử dụng nút Máy ảnh với mã như thế này -

bool isHardwareButtonsAPIPresent = 
   Windows.Foundation.Metadata.ApiInformation.
   IsTypePresent("Windows.Phone.UI.Inpu t.HardwareButtons");  
		
if (isHardwareButtonsAPIPresent) { 
   Windows.Phone.UI.Input.HardwareButtons.CameraPressed += HardwareButtons_CameraPressed; 
}

Mã nút máy ảnh điện thoại sẽ chỉ thực thi nếu SDK tiện ích mở rộng di động được bật trên thiết bị. Tương tự, bạn cũng có thể kiểm tra bất kỳ sự kiện, phương pháp hoặc thuộc tính cụ thể nào trong phiên bản API hiện tại bằng cách sử dụngIsEventPresent, IsMethodPresent, IsPropertyPresent, thay vì IsTypePresent như hình bên dưới.

bool isHardwareButtons_CameraPressedAPIPresent = 
   Windows.Foundation.Metadata.ApiInformation.IsEventPresent 
   ("Windows.Phone.UI.Input.HardwareButtons", "CameraPressed");

Các API Win32 trong UWP

Ứng dụng Universal Widows Platform (UWP) hoặc Windows Runtime Component, được viết bằng C ++ / CX, có thể truy cập các API Win32, hiện cũng là một phần của UWP. Tất cả các họ thiết bị Windows 10 đều có thể triển khai các API Win32 bằng cách liên kết ứng dụng của bạn vớiWindowsapp.lib.

Windowsapp.liblà một lib "ô" cung cấp các bản xuất cho các API UWP. Liên kết vớiWindowsapp.lib sẽ thêm vào ứng dụng của bạn sự phụ thuộc vào dlls hiện có trên tất cả các họ thiết bị Windows 10.

Hãy để chúng tôi xem xét một ví dụ đơn giản trong đó ứng dụng nhắm mục tiêu cả máy tính để bàn và điện thoại. Do đó, khi ứng dụng chạy trên màn hình nền sẽ không hiển thị thanh trạng thái, nhưng khi ứng dụng tương tự chạy trên điện thoại, nó sẽ hiển thị thanh trạng thái.

Dưới đây là mã XAML trong đó các điều khiển khác nhau được thêm vào.

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

Dưới đây là cách triển khai C # cho các sự kiện khác nhau.

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); 
         } 
      } 
   } 
}

Khi đoạn mã đã cho ở trên được biên dịch và thực thi trên Điện thoại di động, bạn sẽ thấy cửa sổ sau.

Bạn có thể thay đổi màu nền của thanh trạng thái bằng hộp kiểm như trong hình.

Bạn cũng có thể ẩn thanh trạng thái.

Bây giờ, khi bạn chạy cùng một ứng dụng trên thiết bị máy tính để bàn, bạn sẽ thấy cửa sổ sau, trong đó thanh trạng thái và các hộp kiểm dành riêng cho thanh trạng thái không hiển thị.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved