Images inside a Pivot get downloaded and decoded more than once? - windows-phone-7

Question

I set my Pivot's ItemsSource property to a list of 3 URL strings.
Odd things that happen:
With the template below, the ImageOpened event gets called 6 times instead of 3.
If I set the BitmapImage's CreateOptions to 'BackgroundCreation', the ImageOpened event can be called hundreds of times for no apparent reason
If I place the Pivot inside a UserControl and use the 'BackgroundCreation' option for the BitmapImage, then the Images don't render at all inside the Pivot, despite the ImageOpened event getting called (hundreds of times).
The same behaviour happens on WP7 and WP8. I am quite surprised as I was just creating an ImageGallery UserControl that is using a Pivot underneath and I wanted to make use of BackgroundCreation option to offload decoding work to the background thread but with such symptoms it seems quite pointless :(.
1) Pivot
<phone:PhoneApplicationPage
x:Class="WP7.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<Button Tap="UIElement_OnTap">press</Button>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<controls:Pivot x:Name="gallery">
<controls:Pivot.ItemTemplate>
<DataTemplate>
<Image>
<Image.Source>
<BitmapImage ImageOpened="BitmapImage_OnImageOpened" ImageFailed="BitmapImage_OnImageFailed" UriSource="{Binding}" CreateOptions="DelayCreation"></BitmapImage>
</Image.Source>
</Image>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
</Grid>
</Grid>
2) Codebehind
public partial class MainPage : PhoneApplicationPage
{
int c = 0;
List<string> list = new List<string>()
{
"http://d24w6bsrhbeh9d.cloudfront.net/photo/6298284_460s.jpg", "http://d24w6bsrhbeh9d.cloudfront.net/photo/6291760_460s.jpg", "http://d24w6bsrhbeh9d.cloudfront.net/photo/6298282_460s.jpg",
};
// Constructor
public MainPage()
{
InitializeComponent();
}
private void UIElement_OnTap(object sender, GestureEventArgs e)
{
c = 0;
gallery.ItemsSource = list;
}
private void BitmapImage_OnImageOpened(object sender, RoutedEventArgs e)
{
c++;
Debug.WriteLine("opened - {0}", c);
}
private void BitmapImage_OnImageFailed(object sender, ExceptionRoutedEventArgs e)
{
Debug.WriteLine("failed");
}
}

Answer 1

To give you a better idea of what is happening, you can check this snippet:
private void BitmapImage_OnImageOpened(object sender, RoutedEventArgs e)
{
BitmapImage image = (BitmapImage)sender;
Debug.WriteLine("opened - {0}", image.UriSource.ToString());
}
At the very beginning, when you press the button, you will notice what it seems like the first image from your list is loaded twice:
Even if you remove the DelayCreation flag, you will still get the same result because this flag is set by default.
Now, what happens if we inspect this with WireShark, the phone connected to an ad-hoc network:
(NOTE: I am using a different image URL here)
The image is only downloaded once, so per-se you do not need to worry about extra data. The reason why you see it triggered twice seems to be the fact that it is once triggered for the source, and another one for the Image.
Technically, the same if you would do this:
List<BitmapImage> list = new List<BitmapImage>();
// Constructor
public MainPage()
{
InitializeComponent();
BitmapImage image = new BitmapImage();
image.UriSource = new Uri("http://timenerdworld.files.wordpress.com/2012/08/new-microsoft-logo.jpg");
image.ImageOpened += image_ImageOpened;
list.Add(image);
}
void image_ImageOpened(object sender, RoutedEventArgs e)
{
Debug.WriteLine("opened image from bitmap");
}
private void UIElement_OnTap(object sender, GestureEventArgs e)
{
gallery.ItemsSource = list;
}
private void BitmapImage_OnImageOpened(object sender, RoutedEventArgs e)
{
Image image = (Image)sender;
Debug.WriteLine("opened - {0}", ((BitmapImage)image.Source).UriSource.ToString());
}
So no, the image is not downloaded twice.