Curso Windows Phone – C# binding converter para XAML

Olá pessoal, tudo bom?

Hoje falaremos sobre binding e sua propriedade de conversão de valores da fonte de dados para o elemento XAML que irá exibi-lo. O recurso de binding é muito utilizado em APPs do Windows Phone para exibição de informações oriundas de um banco de dados local, de consultas a webservices, conteúdo de arquivos XML, respostas JSON via REST, etc.

Como exemplo para esse post, simularemos uma situação onde a URL de uma determinada imagem a ser exibida pela APP está misturada ao texto de uma notícia, sendo assim, precisaremos obter a URL da imagem junto a esse texto e fazer com que o resultado seja o valor a ser atribuído ao binding do elemento XAML image.

Exemplo do texto original:

<img width=”600″ height=”438″ src=”http://windowsphonebrasil.com.br/wp-content/uploads/2014/05/HTC-W8-windows-phone-81.jpg” class=”attachment-large wp-post-image” alt=”HTC W8 windows phone 81″ />O @Evleaks já havia revelado que o novo modelo da HTC …

Vale ressaltar que o comportamento padrão do binding é usar a conversão padrão entre a fonte dos dados e o elemento que irá recebê-la, mas dada a situação acima, claramente percebemos que essa conversão padrão não será capaz de obter o URL da imagem e associa-la ao elemento image, sendo assim, teremos que construir uma classe converter para fazer esse trabalho para nós.

1o. passo: Criar um custom value converter

Se você deseja associar um converter customizado ao binding, será necessário codificar uma classe que implemente a interface IValueConverter e escrever os métodos Convert e ConvertBack.

Para o nosso caso, teremos:

public class ExtrairImagemSumario : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
    string imagem = string.Empty;
    string sumario = (string)value;

    Regex rg = new Regex("src="(.*?)"", RegexOptions.IgnoreCase);
    imagem = rg.Match(sumario).Value.Substring(5); //Retirando o "src='"
    imagem = imagem.Substring(0, imagem.Length - 1); //Retirando o último apóstrofo

    return imagem;
  }

  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    return DependencyProperty.UnsetValue;
  }
}

2o. passo: Preparar o arquivo XAML para usar o Converter customizado

No arquivo XAML, faça os seguiintes ajustes:

<phone:PhoneApplicationPage
  ...
  xmlns:local="clr-namespace:Nome_do_seu_Projeto"
  ...
  SupportedOrientations="Portrait" Orientation="Portrait"
  shell:SystemTray.IsVisible="False">

  <phone:PhoneApplicationPage.Resources>
    <local:ExtrairImagemSumario x:Key="extrairImagemSumario"></local:ExtrairImagemSumario>
  </phone:PhoneApplicationPage.Resources>
  ...

Após a definição acima, basta chamar o converter associado ao binding desejado, no nosso caso, para exibir a imagem a ser recuperada pela URL junto ao texto da notícia.

...
<Border Name="bordaImagem" BorderBrush="White" BorderThickness="1" HorizontalAlignment="Left" VerticalAlignment="Top">
  <Image Name="imgThumb" Width="81" HorizontalAlignment="Center" VerticalAlignment="Top"
         Source="{Binding Summary.Text,
         Converter={StaticResource extrairImagemSumario}}" />
</Border>
...

Grande abraço !
Eduardo Henrique Rizo

Post Relacionado: 

• Curso Windows Phone gratuito

[twitter-follow screen_name=’eduardorizo’ show_count=’yes’]