Instruções passo a passo: criando um cliente do LightSwitch para usuários móveis

Artigo
06/10/2015

Usando o LightSwitch, você pode criar um cliente HTML no qual os usuários móveis podem exibir, adicionar e atualizar dados de locais remotos usando dispositivos modernos e orientados a toque, como telefones e tablets. Nesta instrução passo a passo, você criará um cliente para uma empresa de mudanças fictícia, a Contoso Moving, de maneira que sua equipe de atendimento ao cliente possa estimar facilmente quantas pessoas, caminhões e caixas cada trabalho exigirá.

Na Contoso, os agendadores passam a maior parte de seu tempo no escritório, conversando com clientes em potencial pessoalmente ou por telefone, e organizando visitas de acompanhamento. Esses trabalhadores usam um cliente de área de trabalho avançado baseado em Silverlight e que dá melhor suporte às muitas entradas de dados com o teclado e o mouse. Por outro lado, os especialistas em planejamento viajam o dia inteiro, fazendo visitas de acompanhamento em diversos locais e gravando informações, como o tamanho, o conteúdo e os requisitos de entrada de cada espaço. Esses usuários móveis precisam de um cliente que não apenas mostre a eles informações sobre cada visita de acompanhamento dos agendadores, mas que também dê suporte à entrada de tipos específicos de dados, tire fotos e alerte a equipe em campo sobre restrições de estacionamento ou outros detalhes.

O cliente de área de trabalho para os agendadores já foi criado. Você compilará o cliente móvel usado pelos especialistas em planejamento para acompanhar os compromissos organizados pelos agendadores e inserir detalhes sobre cada deslocamento.

Pré-requisitos

Baixe o aplicativo de exemplo ContosoMoving.

Guia de Introdução

Antes de compilar o cliente móvel, você criará alguns dados de exemplo para o cliente de área de trabalho baixado.

Para criar dados de exemplo

Na barra de menus, escolha Arquivo, Abrir, Projeto/Solução.
Localize o arquivo ContosoMoving.sln baixado e o abra.
Na barra de menus, escolha Depurar, Iniciar Depuração.
No cliente em execução, na barra de menus, escolha Dados de Exemplo, Criar Dados de Exemplo.
Na barra de ferramentas na tela Criar Dados de Exemplo, escolha o botão Adicionar Todos os Dados de Exemplo.

Os dados de exemplo são criados para as entidades Estado, Funcionário, Cliente e Compromisso.
Na barra de ferramentas, clique no botão Salvar.
No barra de menus, escolha Página Inicial.
Na barra de ferramentas, escolha o botão Atualizar.

Uma lista de compromissos futuros de todos os funcionários é exibida, e você pode explorar as outras telas no cliente de área de trabalho.

Adicionar um cliente móvel

Agora você adicionará um projeto de cliente HTML à solução existente.

Para adicionar um projeto de cliente HTML

No Gerenciador de Soluções, escolha o nó ContosoMoving.
Na barra de menus, escolha Projeto, Adicionar Cliente.
Na caixa de diálogo Adicionar Cliente, escolha Cliente HTML, nomeie-o como MobileClient e escolha o botão OK.

Um nó de projeto MobileClient é adicionado ao Gerenciador de Soluções.

Criar telas e definir navegação

Agora você criará uma tela inicial e uma tela de detalhes, definirá a navegação entre as telas e criará uma caixa de diálogo modal. Os clientes móveis usam um modelo de navegação diferente do modelo dos clientes de área de trabalho. Normalmente, somente uma tela é visível por vez em um cliente móvel, e as alterações são confirmadas quando você passa de uma tela para outra.

Para criar uma tela inicial

No Gerenciador de Soluções, escolha o nó MobileClient.
Na barra de menus, escolha Projeto, Adicionar Tela.
Na caixa de diálogo Adicionar Nova Tela, escolha o modelo Tela Procurar Dados.
Na caixa de texto Nome da Tela, insira Página Inicial.
Na lista Dados da Tela, escolha UpcomingAppointments e escolha o botão OK.

Para personalizar a tela inicial

No designer da tela, escolha o nó Compromisso e Layout das Linhas na lista suspensa.
No nó Layout das Linhas | Compromisso, exclua todos os nós, exceto Data de Início e Cliente.
Na barra de menus, escolha Iniciar Depuração.

O cliente móvel aparece no navegador.

Nesse ponto, a tela exibe somente os compromissos. Agora você adicionará uma tela de detalhes de modo que os detalhes do compromisso sejam exibidos quando um usuário tocar em um compromisso.

Para criar uma tela de detalhes

No designer de tela, escolha o nó Compromissos Futuros.
Na janela Propriedades, escolha o link Toque em Item: Nenhum.
Na caixa de diálogo Editar Ação de Toque em Item, escolha o botão de opção Escolha um método existente e UpcomingAppointments.ViewSelected na lista.
Na lista Navegar até, escolha (Nova Tela) e escolha o botão OK.

A caixa de diálogo Adicionar Nova Tela é exibida.
Na caixa de diálogo Adicionar Nova Tela, escolha o modelo Tela Exibir Detalhes.
Na caixa de texto Nome da Tela, insira ViewAppointment.
Na lista Dados da Tela, escolha Compromisso.
Marque as caixas de seleção Detalhes do Compromisso, Fotos do Compromisso e Salas do Compromisso e escolha o botão OK.

No designer da tela, um layout Guias é criado, e os diferentes tipos de dados são organizados por guias.
Na barra de menus, escolha Iniciar Depuração para executar o cliente móvel.
Toque em um compromisso para exibir a tela Exibir Compromisso.
Redimensione a janela do navegador e observe como o layout muda de duas colunas para uma coluna única.

Para personalizar a tela de detalhes

No Gerenciador de Soluções, abra a tela ViewAppointment.
No designer de tela, escolha o nó Layout das Linhas | Detalhes.
Exclua os nós Data de Início, Data de Término, Observações, Tipo de Movimentação, Funcionário e Cliente.
Mova o nó Estado de modo que ele apareça embaixo do nó Cidade.
Escolha o nó Layout das Linhas | direito, expanda o nó Adicionar e escolha Outros Dados da Tela.

A caixa de diálogo Adicionar Dados da Tela é exibida.
Na caixa de texto Especificar os dados da tela para adicionar, insira Customer.Phone e escolha o botão OK.
Expanda o nó Adicionar e escolha Outros Dados da Tela.

A caixa de diálogo Adicionar Dados da Tela é exibida.
Na caixa de texto Especificar os dados da tela para adicionar, insira Customer.Email e escolha o botão OK.

No Gerenciador de Soluções, abra a tela ViewAppointment.
No designer de tela, abra o menu de atalho do nó Barra de Comandos na guia Detalhes e escolha Adicionar Botão.
Na caixa de diálogo Adicionar Botão, escolha o botão de opção Escolher um método existente e Appointment.edit na lista.
Na lista Navegar até, escolha (Nova Tela) e escolha o botão OK.

A caixa de diálogo Adicionar Nova Tela é exibida.
Na caixa de texto Nome da Tela, insira EditAppointment e escolha o botão OK.

Na janela Propriedades, a caixa de seleção Mostrar como Caixa de Diálogo é marcada, o que significa que a tela será exibida como uma caixa de diálogo modal.
No designer de tela, exclua o nó Layout das Colunas | colunas.
Expanda o nó Adicionar e escolha Outros Dados da Tela.

A caixa de diálogo Adicionar Dados da Tela é exibida.
Na caixa de texto Especificar os dados da tela para adicionar, insira Appointment.Customer.FirstName e escolha o botão OK.
Expanda o nó Adicionar e escolha Outros Dados da Tela.

A caixa de diálogo Adicionar Dados da Tela é exibida.
Na caixa de texto Especificar os dados da tela para adicionar, insira Appointment.Customer.LastName e escolha o botão OK.
Expanda o nó Adicionar e escolha Outros Dados da Tela.

A caixa de diálogo Adicionar Dados da Tela é exibida.
Na caixa de texto Especificar os dados da tela para adicionar, insira Appointment.Customer.Phone e escolha o botão OK.
Expanda o nó Adicionar e escolha Outros Dados da Tela.

A caixa de diálogo Adicionar Dados da Tela é exibida.
Na caixa de texto Especificar os dados da tela para adicionar, insira Appointment.Customer.Email e escolha o botão OK.
No painel à esquerda, arraste Rua, Cidade, Estado e CEP sob o nó Email.

Dica

Em vez de arrastar, você também pode adicionar os campos Rua, StreetLine2, Cidade, Estado e CEP seguindo as mesmas etapas dos campos FirstName e LastName.

Para mostrar a caixa de diálogo

No Gerenciador de Soluções, abra a tela ViewAppointment.
No designer de tela, escolha o nó Editar Compromisso.
Na janela Propriedades, expanda a lista Ícone e escolha Editar.
Na barra de menus, escolha Depurar, Iniciar Depuração para executar o cliente móvel.
No cliente em execução, toque em um compromisso para abrir uma tela Exibir Compromisso.
Toque no botão Editar Compromisso para exibir a caixa de diálogo.

Os botões OK e Cancelar são incluídos automaticamente.

Personalizar a interface do usuário

É possível personalizar a interface do usuário do cliente não apenas alterando-se as configurações no designer de tela, mas também adicionando-se controles personalizados e gravando-se código JavaScript.

Para aplicar formatação personalizada usando bibliotecas JavaScript

No Gerenciador de Soluções, abra a tela Página Inicial.
No designer de tela, escolha o nó Layout das Linhas | Compromisso e escolha Controle Personalizado na lista.
Na lista Gravar Código, escolha o método RowTemplate_render.

No editor de códigos, adicione o seguinte código da função RowTemplate_render:

myapp.Home.RowTemplate_render = function (element, contentItem) {
    var itemTemplate = $("<div> </div>");
    var title = $("<h3>" + moment(contentItem.value.StartDate).format("ddd, MMM Do, h:mm") + "-" + moment(contentItem.value.EndDate).format("h:mma") + "</h3>");
    var subTitle = $("<span>" + contentItem.value.Customer.FirstName + " " + contentItem.value.Customer.LastName + " - " + contentItem.value.Customer.Phone + "</span>");
    title.appendTo($(itemTemplate));
    subTitle.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));
};

Esse código JavaScript usa a variável de membro contentItem.value para determinar o que exibir e o método format para definir a formatação.

No Gerenciador de Soluções, abra o menu de atalho do nó MobileClient e escolha Gerenciar Pacotes NuGet.
Na caixa de diálogo Gerenciar Pacotes NuGet, escolha o nó Online.
Na caixa de texto Pesquisar Online, digite moment.js.
Escolha o botão Instalar para instalar a biblioteca Moment.js e, em seguida, escolha o botão Fechar.
No Gerenciador de Soluções, expanda o nó MobileClient e abra o arquivo default.htm.
No editor de códigos, adicione a seguinte marca de script após a última marca </script>:
```
<script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>
```
Essa marca adiciona uma referência à biblioteca moment.js.
Na barra de menus, escolha Depurar, Iniciar Depuração para executar o cliente.

O compromisso é formatado e a hora e o número de telefone são adicionados.

Para alterar o layout para uma lista lado a lado

No Gerenciador de Soluções, abra a tela Página Inicial.
No designer de tela, escolha o nó Lista | Próximos Compromissos e escolha Lista Lado a Lado na lista.
Na barra de menus, escolha Depurar, Iniciar Depuração para executar o cliente.

A tela inicial exibe os próximos compromissos em um layout baseado em blocos. Altere a largura da janela do navegador para demonstrar como o layout dos blocos se ajusta dinamicamente para fazer bom uso do espaço horizontal disponível. Essa demonstração mostra como o layout da lista pode ser alterado com base na orientação e no tamanho da tela de um dispositivo móvel.

Para adicionar um título de tela dinâmica

No Gerenciador de Soluções, abra a tela ViewAppointment.
No designer de tela, escolha o nó Layout das Linhas | Detalhes.
Na lista Gravar Código, escolha Details_postRender.

No editor de códigos, adicione o seguinte código JavaScript:

myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
    contentItem.dataBind("value.Appointment.Customer.FirstName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    contentItem.dataBind("value.Appointment.Customer.LastName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    function formatAppointmentScreenTitle(contentItem) {
        contentItem.screen.details.displayName = contentItem.value.Appointment.Customer.FirstName + " " +
        contentItem.value.Appointment.Customer.LastName + " " +
        moment(contentItem.value.Appointment.StartDate).format("h:mma") + " - " +
        moment(contentItem.value.Appointment.EndDate).format("h:mma");
    };
};

Na barra de menus, escolha Depurar, Iniciar Depuração para executar o cliente.

As telas de detalhes do compromisso mostram o nome do cliente e as horas inicial e final do compromisso.

Adicionar um controle personalizado para carregar fotos

A tela de detalhes do compromisso tem uma guia Fotos do Compromisso de modo que um especialista em planejamento da Contoso Moving possa tirar fotos do local de um cliente para estimar o trabalho com mais precisão. Para habilitar essa tarefa, você adicionará um controle personalizado ao cliente.

Para adicionar um controle personalizado

No Gerenciador de Soluções, abra o menu de atalho do nó Scripts, escolha Adicionar e Item Existente.
Na caixa de diálogo Adicionar Item Existente, navegue até a pasta ContosoMoving e abra a pasta Recursos de Exemplo.
Escolha os arquivos image_uploader-base64-file-encoder e imagem-uploader, além do botão Adicionar.
Abra o arquivo default.htm e, no editor de códigos, adicione a seguinte referência para image-uploader.js ao final do bloco de referências do script:
```
<script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>
```
No Gerenciador de Soluções, abra a tela ViewAppointment.
No designer de tela, escolha o nó Lista | Fotos e Lista Lado a Lado na lista.
Na janela Propriedades, abra a lista de propriedades Altura e escolha Alongar até o Contêiner.
Na caixa de texto Mín., insira 150.
No designer de tela, abra o menu de atalho da guia Fotos, nó Barra de Comandos e escolha Adicionar Botão.
Na caixa de diálogo Adicionar Botão, escolha o botão de opção de Escolher um método existente, escolha Photos.addEditNew na lista e, em seguida, escolha o botão OK.

A caixa de diálogo Adicionar Nova Tela é exibida.
Na caixa de texto Nome da Tela, insira UploadPhoto e escolha o botão OK.
No designer de tela, exclua o nó Layout das Linhas | à direita.
Escolha o nó Legenda e altere o tipo de controle para Área de Texto.
Escolha o nó Imagem e altere o tipo de controle para Controle Personalizado.
Na janela Propriedades, escolha o hiperlink Editar Código de Renderização.
No editor de códigos, adicione o seguinte código à função Picture1_render:
```
createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");
```
Esse código inicializa o controle personalizado ImageUploader quando a tela é renderizada.
No Gerenciador de Soluções, abra a tela ViewAppointment.
No designer de tela, escolha o nó de botão Adicionar Foto e altere a propriedade Ícone para Adicionar Imagem.
Na barra de menus, escolha Depurar, Iniciar Depuração para executar o cliente.
No cliente em execução, toque em um compromisso.
Na tela de detalhes do compromisso, toque na guia Fotos.
Toque no botão Adicionar Foto para abrir a caixa de diálogo Carregador de Imagens.

Mapear o endereço do cliente

Como o especialista em planejamento também deve ser capaz de encontrar o local do cliente, agora você adicionará a funcionalidade de mapeamento usando um controle de mapa do Bing.

Para adicionar um controle de mapa

No Gerenciador de Soluções, abra o menu de atalho do nó Scripts, escolha Adicionar e Item Existente.
Na caixa de diálogo Adicionar Item Existente, navegue até a pasta ContosoMoving e abra a pasta Recursos de Exemplo.
Escolha o arquivo lightswitch.bing-maps.js e o botão Adicionar.

Abra o arquivo default.htm e, no editor de códigos, adicione uma referência no início do bloco de referências do script:

<script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Ao final do bloco de referências de script, adicione uma referência ao arquivo JavaScript:

<script type="text/javascript" src="Scripts/lightswitch.bing-maps.js" charset="utf-8"></script>

No Gerenciador de Soluções, abra a tela ViewAppointment.
No designer de tela, abra o menu de atalho do nó Guias e escolha Adicionar Guia.
Na janela Propriedades, defina o valor da propriedade Nome como Mapa.
Abra o menu de atalho do nó Layout das Linhas | Mapa e escolha Adicionar Controle Personalizado.

A caixa de diálogo Adicionar Controle Personalizado é exibida.
Na caixa de texto Especifique os dados do novo controle personalizado, insira Compromisso e escolha o botão OK.
Na janela Propriedades, escolha o hiperlink Editar Código de Renderização.

No editor de códigos, adicione os seguintes métodos de utilitário antes da função Appointment_render:

function rebindMap(element, contentItem) {
    // Verify that we aren't updating the map continuously due to multiple bound values changing.
    var now = new Date();
    if (now.getTime() - mapLastUpdated.getTime() > 15) {
        setTimeout(function () {
            updateMap(element, contentItem);
            mapLastUpdated = new Date();
        }, 20);
    }
};

function updateMap(element, contentItem) {
    var mapDiv = $("#appointmentMap");
    // If we've previously created the map, make sure to clean up the div that contained it;
    // otherwise, the Bing map control fails to create properly.
    if (mapDiv.length > 0) {
        $(mapDiv).remove();
    }
    mapDiv = $("<div id='appointmentMap' class='msls-hauto msls-vauto' ></div>");

    $(mapDiv).appendTo($(element));
    mapControl = mapDiv.lightswitchBingMapsControl({
        street: contentItem.value.Street,
        city: contentItem.value.City,
        state: contentItem.value.State.Name,
        zipcode: contentItem.value.PostalCode,
        mapTypeId: Microsoft.Maps.MapTypeId.road,


        height: "400"
    });
};

Adicione o seguinte código à função Appointment_render:

updateMap(element, contentItem);
mapLastUpdated = new Date();
    contentItem.dataBind("value.Street", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.City", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.Zip", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.PostalCode", function () { rebindMap(element, contentItem); });

Esse código associa os campos do compromisso ao controle de mapa quando a tela é renderizada.

Na barra de menus, escolha Depurar, Iniciar Depuração para executar o cliente.
No cliente em execução, toque em um compromisso.
Na tela de detalhes do compromisso, toque na guia Mapa para exibir um mapa do endereço do cliente.

Adicionar identidade visual

Agora você alterará o título do cliente para algo mais significativo do que MobileClient e adicionará um logotipo corporativo da Contoso Moving para personalizar o cliente.

Para alterar o título

No Gerenciador de Soluções, abra o arquivo default.htm e, no editor de códigos, substitua o elemento <title>MobileClient</title> pelo seguinte código:
```
<title>Contoso Moving Mobile</title>
```

Para adicionar um ícone

No Gerenciador de Soluções, expanda os nós Conteúdo e Imagens.
Exclua o arquivo user-logo.png.
Abra o menu de atalho do nó Imagens, escolha Adicionar e Item Existente.
Na caixa de diálogo Adicionar Item Existente, navegue até a pasta ContosoMoving e abra a pasta Recursos de Exemplo.
Escolha o arquivo user-logo.png e o botão Adicionar.

Dica

Você também poderá personalizar a imagem que aparece na tela inicial se substituir o arquivo user-splash-screen.png.
Na barra de menus, escolha Depurar, Iniciar Depuração para executar o cliente.

Dica

Você talvez precise limpar o cache do navegador para que as alterações sejam exibidas.

Alterar o tema

CSS (folha de estilos em cascata) para definir o tema de um cliente. É possível alterar o tema padrão para alterar a aparência do cliente ou substituir esse tema modificando-se o arquivo .css. Você usará uma ferramenta da Web, ThemeRoller, para criar um arquivo a.css com um tema personalizado.

Para alternar temas

No Gerenciador de Soluções, abra o arquivo default.htm e, no editor de códigos, substitua "light" nas duas linhas a seguir <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />, <link rel="stylesheet" type="text/css" href="Content/msls-light.css" />por dark.
Na barra de menus, escolha Depurar, Iniciar Depuração para executar o cliente.

Para personalizar um tema existente

No seu navegador da Web, vá para o site ThemeRoller.
Na barra de ferramentas ThemeRoller, clique no botão Importar ou atualizar.

A caixa de diálogo Importar Tema aparece.
No Visual Studio, no Gerenciador de Soluções, escolha Exibição de Arquivo na lista da barra de ferramentas.
Expanda o nó Conteúdo e abra o arquivo dark-theme.css.
No editor de códigos, copie todo o conteúdo do arquivo.
Em ThemeRoller, cole o conteúdo do arquivo dark-theme.css na caixa de diálogo Importar Tema e escolha o botão Importar.
No painel à esquerda, escolha a guia Global e expanda o nó Raios do Canto.
Na caixa de texto Grupo, insira 0.8em.
Na caixa de texto Botão, insira 1.5em.

Os elementos de interface do usuário no painel à direita agora têm cantos arredondados.
No painel à direita, arraste uma cor da paleta de cores para a área do plano de fundo de Amostra A.
Arraste outra cor para o elemento Rádio.

Todos os elementos relacionados também mudam de cor. Quando você aponta para um elemento, ele muda para uma cor complementar, indicando a cor da seleção.
Na barra de ferramentas ThemeRoller, escolha o botão Baixar.
Na caixa de diálogo Baixar Tema, nomeie o tema como my-theme e escolha o botão Baixar ZIP.
Extraia o conteúdo do arquivo compactado em uma pasta local.
No Gerenciador de Soluções, abra o menu de atalho do nó Conteúdo, escolha Adicionar e Item Existente.
Na caixa de diálogo Adicionar Item Existente, navegue até a pasta onde você extraiu os arquivos, escolha o arquivo my-theme.css e o botão Adicionar.
Abra o arquivo default.htm, localize a linha <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> no editor de códigos e substitua "dark-theme" por my-theme.
Na barra de menus, escolha Depurar, Iniciar Depuração para executar o cliente.

Próximas etapas

Agora você tem um aplicativo cliente móvel em funcionamento. Para testá-lo em um dispositivo móvel, publique o aplicativo no IIS (Serviços de Informações da Internet) ou no Microsoft Azure.

Consulte também

Outros recursos

Telas do cliente HTML para aplicativos do LightSwitch

Como implantar um aplicativo LightSwitch de três camadas

Como hospedar um aplicativo LightSwitch no Microsoft Azure

Partilhar via

Instruções passo a passo: criando um cliente do LightSwitch para usuários móveis

Pré-requisitos

Guia de Introdução

Para criar dados de exemplo

Adicionar um cliente móvel

Para adicionar um projeto de cliente HTML

Criar telas e definir navegação

Para criar uma tela inicial

Para personalizar a tela inicial

Para criar uma tela de detalhes

Para personalizar a tela de detalhes

Para mostrar a caixa de diálogo

Personalizar a interface do usuário

Para aplicar formatação personalizada usando bibliotecas JavaScript

Para alterar o layout para uma lista lado a lado

Para adicionar um título de tela dinâmica

Adicionar um controle personalizado para carregar fotos

Para adicionar um controle personalizado

Mapear o endereço do cliente

Para adicionar um controle de mapa

Adicionar identidade visual

Para alterar o título

Para adicionar um ícone

Alterar o tema

Para alternar temas

Para personalizar um tema existente

Próximas etapas

Consulte também

Outros recursos

Recursos adicionais

Partilhar via

Instruções passo a passo: criando um cliente do LightSwitch para usuários móveis

Pré-requisitos

Guia de Introdução

Para criar dados de exemplo

Adicionar um cliente móvel

Para adicionar um projeto de cliente HTML

Criar telas e definir navegação

Para criar uma tela inicial

Para personalizar a tela inicial

Para criar uma tela de detalhes

Para personalizar a tela de detalhes

Para criar uma caixa de diálogo modal

Para mostrar a caixa de diálogo

Personalizar a interface do usuário

Para aplicar formatação personalizada usando bibliotecas JavaScript

Para alterar o layout para uma lista lado a lado

Para adicionar um título de tela dinâmica

Adicionar um controle personalizado para carregar fotos

Para adicionar um controle personalizado

Mapear o endereço do cliente

Para adicionar um controle de mapa

Adicionar identidade visual

Para alterar o título

Para adicionar um ícone

Alterar o tema

Para alternar temas

Para personalizar um tema existente

Próximas etapas

Consulte também

Outros recursos

Recursos adicionais