Image Source not binding properly in DataTemplate in Windows 8 Mobile - image

Question

I have this list of objects that needs to be separated into two columns. Then I use this template for every object of the list:
<DataTemplate x:Key="UnderlyingRealTimeExchangeRatesLongListSelector">
<Grid Background="{Binding PriceChanged, Converter={StaticResource PriceChangedToBackgroundConverter}}"
Margin="0,2.5,5,2.5" Tap="RealTimeElement_Tapped">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtUnderlyingName" Text="{Binding Name}" Foreground="White"
Style="{StaticResource NormalFontStyle}" HorizontalAlignment="Left"
Margin="5" FontSize="25" Padding="10" TextWrapping="Wrap"/>
<Image Grid.Column="1"
Source="{Binding Path= Image, Converter={StaticResource ImageToFlagConverter}}"
Height="30"></Image>
<TextBlock x:Name="txtUnderlyingPrice" Text="{Binding Price, StringFormat='0:N2'}"
Grid.Row="1" Grid.ColumnSpan="2" Foreground="#FFD300"
Style="{StaticResource LightFontStyle}" FontSize="40"
HorizontalAlignment="Right" VerticalAlignment="Center" Padding="10"/>
</Grid>
</DataTemplate>
<phone:LongListSelector x:Name="llsRealTimeCurrencies1" Grid.Column="0" Margin="0,15,0,32"
ItemTemplate="{StaticResource UnderlyingRealTimeExchangeRatesLongListSelector}"
Visibility="Collapsed"/>
<phone:LongListSelector x:Name="llsRealTimeCurrencies2" Grid.Column="1" Margin="0,15,0,32"
ItemTemplate="{StaticResource UnderlyingRealTimeExchangeRatesLongListSelector}"
Visibility="Collapsed"/>
Here is the converter:
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
//Returns The flag needed
if (value != null)
{
string image = value.ToString().ToLower();
string flag = "Assets\\flags\\" + image + "_flag.png";
return Path.GetFullPath(flag);
}
else
{
return null;
}
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
Here is the code behind the previous part:
private void SetAndShowCorrectRealTimeList<T>(LongListSelector[] list, IList<T> collection)
{
//and make sure the grid holding the lists is visible
grdRealtimeLists.Visibility = System.Windows.Visibility.Visible;
List<LongListSelector> lists =
new List<LongListSelector>()
{
llsRealTimeCommodities1,
llsRealTimeCommodities2,
llsRealTimeCurrencies1,
llsRealTimeCurrencies2,
llsRealTimeIndecies1,
llsRealTimeIndecies2,
llsRealTimeWatchList1,
llsRealTimeWatchList2
};
foreach (var item in lists.Except(list))
{
item.Visibility = System.Windows.Visibility.Collapsed;
}
for (int i = 0; i < list.Length; i++)
{
list[i].Visibility = Visibility.Visible;
List<T> result = collection.Where((item, index) => index % 2 == i).ToList();
list[i].ItemsSource = result;
}
}
The funny part is that it displays the images on the left column, but doesn't on the right. As a matter of fact, it doesn't even gets in the converter for the second column. Thank you!!!

Answer 1

Bind image source like this.
<Image Grid.Column="1" Height="30">
<Image.Source>
<BitmapImage UriSource="{Binding Path=Image, Converter={StaticResource ImageToFlagConverter}}" />
</Image.Source>
</Image>

Answer 2

Check to see if your code has all the right elements -
llsRealTimeCurrencies1, llsRealTimeCurrencies2. Those are the lists that we use to bind the template to:
private async void Currencies_Tapped(object sender, System.Windows.Input.GestureEventArgs e)
{
mainViewModel.RealTimeViewModel.IsWatchListSettingsVisible = false;
ApplyForegroundFont(sender, realtimeTabs);
FrameworkElement parent = (FrameworkElement)((TextBlock)sender).Parent;
ApplyBackgroundColor(parent, realtimeTabsGrid);
if (!mainViewModel.RealTimeViewModel.CurrencyExchangeRates.Any())
{
if (mainViewModel.RealTimeViewModel.Realtime != null &&
mainViewModel.RealTimeViewModel.Realtime.Underlyings != null &&
mainViewModel.RealTimeViewModel.Realtime.Underlyings.Any())
{
mainViewModel.RealTimeViewModel.InitializeCurrencies();
}
else
{
mainViewModel.RealTimeViewModel.LoadProductsOrUnderlyingsFromDb<Currency>(mainViewModel.RealTimeViewModel.CurrencyExchangeRates);
}
}
if (!App.Settings.Contains(currenciesWereSaved))
{
App.Settings.Add(currenciesWereSaved, "");
App.Settings.Save();
await Task.Factory.StartNew(() =>
mainViewModel.RealTimeViewModel.SaveUnderlyingsAndProducts<Currency>(mainViewModel.RealTimeViewModel.CurrencyExchangeRates));
}
SetAndShowCorrectRealTimeList(new LongListSelector[] { llsRealTimeCurrencies1, llsRealTimeCurrencies2 }, mainViewModel.RealTimeViewModel.CurrencyExchangeRates);
GoogleAnalytics.EasyTracker.GetTracker().SendEvent("Real time", "click", "Currencies", 0);
MyBindableBase.LightstreamerClientInstance.Subscribe(mainViewModel.RealTimeViewModel.CurrencyExchangeRates.Cast<IRealtimeProperty>().ToList());
}