Xamarin.Forms Tutorial de imagem

Artigo
Developer (Iniciante)
10 minutos para concluir

Antes de tentar realizar este tutorial, você deve ter concluído com sucesso:

Crie seu primeiro Xamarin.Forms início rápido de aplicativo .
Tutorial de StackLayout.

Neste tutorial, você aprenderá a:

Crie um Xamarin.FormsImage em XAML.
Personalizar a aparência de Image.
Exibir um arquivo de imagem local de cada projeto da plataforma.

Você usará o Visual Studio 2019 ou Visual Studio para Mac para criar um aplicativo simples que demonstra como exibir uma imagem e personalizar a aparência. Estas capturas de tela mostram o aplicativo final:

Você também usará Recarga Dinâmica XAML para Xamarin.Forms ver as alterações da interface do usuário sem recompilar seu aplicativo.

Criar uma imagem

9 minutos restantes

Visual Studio
Visual Studio para Mac

Para concluir este tutorial, você precisará ter o Visual Studio 2019 (versão mais recente) com a carga de trabalho Desenvolvimento mobile com .NET instalada. Além disso, você precisará de um Mac emparelhado para compilar o aplicativo do tutorial no iOS. Para obter informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin. Para obter informações sobre como conectar o Visual Studio 2019 a um host de build Mac, confira Emparelhar com o Mac para desenvolvimento no Xamarin.iOS.

Inicie o Visual Studio e crie um novo aplicativo em branco Xamarin.Forms chamado ImageTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada ImageTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.
No Gerenciador de Soluções, no projeto ImageTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo 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="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Image em um StackLayout. A propriedade Image.Source especifica a imagem a ser exibida por meio de um URI. A propriedade Image.Source é do tipo ImageSource, o que permite que as imagens sejam originadas de arquivos, URIs ou recursos. Para obter mais informações, consulte Exibindo imagens no guia Imagens em Xamarin.Forms .

A propriedade HeightRequest especifica a altura de Image em unidades independentes do dispositivo.

Observação

Não é necessário definir a propriedade WidthRequest neste exemplo. Isso acontece porque, por padrão, Image mantém a taxa de proporção da imagem.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador remoto de iOS ou do Android Emulator escolhido:

Observação

A exibição Image armazena automaticamente as imagens baixadas por 24 horas. Para obter mais informações, consulte Cache de imagem baixado no guia Imagens em Xamarin.Forms .

Para concluir este tutorial, você precisará ter o Visual Studio para Mac (versão mais recente), com suporte para plataforma iOS e Android, instalado. Além disso, você também precisará do Xcode (versão mais recente). Para obter mais informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin.

Inicie o Visual Studio para Mac e crie um novo aplicativo em branco Xamarin.Forms chamado ImageTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada ImageTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.
No Painel de Soluções, no projeto ImageTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo 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="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Image em um StackLayout. A propriedade Image.Source especifica a imagem a ser exibida por meio de um URI. A propriedade Image.Source é do tipo ImageSource, o que permite que as imagens sejam originadas de arquivos, URIs ou recursos. Para obter mais informações, consulte Exibindo imagens no guia Imagens em Xamarin.Forms .

A propriedade HeightRequest especifica a altura de Image em unidades independentes do dispositivo.

Observação

Não é necessário definir a propriedade WidthRequest neste exemplo. Isso acontece porque, por padrão, Image mantém a taxa de proporção da imagem.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

Observação

A exibição Image armazena automaticamente as imagens baixadas por 24 horas. Para obter mais informações, consulte Cache de imagem baixado no guia Imagens em Xamarin.Forms .

Personalizar a aparência

6 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração Image para personalizar sua aparência:
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Esse código define a propriedade Aspect, que define o modo de escala da imagem, como Fill. O membro Fill é definido na enumeração Aspect e alonga a imagem para preencher completamente a exibição, independentemente de se a imagem está distorcida. Para obter mais informações sobre dimensionamento de imagem, consulte Exibindo imagens no guia Imagens em Xamarin.Forms .

A extensão de marcação OnPlatform permite que você personalize a aparência da interface do usuário por plataforma. Neste exemplo, a extensão de marcação é usada para definir as propriedades HeightRequest e WidthRequest como 300 unidades independentes de dispositivo em iOS e 250 unidades independentes de dispositivo em Android. Para obter mais informações sobre a extensão de marcação OnPlatform, confira extensão de marcação OnPlatform no guia Consumindo extensões de marcação XAML.

Além disso, a propriedade HorizontalOptions especifica que a imagem será centralizada horizontalmente.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador remoto de iOS ou do Android Emulator de sua preferência:

Interrompa o aplicativo no Visual Studio.

Em MainPage.xaml, modifique a declaração Image para personalizar sua aparência:
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Esse código define a propriedade Aspect, que define o modo de escala da imagem, como Fill. O membro Fill é definido na enumeração Aspect e alonga a imagem para preencher completamente a exibição, independentemente de se a imagem está distorcida. Para obter mais informações sobre dimensionamento de imagem, consulte Exibindo imagens no guia Imagens em Xamarin.Forms .

A extensão de marcação OnPlatform permite que você personalize a aparência da interface do usuário por plataforma. Neste exemplo, a extensão de marcação é usada para definir as propriedades HeightRequest e WidthRequest como 300 em iOS e 250 em Android. Para obter mais informações sobre a extensão de marcação OnPlatform, confira extensão de marcação OnPlatform no guia Consumindo extensões de marcação XAML.

Além disso, a propriedade HorizontalOptions especifica que a imagem será centralizada horizontalmente.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio para Mac, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador de iOS ou do Android Emulator de sua preferência:

Interrompa o aplicativo no Visual Studio para Mac.

Exibir uma imagem local

4 minutos restantes

Os arquivos de imagem podem ser adicionados a projetos de plataforma e referenciados a partir do Xamarin.Forms código compartilhado. Esse método de distribuição de imagens é necessário quando as imagens são específicas da plataforma, como ao usar resoluções diferentes em diferentes plataformas ou designs ligeiramente diferentes.

Neste exercício, você modificará a solução ImageTutorial para exibir uma imagem local, em vez de uma imagem baixada de um URI. A imagem local é o logotipo do Xamarin, que deve ser baixado clicando no botão abaixo.

Baixar XamarinLogo.png

Importante

Para usar uma única imagem em todas as plataformas o mesmo nome de arquivo deve ser usado em todas as plataformas, e deve ser um nome de recurso válido do Android (ou seja, apenas letras minúsculas, números, sublinhado e ponto são permitidos).

Visual Studio
Visual Studio para Mac

Na Gerenciador de Soluções, no projeto ImageTutorial.iOS, expanda Catálogos de Ativos e clique duas vezes em Ativos para abri-lo. Em seguida, na guia Assets.xcassets, clique no botão Mais e selecione Adicionar Conjunto de Imagens:
Na guia Assets.xcassets, selecione o novo conjunto de imagens e o editor será exibido:
Arraste XamarinLogo.png de seu sistema de arquivos para a caixa 1x para a categoria Universal:
Na guia Assets.xcassets, clique com o botão direito do mouse no nome do conjunto de imagens e altere seu nome para XamarinLogo:

Salve e feche a guia Assets.xcassets.
No Gerenciador de Soluções, no projeto ImageTutorial.Android, expanda a pasta Recursos. Em seguida, arraste XamarinLogo.png de seu sistema de arquivos para a pasta desenhável:

Observação

O Visual Studio definirá automaticamente a ação de compilação para a imagem como AndroidResource.
No projeto ImageTutorial, na MainPage.xaml, modifique a declaração Image para exibir o arquivo XamarinLogo local:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Esse código define a propriedade Source para o arquivo local exibir. A propriedade WidthRequest é definida como 300 unidades independentes de dispositivo em iOS e 250 unidades independentes de dispositivo em Android. Além disso, a propriedade HorizontalOptions especifica que a imagem será centralizada horizontalmente.

Observação

Para imagens PNG no iOS, a extensão .png pode ser omitida do nome de arquivo especificado na propriedade Source. Para outros formatos de imagem, a extensão é necessária.
Na barra de ferramentas do Visual Studio, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador de iOS ou do Android Emulator de sua preferência:

Interrompa o aplicativo no Visual Studio.

Para obter mais informações sobre imagens locais, consulte Imagens locais no guia Imagens emXamarin.Forms.

No Painel de Soluções, no projeto ImageTutorial.iOS, clique duas vezes em Assets.xcassets para abri-lo. Em seguida, na Lista de Ativos, clique com o botão direito do mouse e selecione Novo Conjunto de Imagens:
Na guia Lista de Ativos, selecione o novo conjunto de imagens e o editor será exibido:
Arraste XamarinLogo.png de seu sistema de arquivos para a caixa 1x para a categoria Universal:
Na Lista de Ativos, clique duas vezes no nome do novo conjunto de imagens e altere seu nome para XamarinLogo:
No Painel de Soluções, no projeto ImageTutorial.Android, expanda a pasta Recursos. Em seguida, arraste XamarinLogo.png de seu sistema de arquivos para a pasta desenhável.
Na caixa de diálogo Adicionar Arquivo à Pasta, selecione OK.

Observação

O Visual Studio para Mac definirá automaticamente a ação de compilação para a imagem como AndroidResource.
No projeto ImageTutorial, na MainPage.xaml, modifique a declaração Image para exibir o arquivo XamarinLogo local:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Esse código define a propriedade Source para o arquivo local exibir. A propriedade WidthRequest é definida como 300 unidades independentes de dispositivo em iOS e 250 unidades independentes de dispositivo em Android. Além disso, a propriedade HorizontalOptions especifica que a imagem será centralizada horizontalmente.

Observação

Para imagens PNG no iOS, a extensão .png pode ser omitida do nome de arquivo especificado na propriedade Source. Para outros formatos de imagem, a extensão é necessária.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

Interrompa o aplicativo no Visual Studio para Mac.

Para obter mais informações sobre imagens locais, consulte Imagens locais no guia Imagens emXamarin.Forms.