Baixe o app para aproveitar ainda mais
Prévia do material em texto
ContentsContents Xamarin.Forms Introdução Requisitos Hello, Xamarin.Forms Parte 1: início rápido Parte 2: Aprofundamento Multitela Hello, Xamarin.Forms Parte 1: início rápido Parte 2: Aprofundamento Introdução ao Xamarin.Forms XAML Noções básicas de XAML Parte 1. Introdução ao XAML Parte 2. Sintaxe essencial de XAML Parte 3. Extensões de Marcação XAML Parte 4. Conceitos básicos da associação de dados Parte 5. De associações de dados a MVVM compilação de XAML Recarregamento dinâmico Visualizador de XAML Namespaces XAML Extensões de marcação XAML Consumo de extensões de marcação XAML Criação de extensões de marcação XAML Modificadores de campo Passar argumentos Propriedades vinculáveis Propriedades anexadas Dicionários de recurso XAML Standard (Visualização) Controles Conceitos básicos de aplicativo Acessibilidade Configuração de valores de acessibilidade em elementos da Interface do usuário Classe de aplicativo Ciclo de vida do aplicativo Comportamentos Introdução Comportamentos anexados Comportamentos do Xamarin.Forms Comportamentos reutilizáveis EffectBehavior EventToCommandBehavior Renderizadores personalizados Introdução Classes base do renderizador e controles nativos Personalizar uma entrada Personalizar um ContentPage Personalizar uma mapa Personalizar um Pin de mapa Realçar uma área circular em um mapa Realçar uma região em um mapa Realçar uma rota em um mapa Personalizar uma ListView Personalizar uma ViewCell Implementar uma exibição Implementar um HybridWebView Implementar um player de vídeo Criar os players de vídeo de plataforma Reproduzir um vídeo da Web Associar fontes de vídeo ao player Carregar vídeos de recursos do aplicativo Acessar a biblioteca de vídeos do dispositivo Controles personalizados de transporte de vídeo Posicionamento de vídeo personalizado Associação de dados Associações básicas Modo de associação Formação de cadeia de caracteres Caminho de associação Conversores de associação de valor A interface de comando DependencyService Introdução Implementação de texto em fala Verificação da orientação do dispositivo Verificação do Status da bateria Seleção da biblioteca de fotos Efeitos Introdução Criação do objeto Passando parâmetros Parâmetros como propriedades CLR Parâmetros como propriedades anexadas Invocação de eventos Arquivos Gestos Toque Pinçar Panorâmica Localização Localização de cadeia de caracteres e imagem Localização da direita para esquerda Bancos de dados locais MessagingCenter Navegação Navegação hierárquica TabbedPage CarouselPage MasterDetailPage Páginas modais Exibição de pop-ups Modelos Modelos de controle Introdução Criação do modelo de controle Associações de modelo Modelos de dados Introdução Criação de modelo de dados Seleção de modelo de dados Gatilhos Interface do Usuário Animação Animações simples Funções de easing Animações personalizadas BoxView Button Cores Referência de controles Páginas Layouts Exibições Células DataPages Introdução Referência de controles DatePicker Elementos gráficos Usar CocosSharp em Xamarin.Forms Usar SkiaSharp em Xamarin.Forms Noções básicas de desenho do SkiaSharp Desenhar um círculo simples Integração com Xamarin.Forms Unidades independentes de dispositivo e pixels Animação básica Integração de texto e elementos gráficos Noções básicas de bitmap Caminhos e linhas de SkiaSharp limites de linha e de traço Noções básicas do caminho Os tipos de preenchimento do caminho Polilinhas e equações paramétricas Pontos e traços Pintura a dedo Transformações de SkiaSharp A transformação de conversão A transformação de escala A transformação de rotação A transformação de distorção Transformações de matriz Manipulações de toque Transformações não afins Rotação 3D Curvas e caminhos de SkiaSharp Três formas de desenhar um arco Três tipos de curvas de Bézier Dados de caminho SVG Recorte com caminhos de regiões Efeitos de caminho Caminhos e texto Enumeração e informações de caminho Bitmaps do SkiaSharp Exibição de bitmaps Criação e desenho em bitmaps Recorte de bitmaps Exibição segmentada de bitmaps Salvamento de bitmaps em arquivos Acesso de bits de pixel de bitmap Animação de bitmaps Usar UrhoSharp em Xamarin.Forms Imagens Layouts StackLayout AbsoluteLayout RelativeLayout Grade FlexLayout ScrollView LayoutOptions Margem e preenchimento Orientação do dispositivo Tablet e desktop Criar um layout personalizado Compactação de Layout ListView Fontes de dados Aparência de célula Aparência de lista Interatividade Desempenho Mapas Seletor Definir a propriedade ItemsSource de um seletor Adicionar dados à coleção de itens do seletor Slider Estilos Aplicar estilo a aplicativos do Xamarin.Forms usando os estilos XAML Introdução Estilos explícitos Estilos implícitos Estilos globais Herança de estilo Estilos dinâmicos Estilos de dispositivo Aplicar estilo a aplicativos do Xamarin.Forms usando as CSS (folhas de estilos em cascata) TableView Texto Rótulo Entry Editor Fontes Estilos Temas Tema claro Tema escuro Criar um tópico personalizado Visual State Manager WebView Recursos da plataforma Android AppCompat e Design de material Indexação de aplicativo e vinculação profunda Classe de dispositivo iOS Formatação GTK# Mac Formulários nativos Exibições nativas Exibições nativos em XAML Exibições nativas em C# Especificações da plataforma Consumo itens específicos à plataforma iOS Android Windows Criação de itens específicos à plataforma Plugins Tizen Windows Instalação WPF Xamarin.Essentials Introdução Acelerômetro Informações do aplicativo Bateria Área de transferência Bússola Conectividade Transferência de dados Informações sobre DeviceDisplay Informações do dispositivo Email Auxiliares do sistema de arquivos Lanterna Geocódigo Geolocalização Giroscópio Inicializador Magnetômetro Thread principal Mapas Abrir Navegador Sensor de orientação Discagem telefônica Potência Preferências Bloqueio de tela Armazenamento seguro SMS Conversão de texto em fala Monitoramento de versões Vibrar Solução de problemas Serviços de dados e de nuvem Noções básicas da amostra Consumo de Serviços Web ASMX WCF REST Aplicativos Móveis do Azure Autenticar o acesso as Serviços Web REST OAuth Aplicativos Móveis do Azure Azure Active Directory B2C Integração do Azure Active Directory B2C com Aplicativos Móveis do Azure Sincronizar dados com Serviços Web Aplicativos Móveis do Azure Enviar notificações por push Azure Armazenar arquivos na nuvem Armazenamento do Azure Pesquisar dados na nuvem Azure Search Armazenar dados em um banco de dados de documento Consumo de um banco de dados de documento do Azure Cosmos DB Autenticar usuários com um banco de dados de documento do Azure Cosmos DB Adicionar inteligência com Serviços Cognitivos Reconhecimento de fala Verificação ortográfica Tradução de texto Reconhecimento de emoção Implantação e Teste Desempenho Xamarin.UITest e Test Cloud Conceitos avançados e recursos internos Renderizadores Rápidos .NET Standard Resolução de dependência Solução de problemas Perguntas frequentes Posso atualizar o modelo padrão Xamarin.Forms para um pacote NuGet mais recente? Por que o designer XAML do Visual Studio não funciona para arquivos XAML do Xamarin.Forms? Erro de compilação do Android: a tarefa "LinkAssemblies" falhouinesperadamente Por que meu projeto Xamarin.Forms.Maps do Android falha com COMPILETODALVIK: UNEXPECTED TOP-LEVEL ERROR? Notas de Versão Amostras Criação de aplicativos móveis com Xamarin.Forms Book Livro eletrônico Padrões de aplicativo empresarial Introdução ao Xamarin.Forms 25/06/2018 • 2 minutes to read • Edit Online Requisitos Hello, Xamarin.Forms Multitela Hello, Xamarin.Forms Introdução ao Xamarin.Forms Introdução ao Xamarin University Links relacionados Xamarin.Forms é um kit de ferramentas de interface do usuário multiplataforma que permite que os desenvolvedores criem, com eficiência, layouts de interface de usuário nativos que possam ser compartilhados entre iOS, Android e aplicativos da Plataforma Universal do Windows. Esta série introduz noções básicas do desenvolvimento do Xamarin.Forms e aborda a compilação de aplicativos multitela e multiplataforma. Para obter uma visão geral da instalação e práticas recomendadas de instalação aplicáveis ao desenvolvimento de plataforma cruzada, consulte Requisitos e instalação do Xamarin.Forms. Início rápido do Xamarin.Forms Visão geral dos requisitos de plataforma para aplicativos desenvolvidos para o Xamarin.Forms e dos requisitos mínimos do sistema para desenvolver com o Xamarin.Forms no Visual Studio para Mac e Visual Studio. Este guia fornece uma introdução ao desenvolvimento de um aplicativo Xamarin.Forms usando o Visual Studio para Mac ou Visual Studio. Os tópicos abordados incluem ferramentas, conceitos e etapas necessárias para criar e implantar um aplicativo Xamarin.Forms. Este guia estende o aplicativo criado anteriormente apresentando a navegação em uma segunda página. Os tópicos abordados incluem a vinculação de dados e execução da navegação. Este artigo discute alguns dos principais conceitos para desenvolver aplicativos usando o Xamarin.Forms, incluindo Exibições e Layouts, o controle ListView, Vinculação de dados e Navegação. Criando seu primeiro aplicativo Xamarin.Forms com o Xamarin para Visual Studio, da Xamarin University Aprendizado autodirigido gratuito (vídeo) Introdução ao Xamarin (vídeo) Pasta de trabalho do Hello, Xamarin.Forms iOS Requisitos do Xamarin.Forms 25/06/2018 • 4 minutes to read • Edit Online Plataformas de destino Suporte adicional da plataformaSuporte adicional da plataforma Plataformas de versões anterioresPlataformas de versões anteriores AndroidAndroid Requisitos de sistema de plataforma e desenvolvimento para Xamarim.Forms. Consulte o artigo de Instalação para obter uma visão geral da instalação e das práticas recomendadas aplicáveis entre plataformas. Aplicativos Xamarin.Forms podem ser gravados para os seguintes sistemas operacionais: iOS 8 ou superior Android 4.0.3 (API 15) ou superior (mais detalhes) Plataforma Universal do Windows do Windows 10 (mais detalhes) Presume-se que os desenvolvedores estejam familiarizados com o .NET Standard e com Projetos Compartilhados. O status dessas plataformas está disponível no GitHub do Xamarin.Forms: Samsung Tizen macOS GTK# WPF Não há suporte para uso do Xamarin.Forms 3.0 nas seguintes plataformas: WinRT do Windows 8.1/Windows Phone 8.1 Windows Phone 8 Silverlight Você precisa ter a plataforma das Ferramentas do SDK do Android e da API do Android mais recente instalada. É possível atualizar para as versões mais recentes usando o Gerenciador de SDK do Android. Além disso, a versão de destino/compilação para projetos do Android deve ser definida como Usar a plataforma mais recente instalada. No entanto, a versão mínima pode ser definida como API 15, de modo que você pode continuar dando suporte a dispositivos que usam o Android 4.0.3 e mais recentes. Esses valores são definidos nas Opções de Projeto: Visual Studio Visual Studio para Mac Opções de Projeto > Aplicativo > Propriedades do Aplicativo Requisitos do sistema de desenvolvimento Requisitos do sistema do Mac NOTENOTE Requisitos do sistema do Windows UWP (Plataforma Universal do Windows)UWP (Plataforma Universal do Windows) Aplicativos Xamarin.Forms podem ser desenvolvidos no macOS e no Windows. No entanto, o Windows e o Visual Studio são necessários para produzir versões do Windows do aplicativo. Você pode usar o Visual Studio para Mac para desenvolver aplicativos Xamarin.Forms no OS X El Capitan (10.11) ou mais recente. Para desenvolver aplicativos iOS, é recomendável ter pelo menos o SDK do iOS 10 e o Xcode 8 instalados. Aplicativos do Windows não podem ser desenvolvidos no macOS. Aplicativos Xamarin.Forms para iOS e Android podem ser compilados em qualquer instalação do Windows que dê suporte a desenvolvimento do Xamarin. É necessário ter o Visual Studio 2017 ou mais recente em execução no Windows 7 ou superior. Um Mac em rede é necessário para o desenvolvimento do iOS. O desenvolvimento de aplicativos Xamarin.Forms para UWP requer : Windows 10 (é recomendável o Fall Creators Update) Visual Studio 2017 SDK do Windows 10 Os projetos da UWP são incluídos em soluções do Xamarin.Forms criadas no Visual Studio 2017, exceto as soluções criadas no Visual Studio 2017 para Mac. Você pode também adicionar um aplicativo UWP (Plataforma Universal do Windows) a uma solução Xamarin.Forms existente a qualquer momento. Hello, Xamarin.Forms 28/07/2018 • 2 minutes to read • Edit Online Parte 1: início rápido Parte 2: Aprofundamento Links relacionados Este guia fornece uma introdução ao desenvolvimento de um aplicativo Xamarin.Forms usando o Visual Studio para Mac ou Visual Studio e as noções básicas de desenvolvimento de aplicativos usando o Xamarin.Forms. Os tópicos abordados incluem ferramentas, conceitos e etapas necessárias para criar e implantar um aplicativo Xamarin.Forms. Comece revisando os Requisitos do Sistema do Xamarin.Forms. A primeira parte deste guia demonstra como criar um aplicativo que converte um número de telefone alfanumérico inserido pelo usuário em numérico e, em seguida, chama esse número. A segunda parte deste guia analisa o que foi compilado para entender dos fundamentos de como funcionam os aplicativos Xamarin.Forms. Introdução ao Xamarin.Forms Depurando no Visual Studio Receitas do Visual Studio para Mac - Depuração Aprendizado autodirigido gratuito (vídeo) Introdução ao Xamarin (vídeo) Pasta de trabalho do Hello, Xamarin.Forms iOS Início rápido do Xamarin.Forms 31/07/2018 • 25 minutes to read • Edit Online Esse passo a passo demonstra como criar um aplicativo que converte um número de telefone alfanumérico inserido pelo usuário em um número de telefone e que chama o número. O aplicativo final é mostrado abaixo: Crie o aplicativo Phoneword da seguinte maneira: Visual Studio Visual Studio para Mac 1. Na tela Iniciar, inicialize o Visual Studio. Isso abre a página inicial: 2. No Visual Studio, clique em Criar novo projeto... para criar um novo projeto: NOTENOTE 3. Na caixa de diálogo Novo Projeto, clique em Multiplataforma, selecione o modelo Aplicativo Móvel (Xamarin.Forms), defina o Nome e como Phoneword, escolha um local adequado para o projeto e clique no botão OK: Falha em dar à solução o nome de Phoneword resultará em vários erros de build. 4. Na caixa de diálogo Novo Aplicativo de Plataforma Cruzada, clique em Aplicativo em Branco, selecione .NET Standard como a estratégia de compartilhamento de código e clique no botão OK: <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Phoneword.MainPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness"> <On Platform="iOS" Value="20, 40, 20, 20" /> <On Platform="Android, UWP"Value="20" /> </OnPlatform> </ContentPage.Padding> <StackLayout> <Label Text="Enter a Phoneword:" /> <Entry x:Name="phoneNumberText" Text="1-855-XAMARIN" /> <Button x:Name="translateButon" Text="Translate" Clicked="OnTranslate" /> <Button x:Name="callButton" Text="Call" IsEnabled="false" Clicked="OnCall" /> </StackLayout> </ContentPage> 5. No Gerenciador de Soluções, no projeto Phoneword, clique duas vezes em MainPage.xaml para abri- lo: 6. Em MainPage.xaml, remova todo o código de modelo e substitua-o pelo código a seguir. Esse código define declarativamente a interface do usuário para a página: Salve as alterações em MainPage.xaml ao pressionar CTRL+S e feche o arquivo. 7. No Gerenciador de Soluções, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo: 8. Em MainPage.xaml.cs, remova todo o código de modelo e substitua-o pelo código a seguir. Os métodos OnTranslate e OnCall serão executados em resposta aos botões Converter e Chamar clicados na interface do usuário, respectivamente: using System; using Xamarin.Forms; namespace Phoneword { public partial class MainPage : ContentPage { string translatedNumber; public MainPage () { InitializeComponent (); } void OnTranslate (object sender, EventArgs e) { translatedNumber = PhonewordTranslator.ToNumber (phoneNumberText.Text); if (!string.IsNullOrWhiteSpace (translatedNumber)) { callButton.IsEnabled = true; callButton.Text = "Call " + translatedNumber; } else { callButton.IsEnabled = false; callButton.Text = "Call"; } } async void OnCall (object sender, EventArgs e) { if (await this.DisplayAlert ( "Dial a Number", "Would you like to call " + translatedNumber + "?", "Yes", "No")) { var dialer = DependencyService.Get<IDialer> (); if (dialer != null) dialer.Dial (translatedNumber); } } } } NOTENOTE Tentar compilar o aplicativo neste ponto resultará em erros que serão corrigidos mais tarde. Salve as alterações em MainPage.xaml.cs ao pressionar CTRL+S e feche o arquivo. 9. No Gerenciador de Soluções, clique com botão direito do mouse no projeto Phoneword e selecione Adicionar > Novo Item…: 10. Na caixa de diálogo Adicionar novo item, selecione Visual C# > Código > Classe, nomeie o novo arquivo PhoneTranslator e clique no botão Adicionar: 11. Em PhoneTranslator.cs, remova todo o código de modelo e substitua-o pelo código a seguir. Esse código converterá uma palavra de telefone para um número de telefone: using System.Text; namespace Phoneword { public static class PhonewordTranslator { public static string ToNumber(string raw) { if (string.IsNullOrWhiteSpace(raw)) return null; raw = raw.ToUpperInvariant(); var newNumber = new StringBuilder(); foreach (var c in raw) { if (" -0123456789".Contains(c)) newNumber.Append(c); else { var result = TranslateToNumber(c); if (result != null) newNumber.Append(result); // Bad character? else return null; } } return newNumber.ToString(); } static bool Contains(this string keyString, char c) { return keyString.IndexOf(c) >= 0; } static readonly string[] digits = { "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ" }; static int? TranslateToNumber(char c) { for (int i = 0; i < digits.Length; i++) { if (digits[i].Contains(c)) return 2 + i; } return null; } } } Salve as alterações em PhoneTranslator.cs pressionando CTRL + S e feche o arquivo. 12. No Gerenciador de Soluções, clique com botão direito do mouse no projeto Phoneword e selecione Adicionar > Novo Item…: namespace Phoneword { public interface IDialer { bool Dial(string number); } } NOTENOTE 13. Na caixa de diálogo Adicionar novo item, selecione Visual C# > Código > Interface, nomeie o novo arquivo IDialer e clique no botão Adicionar: 14. Em IDialer.cs, remova todo o código de modelo e substitua-o pelo código a seguir. Esse código define um método Dial que deve ser implementado em cada plataforma para discar um número de telefone convertido: Salve as alterações em IDialer.cs pressionando CTRL + S e feche o arquivo. Agora o código comum para o aplicativo está concluído. O código de discagem do telefone específico da plataforma agora será implementado como um DependencyService. 15. No Gerenciador de Soluções, clique com botão direito do mouse no projeto Phoneword.iOS e selecione Adicionar > Novo Item…: 16. Na caixa de diálogo Adicionar novo item, selecione Apple > Código > Classe, nomeie o novo arquivo PhoneDialer e clique no botão Adicionar: 17. Em PhoneDialer.cs, remova todo o código de modelo e substitua-o pelo código a seguir. Esse código cria o método Dial que será usado na plataforma iOS para discar um número de telefone convertido: using Foundation; using Phoneword.iOS; using UIKit; using Xamarin.Forms; [assembly: Dependency(typeof(PhoneDialer))] namespace Phoneword.iOS { public class PhoneDialer : IDialer { public bool Dial(string number) { return UIApplication.SharedApplication.OpenUrl ( new NSUrl ("tel:" + number)); } } } Salve as alterações em PhoneDialer.cs pressionando CTRL + S e feche o arquivo. 18. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto Phoneword.Android e selecione Adicionar > Novo Item…: 19. Na caixa de diálogo Adicionar novo item, selecione Visual C# > Android > Classe, nomeie o novo arquivo PhoneDialer e clique no botão Adicionar: 20. Em PhoneDialer.cs, remova todo o código de modelo e substitua-o pelo código a seguir. Esse código cria o método Dial que será usado na plataforma do Android para discar um número de telefone convertido: using Android.Content; using Android.Telephony; using Phoneword.Droid; using System.Linq; using Xamarin.Forms; using Uri = Android.Net.Uri; [assembly: Dependency(typeof(PhoneDialer))] namespace Phoneword.Droid { public class PhoneDialer : IDialer { public bool Dial(string number) { var context = MainActivity.Instance; if (context == null) return false; var intent = new Intent (Intent.ActionDial); intent.SetData (Uri.Parse ("tel:" + number)); if (IsIntentAvailable (context, intent)) { context.StartActivity (intent); return true; } return false; } public static bool IsIntentAvailable(Context context, Intent intent) { var packageManager = context.PackageManager; var list = packageManager.QueryIntentServices (intent, 0) .Union (packageManager.QueryIntentActivities (intent, 0)); if (list.Any ()) return true; var manager = TelephonyManager.FromContext (context); return manager.PhoneType != PhoneType.None; } } } Observe que esse código pressupõe que vocêesteja usando a API do Android mais recente. Salve as alterações em PhoneDialer.cs pressionando CTRL + S e feche o arquivo. 21. Em Gerenciador de Soluções, no projeto Phoneword.Android, clique duas vezes em MainActivity.cs para abri-lo, remova todo o código de modelo e substitua-o pelo código a seguir : using Android.App; using Android.Content.PM; using Android.OS; namespace Phoneword.Droid { [Activity(Label = "Phoneword", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity { internal static MainActivity Instance { get; private set; } protected override void OnCreate(Bundle bundle) { TabLayoutResource = Resource.Layout.Tabbar; ToolbarResource = Resource.Layout.Toolbar; base.OnCreate(bundle); Instance = this; global::Xamarin.Forms.Forms.Init(this, bundle); LoadApplication(new App()); } } } Salve as alterações em MainActivity.cs pressionando CTRL+S e feche o arquivo. 22. No Gerenciador de Soluções, no projeto Phoneword.Android, clique duas vezes em Propriedades e selecione a guia Manifesto do Android: 23. Na seção Permissões necessárias, habilite a permissão CALL_PHONE . Isso dá ao aplicativo permissão para fazer uma chamada telefônica: Salve as alterações no manifesto pressionando CTRL + S e feche o arquivo. 24. No Gerenciador de Soluções, clique com botão direito do mouse no projeto Phoneword.UWP e selecione Adicionar > Novo Item…: 25. Na caixa de diálogo Adicionar novo item, selecione Visual C# > Código > Classe, nomeie o novo arquivo PhoneDialer e clique no botão Adicionar: 26. Em PhoneDialer.cs, remova todo o código de modelo e substitua-o pelo código a seguir. Esse código cria o método Dial , bem como os métodos de ajuda, que serão usados na Plataforma Universal do Windows para discar um número de telefone convertido: using Phoneword.UWP; using System; using System.Threading.Tasks; using Windows.ApplicationModel.Calls; using Windows.UI.Popups; using Xamarin.Forms; [assembly: Dependency(typeof(PhoneDialer))] namespace Phoneword.UWP { public class PhoneDialer : IDialer { bool dialled = false; public bool Dial(string number) { DialNumber(number); return dialled; } async Task DialNumber(string number) { var phoneLine = await GetDefaultPhoneLineAsync(); if (phoneLine != null) { phoneLine.Dial(number, number); dialled = true; } else { var dialog = new MessageDialog("No line found to place the call"); await dialog.ShowAsync(); dialled = false; } } async Task<PhoneLine> GetDefaultPhoneLineAsync() { var phoneCallStore = await PhoneCallManager.RequestStoreAsync(); var lineId = await phoneCallStore.GetDefaultLineAsync(); return await PhoneLine.FromIdAsync(lineId); } } } Salve as alterações em PhoneDialer.cs pressionando CTRL + S e feche o arquivo. 27. No Gerenciador de Soluções, no projeto Phoneword.UWP , clique com o botão direito do mouse em Referências e selecione Adicionar Referência...: 28. Na caixa de diálogo Gerenciador de Referências, selecione Universal do Windows > Extensões > Extensões do Windows Mobile para UWP e clique no botão OK: 29. No Gerenciador de Soluções, no projeto Phoneword.UWP , clique duas vezes em Package.appxmanifest: 30. Na página Funcionalidades, habilite a funcionalidade Chamada telefônica. Isso dá ao aplicativo permissão para fazer uma chamada telefônica: Salve as alterações no manifesto pressionando CTRL + S e feche o arquivo. 31. No Visual Studio, selecione o item de menu Compilar > Compilar Solução (ou pressione CTRL+SHIFT+B). O aplicativo será criado e uma mensagem de êxito será exibida na barra de status do Visual Studio: Se houver erros, repita as etapas anteriores e corrija qualquer erro até que o aplicativo seja compilado com êxito. 32. No Gerenciador de Soluções, clique com botão direito do mouse no projeto Phoneword.UWP e selecione Definir como Projeto de Inicialização: 33. Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para inicializar o aplicativo: 34. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto Phoneword.Android e selecione Definir como Projeto de Inicialização. 35. Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com Links relacionados o botão Reproduzir) para inicializar o aplicativo em um emulador do Android. 36. Se você tiver um dispositivo iOS e atender aos requisitos do sistema do Mac para o desenvolvimento do Xamarin.Forms, use uma técnica semelhante para implantar o aplicativo no dispositivo iOS. Como alternativa, implante o aplicativo para o simulador remoto de iOS. Observação: não há suporte para chamadas telefônicas em todos os simuladores. Parabéns por concluir um aplicativo Xamarin.Forms. O próximo tópico deste guia analisa as etapas seguidas para entender os conceitos básicos do desenvolvimento de aplicativos com o Xamarin.Forms. Acessando recursos nativos por meio do DependencyService Phoneword (amostra) Aprofundamento no Xamarin.Forms 28/07/2018 • 22 minutes to read • Edit Online Introdução ao Visual Studio Anatomia de um aplicativo Xamarin.Forms No Início rápido do Xamarin.Forms, o aplicativo Phoneword foi criado. Este artigo analisa o que foi criado para entender os fundamentos de como os aplicativos Xamarin.Forms funcionam. Visual Studio Visual Studio para Mac O Visual Studio é um IDE avançado da Microsoft. Ele conta com um designer visual totalmente integrado, um editor de texto complementado com ferramentas de refatoração, um navegador de assembly, integração de código-fonte e muito mais. Este artigo se concentra no uso alguns dos recursos básicos do Visual Studio com o plug-in Xamarin. O Visual Studio organiza o código em Soluções e Projetos. Uma solução é um contêiner que pode conter um ou mais Projetos. Um Projeto pode ser um aplicativo, uma biblioteca com suporte, um aplicativo de teste e muito mais. O aplicativo Phoneword consiste em uma solução contendo quatro projetos, conforme mostrado na captura de tela a seguir. Os projetos são: Phoneword – esse projeto é o projeto da biblioteca do .NET Standard que contém todos os códigos compartilhados e interfaces do usuário compartilhadas. Phoneword.Android – esse projeto contém o código específico do Android e é o ponto de entrada para o aplicativo Android. Phoneword.iOS – esse projeto contém o código específico do iOS e é o ponto de entrada para o aplicativo iOS. Phoneword.UWP – esse projeto contém código específico da UWP (Plataforma Universal do Windows) e é o ponto de entrada para o aplicativo UWP. A captura de tela a seguir mostra o conteúdo do projeto de biblioteca do .NET Standard Phoneword no Visual Studio: Arquitetura e conceitos básicos de aplicativo O projeto tem um nó Dependências que contém os nós NuGet e SDK. O nó NuGet contém o pacote do NuGet Xamarin.Forms que foi adicionado ao projeto e o nó SDK contém o metapacote NETStandard.Library que faz referência ao conjunto completo de pacotes do NuGet que definem o .NET Standard. O projeto também consiste em vários arquivos: XAML – a marcação XAML para a classe App , que define um dicionário de recursos para o aplicativo. App.XAML.CS – o code-behind paraa classe App , que é responsável por instanciar a primeira página que será exibida pelo aplicativo em cada plataforma e por processar eventos de ciclo de vida do aplicativo. IDialer.cs – a interface IDialer , que especifica que o método Dial deve ser fornecido por qualquer classe de implementação. MainPage. XAML – a marcação XAML para a classe MainPage , que define a interface do usuário para a página exibida quando o aplicativo é iniciado. MainPage.xaml.cs – o code-behind para a classe MainPage , que contém a lógica de negócios executada quando o usuário interage com a página. PhoneTranslator.cs – a lógica de negócios responsável por converter uma palavra de telefone em um número de telefone, que é invocado de MainPage.xaml.cs. Para saber mais sobre a anatomia de um aplicativo Xamarin.iOS, consulte Anatomia de um aplicativo Xamarin.iOS. Para saber mais sobre a anatomia de um aplicativo Xamarin.Android, consulte Anatomia de um aplicativo Xamarin.Android. Visual Studio Visual Studio para Mac Um aplicativo Xamarin.Forms é arquitetado da mesma forma que um aplicativo tradicional de plataforma cruzada. O código compartilhado normalmente é colocado em uma biblioteca do .NET Standard e aplicativos específicos de plataforma consomem o código compartilhado. O diagrama a seguir mostra uma visão geral dessa relação para o aplicativo Phoneword: using Xamarin.Forms; using Xamarin.Forms.Xaml; [assembly: XamlCompilation(XamlCompilationOptions.Compile)] namespace Phoneword { public partial class App : Application { public App() { InitializeComponent(); MainPage = new MainPage(); } ... } } Iniciar o aplicativo em cada plataforma iOSiOS Para maximizar a reutilização de código de inicialização, os aplicativos Xamarin.Forms têm uma única classe chamada App , que é responsável por instanciar a primeira página que será exibida pelo aplicativo em cada plataforma, conforme mostrado no exemplo de código a seguir : Esse código define a propriedade MainPage da classe App para uma nova instância da classe MainPage . Além disso, o atributo XamlCompilation ativa o compilador XAML para que o XAML seja compilado diretamente em linguagem intermediária. Para saber mais, consulte XAML Compilation (Compilação de XAML). Para inicializar a página inicial do Xamarin.Forms no iOS, o projeto Phoneword.iOS inclui a classe AppDelegate , namespace Phoneword.iOS { [Register ("AppDelegate")] public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate { public override bool FinishedLaunching (UIApplication app, NSDictionary options) { global::Xamarin.Forms.Forms.Init (); LoadApplication (new App ()); return base.FinishedLaunching (app, options); } } } AndroidAndroid namespace Phoneword.Droid { [Activity(Label = "Phoneword", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity { internal static MainActivity Instance { get; private set; } protected override void OnCreate(Bundle bundle) { TabLayoutResource = Resource.Layout.Tabbar; ToolbarResource = Resource.Layout.Toolbar; base.OnCreate(bundle); Instance = this; global::Xamarin.Forms.Forms.Init(this, bundle); LoadApplication(new App()); } } } Plataforma Universal do Windows que herda da classe FormsApplicationDelegate , conforme mostra o exemplo de código a seguir : A substituição FinishedLaunching inicializa a estrutura do Xamarin.Forms ao chamar o método Init . Isso faz a implementação específica do iOS do Xamarin.Forms ser carregada no aplicativo antes que o controlador de exibição de raiz seja definido pela chamada para o método LoadApplication . Para inicializar a página inicial do Xamarin.Forms no Android, o projeto Phoneword.Droid inclui código que cria uma Activity com o atributo MainLauncher , com a atividade herdando da classe FormsAppCompatActivity , como mostra o código de exemplo a seguir : A substituição OnCreate inicializa a estrutura do Xamarin.Forms ao chamar o método Init . Isso faz a implementação específica do Android do Xamarin.Forms ser carregada no aplicativo antes de o aplicativo Xamarin.Forms ser carregado. Além disso, a classe MainActivity armazena uma referência a si mesma na propriedade Instance . A propriedade Instance é conhecida como o contexto local e é referenciada da classe PhoneDialer . Em aplicativos UWP (Plataforma Universal do Windows), o método Init que inicializa a estrutura Xamarin.Forms é chamado da classe App : Xamarin.Forms.Forms.Init (e); if (e.PreviousExecutionState == ApplicationExecutionState.Terminated) { ... } namespace Phoneword.UWP { public sealed partial class MainPage { public MainPage() { this.InitializeComponent(); this.LoadApplication(new Phoneword.App()); } } } NOTENOTE Interface do Usuário Isso faz a implementação específica de UWP do Xamarin.Forms ser carregada no aplicativo. A página inicial do Xamarin.Forms é iniciada pela classe MainPage , conforme demonstrado no exemplo de código a seguir : O aplicativo Xamarin.Forms é carregado com o método LoadApplication . Os aplicativos da Plataforma Universal do Windows (UWP) podem ser criados com o Xamarin.Forms, mas somente usando o Visual Studio no Windows. Há quatro grupos de controle principais usados para criar a interface do usuário de um aplicativo Xamarin.Forms. 1. Páginas – as páginas do Xamarin.Forms representam telas de aplicativos móveis de plataforma cruzada. O aplicativo Phoneword usa a classe ContentPage para exibir uma única tela. Para saber mais sobre páginas, consulte Xamarin.Forms Pages (Páginas do Xamarin.Forms). 2. Layouts – os layouts do Xamarin.Forms são contêineres usados para compor exibições em estruturas lógicas. O aplicativo Phoneword usa a classe StackLayout para organizar controles em uma pilha horizontal. Para saber mais sobre layouts, consulte Xamarin.Forms Layouts (Layouts do Xamarin.Forms). 3. Exibições – as exibições do Xamarin.Forms são os controles exibidos na interface do usuário, como rótulos, botões e caixas de entrada de texto. O aplicativo Phoneword usa os controles Label , Entry e Button . Para saber mais sobre exibições, consulte Xamarin.Forms Views (Exibições do Xamarin.Forms). 4. Células – as células do Xamarin.Forms são elementos especializados usados para itens em uma lista e descrevem como cada item em uma lista deve ser desenhado. O aplicativo Phoneword não usa nenhuma célula. Para saber mais sobre células, consulte Xamarin.Forms Cells (Células do Xamarin.Forms). No tempo de execução, cada controle será mapeado para seu equivalente nativo, que é o que será renderizado. Quando o aplicativo Phoneword é executado em qualquer plataforma, ele exibe uma única tela que corresponde a um Page no Xamarin.Forms. Um Page representa um ViewGroup no Android, um Controlador de Exibição no iOS ou uma Página na Plataforma Universal do Windows. O aplicativo Phoneword também instancia um objeto ContentPage que representa a classe MainPage , cuja marcação XAML é mostrada no exemplo de código a seguir : <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Phoneword.MainPage"> ... <StackLayout> <Label Text="Enter a Phoneword:"/> <Entry x:Name="phoneNumberText" Text="1-855-XAMARIN" /> <Button x:Name="translateButon" Text="Translate" Clicked="OnTranslate" /> <Button x:Name="callButton" Text="Call" IsEnabled="false" Clicked="OnCall" /> </StackLayout> </ContentPage> Respondendo à interação do usuárioRespondendo à interação do usuário void OnTranslate(object sender, EventArgs e) { translatedNumber = Core.PhonewordTranslator.ToNumber (phoneNumberText.Text); if (!string.IsNullOrWhiteSpace (translatedNumber)) { callButton.IsEnabled = true; callButton.Text = "Call " + translatedNumber; } else { callButton.IsEnabled = false; callButton.Text = "Call"; } } <Button x:Name="translateButon" Text="Translate" Clicked="OnTranslate" /> Conceitos adicionais introduzidos no Phoneword A classe MainPage usa um controle StackLayout para organizar automaticamente os controles na tela, não importa o tamanho da tela. Cada elemento filho é posicionado um depois do outro, verticalmente na ordem em que são adicionados. O controle StackLayout contém um controle Label para exibir o texto na página, um controle Entry para aceitar entrada textual do usuário e dois controles Button usados para executar código em resposta a eventos de toque. Para saber mais sobre XAML no Xamarin.Forms, consulte Xamarin.Forms XAML Basics (Noções básicas de XAML no Xamarin.Forms). Um objeto definido em XAML pode acionar um evento que é processado no arquivo code-behind. O seguinte exemplo de código mostra o método OnTranslate no code-behind para a classe MainPage , que é executada em resposta ao disparo do evento Clicked no botão Traduzir. O método OnTranslate traduz a phoneword para seu número de telefone correspondente e, em resposta, define as propriedades no botão de chamada. O arquivo code-behind de uma classe XAML pode acessar um objeto definido em XAML usando o nome atribuído a ele com o atributo x:Name . O valor atribuído a esse atributo tem as mesmas regras que variáveis C#, no sentido de que deve começar com uma letra ou um sublinhado e não conter espaços. A fiação do botão de traduzir para o método OnTranslate ocorre na marcação XAML para a classe MainPage : O aplicativo Phoneword para Xamarin.Forms introduziu vários conceitos não abordados neste artigo. Esses conceitos incluem: Habilitar e desabilitar botões. Um Button pode ser ativado ou desativado alterando sua propriedade IsEnabled . Por exemplo, o seguinte código de exemplo desabilita o callButton : Teste e implantação callButton.IsEnabled = false; await this.DisplayAlert ( "Dial a Number", "Would you like to call " + translatedNumber + "?", "Yes", "No"); async void OnCall (object sender, EventArgs e) { ... var dialer = DependencyService.Get<IDialer> (); ... } return UIApplication.SharedApplication.OpenUrl (new NSUrl ("tel:" + number)); <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" ... > <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness"> <On Platform="iOS" Value="20, 40, 20, 20" /> <On Platform="Android, UWP" Value="20" /> </OnPlatform> </ContentPage.Padding> ... </ContentPage> Exibindo uma caixa de diálogo de alerta. Quando o usuário pressiona a chamada Botão, o aplicativo Phoneword mostra uma Caixa de Diálogo de Alerta com a opção de fazer ou cancelar uma chamada. O método DisplayAlert é usado para criar a caixa de diálogo, como mostrado no código de exemplo a seguir : Acessando recursos nativos por meio da classe DependencyService . O aplicativo Phoneword usa a classe DependencyService para resolver a interface IDialer para implementações de discagem de telefone específicas da plataforma, como mostra o código de exemplo a seguir do projeto Phoneword: Para saber mais sobre a classe DependencyService , consulte Acessando recursos nativos por meio do DependencyService. Fazendo uma chamada telefônica com uma URL. O aplicativo Phoneword usa OpenURL para inicializar o aplicativo de telefone do sistema. A URL consiste em um prefixo tel: seguido pelo número de telefone a ser chamado, como mostra o exemplo de código a seguir do projeto iOS: Ajustando o layout da plataforma. A classe Device permite aos desenvolvedores personalizar o layout e a funcionalidade do aplicativo por plataforma, conforme mostra o exemplo de código a seguir que usa outros valores Padding nas plataformas para exibir corretamente a cada página: Para saber mais sobre os ajustes de plataforma, consulte Device Class (Classe de Dispositivo). Tanto o Visual Studio para Mac quanto o Visual Studio oferecem várias opções para testar e implantar um aplicativo. Depurar aplicativos é uma parte comum do ciclo de vida de desenvolvimento de aplicativo e ajuda a diagnosticar problemas de código. Para saber mais, consulte Definir um ponto de interrupção, Percorrer o código Resumo e Enviar as informações para a janela de log. Simuladores são um bom lugar para começar a implantar e testar um aplicativo e eles apresentam recursos úteis para testar aplicativos. No entanto, os usuários não consumirão o aplicativo final em um simulador, assim, os aplicativos devem ser testados em dispositivos reais antecipadamente e com frequência. Para saber mais sobre o provisionamento de dispositivo iOS, consulte Provisionamento de Dispositivo. Para saber mais sobre o provisionamento de dispositivo Android, consulte Configurar o dispositivo para desenvolvimento. Este artigo examinou os conceitos básicos do desenvolvimento de aplicativos usando o Xamarin.Forms. Os tópicos abordados incluído a anatomia de um aplicativo Xamarin.Forms, arquitetura e conceitos básicos de aplicativo e a interface do usuário. Na próxima seção deste guia, o aplicativo será estendido para incluir várias telas, a fim de explorar conceitos e arquiteturas mais avançados do Xamarin.Forms. Multitela Hello, Xamarin.Forms 28/07/2018 • 2 minutes to read • Edit Online Parte 1: início rápido Parte 2: Aprofundamento Links relacionados Este guia expande o aplicativo Phoneword criado no guia do Hello, Xamarin.Forms para navegar até uma segunda tela. Os tópicos abordados incluem navegação na página e vinculação de dados a uma coleção. A primeira parte deste guia demonstra como adicionar uma segunda tela ao aplicativo Phoneword para controlar o histórico de chamadas para o aplicativo. A segunda parte deste guia examina o que foi compilado para desenvolver uma compreensão da navegação de página e associação de dados em um aplicativo Xamarin.Forms. Introdução ao Xamarin.Forms Depurando no Visual Studio Receitas do Visual Studio para Mac - Depuração Aprendizado autodirigido gratuito (vídeo) Introdução ao Xamarin (vídeo) Início rápido da multitela do Xamarin.Forms 13/07/2018 • 11 minutes to read • Edit Online O início rápido demonstra como estender o aplicativo Phoneword ao adicionar uma segunda tela para controlar o histórico de chamadas para o aplicativo. O aplicativo final é mostrado abaixo: Estenda o aplicativo Phoneword da seguinte maneira: Visual Studio Visual Studio para Mac 1. Inicie o Visual Studio. Na página inicial, clique em Abrir Projeto... e, na caixa de diálogo Abrir Projeto, selecione o arquivo de solução para o projeto Phoneword: 2. No Gerenciador de Soluções, clique com botão direito do mouse no projeto Phoneword e selecione Adicionar > Novo Item…: 3. Na caixa de diálogo Adicionar Novo Item, selecione Itens do Visual C# > Xamarin.Forms > Página de Conteúdo, nomeie o novo item como CallHistoryPage e clique no botão Adicionar. Isso adicionará uma página chamada CallHistoryPage ao projeto: 4. Em CallHistoryPage.xaml, remova todo o código de modelo e substitua-o pelo código a seguir. Esse códigodefine declarativamente a interface do usuário para a página: <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:local="clr-namespace:Phoneword;assembly=Phoneword" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Phoneword.CallHistoryPage" Title="Call History"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness"> <On Platform="iOS" Value="20, 40, 20, 20" /> <On Platform="Android, UWP" Value="20" /> </OnPlatform> </ContentPage.Padding> <StackLayout> <ListView ItemsSource="{x:Static local:App.PhoneNumbers}" /> </StackLayout> </ContentPage> Salve as alterações em CallHistoryPage.xaml ao pressionar CTRL+S e feche o arquivo. 5. No Gerenciador de Soluções, clique duas vezes no arquivo App.xaml.cs no projeto compartilhado Phoneword para abri-lo: 6. Em App.xaml.cs, importe o namespace System.Collections.Generic , adicione a declaração da propriedade PhoneNumbers , inicialize a propriedade no construtor App e inicialize a propriedade MainPage para que seja uma NavigationPage . A coleção PhoneNumbers será usada para armazenar uma lista de cada número de telefone traduzido chamado pelo aplicativo: using System.Collections.Generic; using Xamarin.Forms; using Xamarin.Forms.Xaml; [assembly: XamlCompilation(XamlCompilationOptions.Compile)] namespace Phoneword { public partial class App : Application { public static IList<string> PhoneNumbers { get; set; } public App() { InitializeComponent(); PhoneNumbers = new List<string>(); MainPage = new NavigationPage(new MainPage()); } ... } } <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Vertical" Spacing="15"> ... <Button x:Name="callButton" Text="Call" IsEnabled="false" Clicked="OnCall" /> <Button x:Name="callHistoryButton" Text="Call History" IsEnabled="false" Clicked="OnCallHistory" /> </StackLayout> Salve as alterações em App.xaml.cs ao pressionar CTRL + S e feche o arquivo. 7. No Gerenciador de Soluções, clique duas vezes no arquivo MainPage.xaml no projeto compartilhado Phoneword para abri-lo: 8. Em MainPage.xaml, adicione um controle Button no final do controle StackLayout . O botão será usado para navegar até a página do histórico de chamadas: Salve as alterações em MainPage.xaml ao pressionar CTRL+S e feche o arquivo. using System; using Xamarin.Forms; namespace Phoneword { public partial class MainPage : ContentPage { ... async void OnCall(object sender, EventArgs e) { ... if (dialer != null) { App.PhoneNumbers.Add (translatedNumber); callHistoryButton.IsEnabled = true; dialer.Dial (translatedNumber); } ... } async void OnCallHistory(object sender, EventArgs e) { await Navigation.PushAsync (new CallHistoryPage ()); } } } 9. No Gerenciador de Soluções, clique duas vezes em MainPage.xaml.cs para abri-lo: 10. Em MainPage.xaml.cs, adicione o método do manipulador de eventos OnCallHistory e modifique o método do manipulador de eventos OnCall para adicionar o número de telefone traduzido à coleção App.PhoneNumbers e habilitar o callHistoryButton , desde que a variável dialer não seja null : Salve as alterações em MainPage.xaml.cs ao pressionar CTRL+S e feche o arquivo. 11. No Visual Studio, selecione o item de menu Compilar > Compilar Solução (ou pressione CTRL+SHIFT+B). O aplicativo será criado e uma mensagem de êxito será exibida na barra de status do Visual Studio: Se houver erros, repita as etapas anteriores e corrija qualquer erro até que o aplicativo seja compilado com êxito. 12. Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para inicializar o aplicativo: 13. No Gerenciador de Soluções, clique com botão direito do mouse no projeto Phoneword.Droid e selecione Definir como Projeto de Inicialização. 14. Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para inicializar o aplicativo em um emulador do Android. 15. Se você tiver um dispositivo iOS e atender aos requisitos de sistema do Mac para o desenvolvimento do Xamarin.Forms, use uma técnica semelhante para implantar o aplicativo no dispositivo iOS. Como alternativa, implante o aplicativo para o simulador remoto de iOS. Observação: não há suporte para chamadas telefônicas em todos os simuladores. Parabéns por concluir um aplicativo Xamarin.Forms multitela. O próximo tópico deste guia analisa as etapas seguidas para entender a navegação de página e a associação de dados usando o Xamarin.Forms. Links relacionados Phoneword (amostra) PhonewordMultiscreen (amostra) Aprofundamento na multitela do Xamarin.Forms 13/07/2018 • 6 minutes to read • Edit Online Navegação public App () { ... MainPage = new NavigationPage (new MainPage ()); } async void OnCallHistory(object sender, EventArgs e) { await Navigation.PushAsync (new CallHistoryPage ()); } await Navigation.PopAsync(); Associação de dados No Início rápido da multitela do Xamarim.Forms, o aplicativo Phoneword foi estendido para incluir uma segunda tela que controla o histórico de chamadas para o aplicativo. Este artigo examina o que foi compilado para entender a navegação de página e associação de dados em um aplicativo Xamarin.Forms. O Xamarin.Forms fornece um modelo de navegação interna que gerencia a navegação e a experiência do usuário de uma pilha de páginas. Este modelo implementa uma pilha UEPS (último a entrar, primeiro a sair) de objetos Page . Para mover de uma página para outra, um aplicativo enviará por push uma nova página para essa pilha. Para retornar para a página anterior, o aplicativo exibirá a página atual da pilha. O Xamarin.Forms tem uma classe NavigationPage que gerencia a pilha de objetos Page . A classe NavigationPage também adicionará uma barra de navegação à parte superior da página que exibe um título e um botão Voltar apropriado para a plataforma, que retornará à página anterior. O exemplo de código a seguir mostra como encapsular um NavigationPage em torno da primeira página em um aplicativo: Todas as instâncias do ContentPage têm uma propriedade Navigation que expõe métodos para modificar a pilha de páginas. Esses métodos devem ser invocados somente se o aplicativo incluir um NavigationPage . Para navegar até o CallHistoryPage , é necessário invocar o método PushAsync conforme demonstrado no exemplo de código abaixo: Isso faz com que o novo objeto CallHistoryPage seja enviado para a pilha de navegação. Para retornar programaticamente à página original, o objeto CallHistoryPage deve invocar o método PopAsync , conforme demonstrado no exemplo de código abaixo: No entanto, no aplicativo Phoneword, esse código não é exigido porque a classe NavigationPage adiciona uma barra de navegação à parte superior da página que inclui um botão Voltar apropriado para a plataforma, que retornará à página anterior. Vinculação de dados é usada para simplificar como um aplicativo Xamarin.Forms exibe e interage com seus dados. Ela estabelece uma conexão entre a interface do usuário e o aplicativo subjacente. A classe BindableObject public partial class App : Application { public static List<string> PhoneNumbers { get; set; } public App () { PhoneNumbers = new List<string>(); ... }... } <?xml version="1.0" encoding="UTF-8"?> <ContentPage ... xmlns:local="clr-namespace:Phoneword;assembly=Phoneword" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" ...> ... <ContentPage.Content> ... <ListView ItemsSource="{x:Static local:App.PhoneNumbers}" /> ... </ContentPage.Content> </ContentPage> Conceitos adicionais introduzidos no Phoneword Resumo contém a maior parte da infraestrutura para dar suporte à vinculação de dados. A vinculação de dados define a relação entre dois objetos. O objeto de origem fornecerá dados. O objeto de destino consumirá (e geralmente exibirá) dados do objeto de origem. No aplicativo Phoneword, o destino de associação é o controle ListView que exibe os números de telefone, enquanto a coleção PhoneNumbers é a origem da associação. A coleção PhoneNumbers é declarada e inicializada na classe App , conforme mostrado no exemplo de código a seguir : A instância ListView é declarada e inicializada na classe CallHistoryPage , conforme mostrado no exemplo de código a seguir : Neste exemplo, o controle ListView exibirá a coleta de dados IEnumerable a qual a propriedade ItemsSource está associada. A coleta de dados pode ser objetos de qualquer tipo, mas, por padrão, ListView usará o método ToString de cada item para exibir o item. A extensão de marcação x:Static é usada para indicar que a propriedade ItemsSource será associada a uma propriedade estática PhoneNumbers da classe App , que pode ser localizada no namespace local . Para obter mais informações sobre vinculação de dados, veja Noções básicas de vinculação de dados. Para obter mais informações sobre extensões de marcação XAML, consulte Extensões de marcação XAML. O ListView é responsável por exibir uma coleção de itens na tela. Cada item em ListView está contido em uma única célula. Para obter mais informações sobre o uso do controle ListView , veja ListView. Este artigo apresentou navegação de página e vinculação de dados em um aplicativo Xamarin.Forms e demonstrou seu uso em um aplicativo de plataforma cruzada multitela. Uma Introdução ao Xamarin.Forms 13/07/2018 • 39 minutes to read • Edit Online Visão geral Como examinar um aplicativo Xamarin.FormsComo examinar um aplicativo Xamarin.Forms O Xamarin.Forms é uma abstração de kit de ferramentas de interface do usuário com suporte nativo multiplataforma que permite aos desenvolvedores criar com facilidade interfaces do usuário que podem ser compartilhadas entre Android, iOS, Windows e a Plataforma Universal do Windows. As interfaces do usuário são renderizadas usando controles nativos da plataforma de destino, permitindo que os aplicativos Xamarin.Forms mantenham a aparência apropriada para cada plataforma. Este artigo fornece uma introdução ao Xamarin.Forms e mostra como começar a escrever aplicativos com ele. Xamarin.Forms é uma estrutura que permite aos desenvolvedores criar interfaces do usuário de plataforma cruzada rapidamente. Ele fornece uma abstração própria de interface do usuário que será renderizada usando controles nativos das plataformas iOS, Android, ou UWP (Plataforma Universal do Windows). Isso significa que os aplicativos podem compartilhar uma grande parte do seu código de interface do usuário e ainda manter a aparência nativa da plataforma de destino. O Xamarin.Forms permite prototipagem rápida de aplicativos que podem evoluir ao longo do tempo para aplicativos complexos. Já que os aplicativos Xamarin.Forms são aplicativos nativos, eles não têm as limitações de outros conjuntos de ferramentas como área restrita de navegador, APIs limitadas ou baixo desempenho. Aplicativos escritos usando Xamarin.Forms são capazes de utilizar qualquer um dos recursos da API ou da plataforma subjacente, assim como (mas não se limitando a) CoreMotion, PassKit e StoreKit no iOS, NFC e Google Play Services no Android e Blocos no Windows. Além disso, é possível criar aplicativos que terão partes da sua interface do usuário criadas com Xamarin.Forms, enquanto outras partes serão criadas usando o kit de ferramentas da interface do usuário nativa. Aplicativos Xamarin.Forms são arquitetados do mesmo modo que aplicativos tradicionais de plataforma cruzada. A abordagem mais comum é usar bibliotecas portáteis ou projetos compartilhados para abrigar o código compartilhado e criar aplicativos específicos da plataforma que consumirão o código compartilhado. Existem duas técnicas para criar interfaces do usuário no Xamarin.Forms. A primeira técnica é criar interfaces do usuário inteiramente com código-fonte C#. A segunda técnica é usar linguagem XAML, uma linguagem de marcação declarativa que é usada para descrever interfaces do usuário. Para obter mais informações sobre como trabalhar com XAML, veja Noções básicas de XAML. Este artigo aborda os conceitos básicos da estrutura do Xamarin.Forms e abrange os seguintes tópicos: Como examinar um aplicativo Xamarin.Forms. Como páginas e controles do Xamarin.Forms são usados. Como usar e exibir uma lista de dados. Como configurar a vinculação de dados. Como navegar entre páginas. Próximas etapas. No Visual Studio para Mac e Visual Studio, o modelo de aplicativo do Xamarin.Forms padrão cria a solução do Xamarin.Forms mais simples possível, que exibe o texto para o usuário. Se você executar o aplicativo, ele deverá ser semelhante às capturas de tela a seguir : public class App : Application { public App () { MainPage = new ContentPage { Content = new Label { Text = "Hello, Forms !", VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.CenterAndExpand, } }; } } Como iniciar a página inicial do Xamarin.Forms em cada plataformaComo iniciar a página inicial do Xamarin.Forms em cada plataforma iOSiOS Cada tela nas capturas de tela corresponde a uma página no Xamarin.Forms. Um Page representa uma atividade no Android, um controlador de exibição no iOS ou uma página na UWP (Plataforma Universal do Windows). O exemplo nas capturas de tela acima instancia um objeto ContentPage e usa isso para exibir um Label . Para maximizar a reutilização do código de inicialização, os aplicativos Xamarin.Forms têm uma única classe chamada App , que é responsável por instanciar a primeira Page que será exibida. Um exemplo da classe App pode ser visto no código a seguir : Esse código instancia um novo objeto ContentPage que exibirá um único Label , centralizado tanto verticalmente quanto horizontalmente na página. Usar este Page dentro de um aplicativo, cada aplicativo da plataforma deve inicializar a estrutura do Xamarin.Forms e fornecer uma instância do ContentPage enquanto ele está sendo inicializado. Essa etapa de inicialização varia de uma plataforma para outra e é discutida nas seções a seguir. Para inicializar a página inicial do Xamarin.Forms no iOS, o projeto de plataforma inclui a classe AppDelegate que herda da classe Xamarin.Forms.Platform.iOS.FormsApplicationDelegate , conforme demonstrado no exemplo de código a seguir : [Register("AppDelegate")] public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate { public override bool FinishedLaunching(UIApplication app, NSDictionary options) { global::Xamarin.Forms.Forms.Init (); LoadApplication (new App ()); return base.FinishedLaunching (app, options); } } AndroidAndroid namespace HelloXamarinFormsWorld.Android { [Activity(Label = "HelloXamarinFormsWorld", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] public class MainActivity : FormsAppCompatActivity { protected override void OnCreate(Bundlebundle) { base.OnCreate(bundle); Xamarin.Forms.Forms.Init(this, bundle); LoadApplication (new App ()); } } } Plataforma Universal do WindowsPlataforma Universal do Windows Xamarin.Forms.Forms.Init (e); if (e.PreviousExecutionState == ApplicationExecutionState.Terminated) { ... } A substituição FinishedLoading inicializa a estrutura do Xamarin.Forms ao chamar o método Init . Isso faz a implementação específica do iOS do Xamarin.Forms ser carregada no aplicativo antes que o controlador de exibição de raiz seja definido pela chamada para o método LoadApplication . Para inicializar a página inicial do Xamarin.Forms no Android, o projeto de plataforma inclui código que cria uma Activity com o atributo MainLauncher , com a atividade herdando da classe FormsAppCompatActivity , conforme demonstrado no exemplo de código a seguir : A substituição OnCreate inicializa a estrutura do Xamarin.Forms ao chamar o método Init . Isso faz a implementação específica do Android do Xamarin.Forms ser carregada no aplicativo antes de o aplicativo Xamarin.Forms ser carregado. Em aplicativos UWP (Plataforma Universal do Windows), o método Init que inicializa a estrutura Xamarin.Forms é chamado da classe App : Isso faz a implementação específica de UWP do Xamarin.Forms ser carregada no aplicativo. A página inicial do Xamarin.Forms é iniciada pela classe MainPage , conforme demonstrado no exemplo de código a seguir : public partial class MainPage { public MainPage() { this.InitializeComponent(); this.LoadApplication(new HelloXamarinFormsWorld.App()); } } Layouts e exibiçõesLayouts e exibições StackLayoutStackLayout <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample1" Padding="20"> <StackLayout Spacing="10"> <Label Text="Stop" BackgroundColor="Red" Font="20" /> <Label Text="Slow down" BackgroundColor="Yellow" Font="20" /> <Label Text="Go" BackgroundColor="Green" Font="20" /> </StackLayout> </ContentPage> O aplicativo Xamarin.Forms é carregado com o método LoadApplication . Há quatro grupos de controle principais usados para criar a interface do usuário de um aplicativo Xamarin.Forms. 1. Páginas – as páginas do Xamarin.Forms representam telas de aplicativos móveis de plataforma cruzada. Para saber mais sobre páginas, consulte Xamarin.Forms Pages (Páginas do Xamarin.Forms). 2. Layouts – os layouts do Xamarin.Forms são contêineres usados para compor exibições em estruturas lógicas. Para saber mais sobre layouts, consulte Xamarin.Forms Layouts (Layouts do Xamarin.Forms). 3. Exibições – as exibições do Xamarin.Forms são os controles exibidos na interface do usuário, como rótulos, botões e caixas de entrada de texto. Para saber mais sobre exibições, consulte Xamarin.Forms Views (Exibições do Xamarin.Forms). 4. Células – as células do Xamarin.Forms são elementos especializados usados para itens em uma lista e descrevem como cada item em uma lista deve ser desenhado. Para saber mais sobre células, consulte Xamarin.Forms Cells (Células do Xamarin.Forms). No tempo de execução, cada controle será mapeado para seu equivalente nativo, que é o que será renderizado. Os controles são hospedados dentro de um layout. A classe StackLayout , que implementa um layout usado com frequência, será agora examinada. O StackLayout simplifica o desenvolvimento de aplicativos de plataforma cruzada organizando automaticamente os controles na tela, independentemente do tamanho dela. Os elementos filho são posicionados um após o outro, horizontalmente ou verticalmente, na ordem em que foram adicionados. A quantidade de espaço que o StackLayout usará dependerá de como as propriedades HorizontalOptions e VerticalOptions forem definidas, mas por padrão o StackLayout tentará usar a tela inteira. O código XAML a seguir mostra um exemplo de como usar um StackLayout para organizar três controles Label : O código C# equivalente é mostrado no exemplo de código a seguir : public class StackLayoutExample : ContentPage { public StackLayoutExample() { Padding = new Thickness(20); var red = new Label { Text = "Stop", BackgroundColor = Color.Red, FontSize = 20 }; var yellow = new Label { Text = "Slow down", BackgroundColor = Color.Yellow, FontSize = 20 }; var green = new Label { Text = "Go", BackgroundColor = Color.Green, FontSize = 20 }; Content = new StackLayout { Spacing = 10, Children = { red, yellow, green } }; } } <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample2" Padding="20"> <StackLayout Spacing="10" VerticalOptions="End" Orientation="Horizontal" HorizontalOptions="Start"> <Label Text="Stop" BackgroundColor="Red" Font="20" /> <Label Text="Slow down" BackgroundColor="Yellow" Font="20" /> <Label Text="Go" BackgroundColor="Green" Font="20" /> </StackLayout> </ContentPage> Por padrão, o StackLayout assume uma orientação vertical conforme mostrado nas capturas de tela a seguir : A orientação do StackLayout pode ser alterado para uma orientação horizontal, conforme demonstrado no exemplo de código XAML a seguir : O código C# equivalente é mostrado no exemplo de código a seguir : public class StackLayoutExample: ContentPage { public StackLayoutExample() { // Code that creates labels removed for clarity Content = new StackLayout { Spacing = 10, VerticalOptions = LayoutOptions.End, Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Start, Children = { red, yellow, green } }; } } <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample3" Padding="20"> <StackLayout Spacing="10" VerticalOptions="End" Orientation="Horizontal" HorizontalOptions="Start"> <Label Text="Stop" BackgroundColor="Red" Font="20" WidthRequest="100" /> <Label Text="Slow down" BackgroundColor="Yellow" Font="20" WidthRequest="100" /> <Label Text="Go" BackgroundColor="Green" Font="20" WidthRequest="200" /> </StackLayout> </ContentPage> As capturas de tela a seguir mostram o layout resultante: O tamanho dos controles pode ser definido por meio das propriedades HeightRequest e WidthRequest , conforme demonstrado no exemplo de código XAML a seguir : O código C# equivalente é mostrado no exemplo de código a seguir : var red = new Label { Text = "Stop", BackgroundColor = Color.Red, FontSize = 20, WidthRequest = 100 }; var yellow = new Label { Text = "Slow down", BackgroundColor = Color.Yellow, FontSize = 20, WidthRequest = 100 }; var green = new Label { Text = "Go", BackgroundColor = Color.Green, FontSize = 20, WidthRequest = 200 }; Content = new StackLayout { Spacing = 10, VerticalOptions = LayoutOptions.End, Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Start, Children = { red, yellow, green } }; Listas em Xamarin.Forms As capturas de tela a seguir mostram o layout resultante: Para obter mais informações sobre a classe StackLayout , veja StackLayout. O controle ListView é responsável por exibir uma coleção de itens na tela – cada item no ListViewestará contido em uma única célula. Por padrão, um ListView usará o modelo TextCell interna e renderizará uma única linha de texto. O exemplo de código a seguir mostra um exemplo de ListView simples: var listView = new ListView { RowHeight = 40 }; listView.ItemsSource = new string [] { "Buy pears", "Buy oranges", "Buy mangos", "Buy apples", "Buy bananas" }; Content = new StackLayout { VerticalOptions = LayoutOptions.FillAndExpand, Children = { listView } }; Associação a uma classe personalizadaAssociação a uma classe personalizada public class TodoItem { public string Name { get; set; } public bool Done { get; set; } } listView.ItemsSource = new TodoItem [] { new TodoItem { Name = "Buy pears" }, new TodoItem { Name = "Buy oranges", Done=true} , new TodoItem { Name = "Buy mangos" }, new TodoItem { Name = "Buy apples", Done=true }, new TodoItem { Name = "Buy bananas", Done=true } }; A captura de tela a seguir mostra o ListView resultante: Para obter mais informações sobre o controle ListView , veja ListView. O controle ListView também pode exibir os objetos personalizados usando o modelo TextCell padrão. O exemplo de código a seguir mostra a classe TodoItem : O controle ListView pode ser populado conforme demonstrado no exemplo de código a seguir : listView.ItemTemplate = new DataTemplate(typeof(TextCell)); listView.ItemTemplate.SetBinding(TextCell.TextProperty, "Name"); Selecionar um Item em um ListViewSelecionar um Item em um ListView listView.ItemSelected += async (sender, e) => { await DisplayAlert("Tapped!", e.SelectedItem + " was tapped.", "OK"); }; listView.ItemSelected += async (sender, e) => { var todoItem = (TodoItem)e.SelectedItem; var todoPage = new TodoItemPage(todoItem); // so the new page shows correct data await Navigation.PushAsync(todoPage); }; Personalizando a aparência de uma célulaPersonalizando a aparência de uma célula Uma associação pode ser criada para definir qual propriedade TodoItem é exibida pelo ListView , conforme demonstrado no exemplo de código a seguir : Isso cria uma associação que especifica o caminho para a propriedade TodoItem.Name e resultará na captura de tela exibida anteriormente. Para obter mais informações sobre a associação a uma classe personalizada, consulte Fontes de Dados de ListView. Para responder a um usuário tocar em uma célula em um ListView , deve-se lidar com o evento ItemSelected , conforme demonstrado no exemplo de código a seguir : Quando contido em um NavigationPage , o método PushAsync pode ser usado para abrir uma nova página com navegação de retorno interna. O evento ItemSelected pode acessar o objeto que foi associado à célula por meio da propriedade e.SelectedItem , associá-lo a uma nova página e exibir a nova página usando PushAsync , conforme demonstrado no exemplo de código a seguir : Cada plataforma implementa navegação de retorno interna de sua própria maneira. Para obter mais informações, veja Navegação. Para obter mais informações sobre a seleção ListView , veja Interatividade do ListView. A aparência de célula pode ser personalizada subclassificando-se a classe ViewCell e definindo-se o tipo dessa classe para a propriedade ItemTemplate do ListView . A célula mostrada na seguinte captura de tela é composta de um controle Image e dois controles Label : Para criar esse layout personalizado, a classe ViewCell deve ser uma subclasse, conforme demonstrado no exemplo de código a seguir : class EmployeeCell : ViewCell { public EmployeeCell() { var image = new Image { HorizontalOptions = LayoutOptions.Start }; image.SetBinding(Image.SourceProperty, new Binding("ImageUri")); image.WidthRequest = image.HeightRequest = 40; var nameLayout = CreateNameLayout(); var viewLayout = new StackLayout() { Orientation = StackOrientation.Horizontal, Children = { image, nameLayout } }; View = viewLayout; } static StackLayout CreateNameLayout() { var nameLabel = new Label { HorizontalOptions= LayoutOptions.FillAndExpand }; nameLabel.SetBinding(Label.TextProperty, "DisplayName"); var twitterLabel = new Label { HorizontalOptions = LayoutOptions.FillAndExpand, Font = Fonts.Twitter }; twitterLabel.SetBinding(Label.TextProperty, "Twitter"); var nameLayout = new StackLayout() { HorizontalOptions = LayoutOptions.StartAndExpand, Orientation = StackOrientation.Vertical, Children = { nameLabel, twitterLabel } }; return nameLayout; } } O código realiza as tarefas a seguir : Ele adiciona um controle Image e associa-o à propriedade ImageUri do objeto Employee . Para obter mais informações sobre vinculação de dados, veja Vinculação de dados. Ele cria um StackLayout com uma orientação vertical para manter os dois controles Label . Os controles Label estão associados às propriedades DisplayName e Twitter do objeto Employee . Ele cria um StackLayout que hospedará os Image e StackLayout existentes. Ele organizará seus filhos usando uma orientação horizontal. Após a célula personalizada ter sido criada, ela poderá ser consumida por um controle ListView encapsulando- o em um DataTemplate , conforme demonstrado no exemplo de código a seguir : List<Employee> myListOfEmployeeObjects = GetAListOfAllEmployees(); var listView = new ListView { RowHeight = 40 }; listView.ItemsSource = myListOfEmployeeObjects; listView.ItemTemplate = new DataTemplate(typeof(EmployeeCell)); Como usar XAML para criar e personalizar uma listaComo usar XAML para criar e personalizar uma lista <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:XamarinFormsXamlSample;assembly=XamarinFormsXamlSample" xmlns:constants="clr-namespace:XamarinFormsSample;assembly=XamarinFormsXamlSample" x:Class="XamarinFormsXamlSample.Views.EmployeeListPage" Title="Employee List"> <ListView x:Name="listView" IsVisible="false" ItemsSource="{x:Static local:App.Employees}" ItemSelected="EmployeeListOnItemSelected"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <StackLayout Orientation="Horizontal"> <Image Source="{Binding ImageUri}" WidthRequest="40" HeightRequest="40" /> <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand"> <Label Text="{Binding DisplayName}" HorizontalOptions="FillAndExpand" /> <Label Text="{Binding Twitter}" Font="{x:Static constants:Fonts.Twitter}"/> </StackLayout> </StackLayout> </ViewCell.View> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage> Associação de dados Esse código fornecerá um List de Employee para o ListView . Cada célula será renderizada usando a classe EmployeeCell . O ListView passará o objeto Employee para o EmployeeCell como seu BindingContext . Para obter mais informações sobre como personalizar a aparência da célula, consulte Aparência da célula. O equivalente em XAML ao ListView na seção anterior é demonstrado no exemplo de código a seguir : Esse XAML define um ContentPage que contém um ListView . A fonte de dados do ListView é definida por meio do atributo ItemsSource . O layout de cada linha no ItemsSource é definido dentro do elemento
Compartilhar