Introdução

Esse tutorial tem como objetivo mostrar como definir o fundo de um aplicativo Windows Phone que usa o padrão de design Panorama através de um web-service JSON. Para exemplificar esse este tutorial iremos criar um aplicativo panorama e configurar ele pra pegar o endereço de alguma imagem e modificar o fundo do panorama apara essa imagem.

A aplicação gerada pelo Visual Studio Express possui a seguinte aparência:

Panorama template

Recebendo o endereço da imagem pelo web-service

Ao contrário do que pode parecer a um primeiro momento, o web-service em si não nos dá a imagem diretamente, mas sim o endereço onde ela pode ser acessada. Com esse endereço podemos acessar a mesma e utilizarmos da maneira que preferirmos. Assim como feito no tutorial de comunicação com web-services iremos usar o pacote nuget Json.NET para processar a resposta do web-service.

Para iniciar iremos criar um método que se comunica com o web-service e outro auxiliar, que trata os dados recebidos quando termina o download dos dados. No método construtor do Panorama adicione a chamada para o método que iremos criar, ficando deste modo:

[sourcecode language=”csharp” wraplines=”false” collapse=”false”]
public MainPage()
{
InitializeComponent();

// Set the data context of the listbox control to the sample data
DataContext = App.ViewModel;

// Set Background of Panorama
SetBackgroundByWS();
}
[/sourcecode]

Agora que o método de criação do panorama já possui uma chamada para o método que modifica o background devemos implementar ele. Este método é responsável por se comunicar com o web-service e definir qual é o método que deve ser chamado quando o download é concluído.

[sourcecode language=”csharp” wraplines=”false” collapse=”false”]
// Comunica com o web-service para receber e alterar o background do panorama.
private void SetBackgroundByWS()
{
//Conecta ao web-service e recupera o endereço da imagem de background.
const string webServiceAddress = "<dummyaddress>/app_def.json";
WebClient webclient = new WebClient();

try
{
webclient.DownloadStringCompleted += DownloadImageAddressCompleted;
webclient.DownloadStringAsync(new Uri(webServiceAddress));
}
catch(Exception) {
MessageBox.Show("Não foi possivel acessar o servidor que contem as definições do aplicativo");
}
}
[/sourcecode]

Processamento do JSON e alteração da imagem

O método acima chama o método DownloadImageAddressCompleted quando o download do JSON finaliza. Este método é responsável por processar o JSON e modificar a imagem de background do Panorama. Para fazer isso ele cria um novo ImageBrush que conterá a imagem obtida da url recebida e define esse ImageBrush como background. O código responsável por esse trabalho pode ser visto a seguir.

[sourcecode language=”csharp” wraplines=”false” collapse=”false”]
// Processamento e alteração de imagem de background.
private void DownloadImageAddressCompleted(object sender, DownloadStringCompletedEventArgs e)
{
string data_received = e.Result;
string img_address = "";
if (!string.IsNullOrEmpty(data_received))
{
img_address = (JToken.Parse(data_received)).Value<string>("img_address");
MessageBox.Show(img_address);
}

// Definição de imagem do Background do Panorama.
if (!string.IsNullOrEmpty(img_address))
{
ImageBrush imagebrush = new ImageBrush();
imagebrush.ImageSource = new BitmapImage(new Uri(img_address, UriKind.Absolute));
RootPanorama.Background = imagebrush;
}
}
[/sourcecode]

Com esse código o aplicativo passa a alterar a imagem logo em seguida que recebe os dados do web-service. Assim podemos ver o exemplo a seguir:

Panorama com background alterado de acordo com o web-service.