Trabalhando com o controle de imagem: Tutorial de desenvolvimento de aplicativos do Windows Phone - Parte 18

Trabalhando com o controle de imagem: Tutorial de desenvolvimento de aplicativos do Windows Phone - Parte 18
Trabalhando com o controle de imagem: Tutorial de desenvolvimento de aplicativos do Windows Phone - Parte 18

Vídeo: Trabalhando com o controle de imagem: Tutorial de desenvolvimento de aplicativos do Windows Phone - Parte 18

Vídeo: Trabalhando com o controle de imagem: Tutorial de desenvolvimento de aplicativos do Windows Phone - Parte 18
Vídeo: How to Use Windows 7 Vista Windows TWEAK UI Video 23 - YouTube 2024, Maio
Anonim

Agora que nos baseamos nos Controles de Entrada e Evento XAML, nesta arte da série de desenvolvimento do Windows Phone 7.5 Mango App, vamos dar uma olhada no Controle de Imagem que permite exibir imagens em seu Aplicativo do Windows Phone 7 do Silverlight.

Então vamos começar!

Crie um novo projeto do Windows Phone 7 com um nome exclusivo como "ImageControlDemo". Agora arraste e solte o controle de imagem da caixa de ferramentas para a superfície de design. Agora, para exibir uma imagem no controle de imagem, usamos a propriedade "Source" do Image Control. Essa propriedade pode ser encontrada na janela Propriedades logo antes da propriedade "Esticar". A propriedade Source define de onde a imagem virá para ser exibida no Image Control. Ao clicar nas reticências próximas à propriedade Origem, uma nova janela é aberta solicitando que escolhamos a imagem. Clique no botão Adicionar imagem para adicionar uma imagem ao projeto.

Ao selecionar uma imagem, algumas coisas interessantes acontecem. Primeiro de tudo Visual Studio cria automaticamente uma pasta pelo nome Images e adiciona o arquivo de imagem que você selecionou. Em segundo lugar, cria um URI (Uniform Resource Identifier) / caminho para acessar a imagem, algo como "/Images;component/Images/Picture1.jpg". O / Image refere-se ao pacote de implantação e o que vem depois do ponto-e-vírgula fará referência a esse arquivo no pacote de implantação, uma vez implantado no telefone, ou seja, o arquivo xap. Depois de clicar no botão OK da janela Escolher imagem, a imagem é carregada no controle de imagem.

Outra propriedade notável do controle de imagem é a propriedade "Esticar". Definindo a propriedade Stretch para Fill; preenche toda a área do controle de imagem com a imagem, independentemente das dimensões da imagem. Alterar o tamanho do controle de imagem altera o tamanho da imagem. Não se considera a proporção da imagem, distorcendo o quadro. Definir a propriedade Esticar como Uniforme mantém a perspectiva correta, respeitando a altura ou a largura da imagem, mas ela não cortará a imagem. Definir a propriedade Stretch como "UniformToFill" respeita as proporções vertical e horizontal da imagem. A imagem é recortada, se necessário, para manter a proporção. O recorte pode ser endereçado permitindo que o usuário role a imagem para cima ou para baixo, para a esquerda ou para a direita. Para fazer isso, tudo o que você precisa fazer é cercar a imagem com um controle ScrollViewer e definir a visibilidade horizontal e vertical da barra de rolagem para visível.
Outra propriedade notável do controle de imagem é a propriedade "Esticar". Definindo a propriedade Stretch para Fill; preenche toda a área do controle de imagem com a imagem, independentemente das dimensões da imagem. Alterar o tamanho do controle de imagem altera o tamanho da imagem. Não se considera a proporção da imagem, distorcendo o quadro. Definir a propriedade Esticar como Uniforme mantém a perspectiva correta, respeitando a altura ou a largura da imagem, mas ela não cortará a imagem. Definir a propriedade Stretch como "UniformToFill" respeita as proporções vertical e horizontal da imagem. A imagem é recortada, se necessário, para manter a proporção. O recorte pode ser endereçado permitindo que o usuário role a imagem para cima ou para baixo, para a esquerda ou para a direita. Para fazer isso, tudo o que você precisa fazer é cercar a imagem com um controle ScrollViewer e definir a visibilidade horizontal e vertical da barra de rolagem para visível.
Propriedade Uniforme de Controle de Imagem
Propriedade Uniforme de Controle de Imagem

Uma última coisa antes de encerrarmos esta lição. Caso deseje definir a imagem por meio do código C #, basta criar um objeto do objeto BitmapImage e especificar o URI no construtor sobrecarregado. Depois que o objeto BitmapImage for criado, tudo o que você precisa fazer é igualá-lo à propriedade de origem do Image Control.

BitmapImage myImage = new BitmapImage (novo Uri ("/ Images; component / Images / Penguins.jpg", UriKind.Relative));

image1.Source = myImage;

É um controle bastante simples e tem sua utilidade servida em muitos lugares.

Por enquanto, no próximo tutorial, aprenderemos mais sobre Estilos e Recursos.

Posts relacionados:

  • GPS, API de localização e Calling Web Services: Tutorial de desenvolvimento de aplicações para Windows Phone - 25
  • Aprenda a desenvolver o Windows Phone 7.5 Mango Applications: Parte 1
  • Windows Phone Tutorial 8: Criando um botão personalizado no Expression Blend-I
  • Tutorial do Windows Phone 4: Criando a interface do usuário
  • Trabalhando com estilos e recursos: Tutorial de desenvolvimento de aplicativos do Windows Phone - Parte 19

Recomendado: