Question

I am binding data that I receive from a WCF weather service to a datagrid in silverlight. I get a return of a 7 day forecast. The problem I am having is that the return is a collection and in this collection is Temperature and Probability of Precipitation which are another level deep. In Temperature there is High and Low and then Probability of Precipitation has Daytime and Nighttime.

namespace MyProject
{
public partial class MainPage : UserControl
{

    WeatherSoapClient weatherClient = new WeatherSoapClient();

    public MainPage()
    {
        InitializeComponent();

        weatherClient.GetCityWeatherByZIPCompleted += new EventHandler<GetCityWeatherByZIPCompletedEventArgs>(weatherClient_GetCityWeatherByZIPCompleted);
    }

This is where I am setting the datagrid’s source to the Forecast Collection.

    void weatherClient_GetCityForecastByZIPCompleted(object sender, GetCityForecastByZIPCompletedEventArgs e)
    {
        this.dataGrid1.ItemsSource = e.Result.ForecastResult;

    }

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

And the results that I get in the datagrid look like this:
https://i.stack.imgur.com/9W67v.jpg

As you can see under Temperature and POP that is not what I would want displayed. Being new to C# I have had a difficult time getting to the point I am at. Now someone suggested making a custom converter to drill down deeper. I am unsure of how to do this. Any help would be greatly appreciated. Hopefully I show everything you need to see.

Answer 1

You need to set AutoGenerateColumns to False on the data grid, and then define the column types yourself (plenty of information about how to do this on the internet).

For the first few columns, DataGridTextColumn is fine.

For the last two, you want to use a DataGridTemplateColumn. In the DataTemplate for the column, you can put two TextBlocks, each binding to a different property.

For example:

<data:DataGrid AutoGenerateColumns="False">
    <data:DataGrid.Columns>

      <data:DataGridTextColumn Header="Date"
                               Binding="{Binding Date}" />

      <data:DataGridTextColumn Header="ID"
                               Binding="{Binding WeatherID}" />

      <data:DataGridTemplateColumn Header="Temperature">
        <data:DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
             <StackPanel>
               <TextBlock Text="{Binding Temperatures.High}" />
               <TextBlock Text="{Binding Temperatures.Low}" />
             </StackPanel>
          </DataTemplate>
        </data:DataGridTemplateColumn.CellTemplate>
      </data:DataGridTemplateColumn>
    </data:DataGrid.Columns>
</data:DataGrid>