How to show GIF images in a Silverlight dataGrid using WCF services?

Question

I am trying to show images of weather icons depending on the weather ID that the weather WCF assigned to that day in the Forecast. I am displaying the data in a datagrid and want to add a new column with the icons. Unfortunately the icons are gifs which I know Silverlight does not support so if someone could help that would be great!

 public partial class MainPage : UserControl
{

Creating an array of the images and ID's associated with them.

    private WeatherDescription[] weatherInformation;

    WeatherSoapClient weatherClient = new WeatherSoapClient();
    public MainPage()
    {
        InitializeComponent();

        weatherClient.GetCityForecastByZIPCompleted += new EventHandler<GetCityForecastByZIPCompletedEventArgs>(weatherClient_GetCityForecastByZIPCompleted);
        weatherClient.GetCityWeatherByZIPCompleted += new EventHandler<GetCityWeatherByZIPCompletedEventArgs>(weatherClient_GetCityWeatherByZIPCompleted);
        weatherClient.GetWeatherInformationCompleted += new EventHandler<GetWeatherInformationCompletedEventArgs>(weatherClient_GetWeatherInformationCompleted);
        weatherClient.GetWeatherInformationAsync();
    }

This is where I am setting the Result of the WCF call to the array.

    void weatherClient_GetWeatherInformationCompleted(object sender, GetWeatherInformationCompletedEventArgs e)
    {
        weatherInformation = e.Result;
    }

    void weatherClient_GetCityForecastByZIPCompleted(object sender, GetCityForecastByZIPCompletedEventArgs e)
    {
        this.dataGrid1.ItemsSource = e.Result.ForecastResult;
        for (int i = 0; i < e.Result.ForecastResult.Length; i++)
        {
            if (i == 0)
            {
                e.Result.ForecastResult[i].Temperatures.DaytimeHigh += "°F";
                e.Result.ForecastResult[i].ProbabilityOfPrecipiation.Daytime += "%";
            }
            else
            {
                e.Result.ForecastResult[i].Temperatures.DaytimeHigh += "°F";
                e.Result.ForecastResult[i].Temperatures.MorningLow += "°F";
                e.Result.ForecastResult[i].ProbabilityOfPrecipiation.Daytime += "%";
                e.Result.ForecastResult[i].ProbabilityOfPrecipiation.Nighttime += "%";
            } 
        }
    }

    void weatherClient_GetCityWeatherByZIPCompleted(object sender, GetCityWeatherByZIPCompletedEventArgs e)
    {
        this.textBlock1.Text = "City: " + e.Result.City + "\n";
        this.textBlock1.Text += "State: " + e.Result.State + "\n";
        this.textBlock1.Text += "Weather ID: " + e.Result.WeatherID + "\n";
        this.textBlock1.Text += "Weather Station: " + e.Result.WeatherStationCity + "\n";
        this.textBlock1.Text += "Temperature: " + e.Result.Temperature + "°F \n";
        this.textBlock1.Text += "Description: " + e.Result.Description + "\n";
        this.textBlock1.Text += "Pressure: " + e.Result.Pressure + "\n";
        this.textBlock1.Text += "Relative Humidity: " + e.Result.RelativeHumidity + "% \n";
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        weatherClient.GetCityWeatherByZIPAsync(inputZip.Text);
        weatherClient.GetCityForecastByZIPAsync(inputZip.Text);
    }
}
}

Then if it helps this is my markup of the dataGrid.

<sdk:DataGrid AutoGenerateColumns="False" Height="310" Margin="12,131,407,0" Name="dataGrid1" VerticalAlignment="Top" AlternatingRowBackground="#00010000">
        <sdk:DataGrid.Columns>
            <sdk:DataGridTextColumn Header="Date" Binding="{Binding Date}" />
            <sdk:DataGridTextColumn Header="ID" Binding="{Binding WeatherID}" />
            <sdk:DataGridTextColumn Header="Description" Binding="{Binding Desciption}" />
            <sdk:DataGridTemplateColumn Header="Temperature">
                <sdk:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Temperatures.DaytimeHigh}" Name="DaytimeHigh" />
                            <TextBlock Text="{Binding Temperatures.MorningLow}" Name="MorningLow"/>
                        </StackPanel>
                    </DataTemplate>
                </sdk:DataGridTemplateColumn.CellTemplate>
            </sdk:DataGridTemplateColumn>
            <sdk:DataGridTemplateColumn Header="Probability of Precipitation">
                <sdk:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding ProbabilityOfPrecipiation.Daytime}" Name="Daytime"/>
                            <TextBlock Text="{Binding ProbabilityOfPrecipiation.Nighttime}" Name="Nighttime"/>
                        </StackPanel>
                    </DataTemplate>
                </sdk:DataGridTemplateColumn.CellTemplate>
            </sdk:DataGridTemplateColumn>
        </sdk:DataGrid.Columns>
    </sdk:DataGrid>

If you need more information about it let me know. I hope someone is able to help.

So, what is your question? Is it about the gifs or your implementation — KodeKreachor, Apr 22 '12 at 00:50
I am unsure how to do it. First problem is showing the images in the datagrid when referring to an ID. And then how to convert gif to say a jpg? — Fogolicious, Apr 22 '12 at 01:06

score 0 · Answer 1 · answered Apr 22 '12 at 15:43

0

Silverlight does not support GIF's, therefore you will have to convert them to jpg or png. I suggest you do that server side only once.

Then you can show your images in the datagrid within your template column, using a relative path.

<Image x:Name="myImage" Source="../someImage.jpg" />

Where are your images stored? You mention to refer to them by id. Are they stored in the database? You could then write an HTTP-handler to load the images or load them through your service.

answered Apr 22 '12 at 15:43

slfan

8,950
115
65
78

I actually just wrote a better to try and help with this issue so this is the link to that. http://stackoverflow.com/questions/10269731/creating-a-converter-to-take-an-id-and-create-an-image-in-silverlight If that does not answer your question let me know. I appreciate the help! – Fogolicious Apr 22 '12 at 16:26

How to show GIF images in a Silverlight dataGrid using WCF services?

1 Answers1