Desenvolvimento do Windows 10 - Código Adaptativo

Neste capítulo, vamos demonstrar a adoção de seu aplicativo para diferentes dispositivos suportados pelo Windows 10. Já aprendemos sobre como adotar sua IU e todos os truques, técnicas e controles usados em aplicativos UWP.

Agora, vamos aprender sobre como adotar seu código, porque

Os códigos de aplicativo não são iguais em todos os dispositivos.
APIs usadas, principalmente para Xbox, não estarão disponíveis para dispositivos móveis. A mesma coisa é verdadeira para HoloLens etc.

Adaptive o código pode iluminar seu aplicativo condicionalmente e executar o código apenas quando executado em uma família de dispositivos específica e / ou em uma versão específica da plataforma / extensão APIs.

Escrevendo código

No Windows 10, você pode implementar os aplicativos UWP no Visual Studio usando C ++, C #, Visual Basic ou JavaScript.

Com C # e Visual Basic, você pode usar XAML para design de IU.
Com C ++, você pode usar DirectX em vez de usar XAML.
Para JavaScript, você pode usar HTML para sua camada de apresentação, que é uma plataforma cruzada de padrões da Web.

As APIs do Windows Core são executadas da mesma maneira para todos os dispositivos, que contêm a maior parte da funcionalidade necessária para o seu código e interface do usuário. No entanto, para o código e a IU adaptada para famílias de dispositivos específicos, você precisa usar o código adaptável e a IU adaptável.

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

A IU se adapta facilmente a telas diferentes, mas famílias de dispositivos diferentes não só têm tamanhos de tela diferentes, mas muito mais do que isso.

Por exemplo, os telefones celulares têm alguns botões de hardware, como Voltar e Câmera, que podem não estar disponíveis em outros dispositivos, como PC.
Por padrão, as APIs principais contêm a maior parte da funcionalidade, que funciona para todos os dispositivos, mas a funcionalidade específica do dispositivo pode ser usada referenciando os SDKs de extensão em seus aplicativos UWP, assim como assemblies externos.

Para adicionar qualquer extensão SDK específica, necessária em seu aplicativo, siga as etapas fornecidas abaixo -

Clique com o botão direito no References.
Selecione “Add References..”. A seguinte caixa de diálogo será aberta.

Adicionar uma extensão é tão simples quanto adicionar uma referência de projeto.
Agora você pode adicionar qualquer extensão SDK da lista, que contém Desktop Extension, IoT Extension e Mobile Extension etc.

As extensões para desktop e celular são os dois SDKs de extensão de plataforma mais comuns. A extensão Mobile, por exemplo, ativa as APIs necessárias para usar o botão de hardware da câmera.

Você pode verificar os recursos do dispositivo usando o Windows.Foundation.Metadata.ApiInformationmétodo de classe, que retorna uma saída booleana se o tipo for compatível com o dispositivo atual. Por exemplo, você pode habilitar seu aplicativo do Windows para usar o botão Câmera com um código como este -

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

O código do botão da câmera do telefone será executado apenas se o SDK de extensão móvel estiver habilitado no dispositivo. Da mesma forma, você também pode verificar qualquer evento, método ou propriedade particular na versão atual da API usandoIsEventPresent, IsMethodPresent, IsPropertyPresent, ao invés de IsTypePresent como mostrado abaixo.

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

APIs Win32 no UWP

Um aplicativo UWP (Universal Widows Platform) ou Windows Runtime Component, que são escritos em C ++ / CX, podem acessar APIs Win32, que agora também fazem parte da UWP. Todas as famílias de dispositivos do Windows 10 podem implementar APIs Win32 vinculando seu aplicativo comWindowsapp.lib.

Windowsapp.libé uma biblioteca "guarda-chuva" que fornece as exportações para as APIs UWP. Vinculando aWindowsapp.lib adicionará ao seu aplicativo dependências de dlls que estão presentes em todas as famílias de dispositivos Windows 10.

Vamos dar uma olhada em um exemplo simples em que o aplicativo é direcionado tanto ao desktop quanto ao telefone. Portanto, quando o aplicativo é executado na área de trabalho, ele não mostra a barra de status, mas quando o mesmo aplicativo é executado no telefone, ele exibe a barra de status.

A seguir está o código XAML no qual diferentes controles são adicionados.

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

A seguir está a implementação do C # para diferentes eventos.

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

Quando o código fornecido acima for compilado e executado em um celular, você verá a seguinte janela.

Você pode alterar a cor de fundo da barra de status com a caixa de seleção conforme mostrado na imagem.

Você também pode ocultar a barra de status.

Agora, ao executar o mesmo aplicativo em um dispositivo desktop, você verá a seguinte janela na qual a barra de status e as caixas de seleção específicas para a barra de status não estão visíveis.

↰ Previous page Next page ↱