indroducao Xammarin.Froms

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