[Desenvolvimento] C# binding converter para XAML

5

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.

BindingMarkup

Fonte: https://www.scottlogic.com/blog/2012/04/20/everything-you-want…

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://www.windowsteam.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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
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:

1
2
3
4
5
6
7
8
9
10
11
12
 
<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.

1
2
3
4
5
6
7
8
 
...
<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 (@eduardorizo)

MCP

Post Relacionado:

Fonte: Blog do Eduardo H. Rizo

Share.

About Author

Bacharel em Ciência da Computação pela FIPP/Unoeste, Pós-Graduado em Desenvolvimento de Sistemas Web, Segurança da Informação e Avaliação do Ensino e da Aprendizagem, Professor universitário e responsável pelo setor de desenvolvimento de sistemas web da Universidade do Oeste Paulista. MCP e MCPS pela Microsoft e nas horas vagas dedica um pouco do seu tempo escrevendo posts técnicos sobre desenvolvimento de sistemas web, windows phone, gerenciamento de servidores e outros assuntos para a comunidade.