How to free memory hold by images in data template in windows phone 8 App?

Question

I have a longlistselector for which I have a data template that defines the type of items to be added to the list. The data template has an Image control whose source is binded with path dynamically, thus each item in list has an associated Image Control. The problem I face is that these Image control never free the memory they occcupy resulting in out of memory exception. On normal scenario I set bitmapImage.UriSource=null to deallocate the memory associated with the bitmap But can't find a way to do so in this scenario. Here is the xaml code for the longlistselector and the data template associated with it..

Data Template

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="MediaItemTemplate">      
        <Canvas VerticalAlignment="Top">
            <Border BorderBrush="#FF4791CA" BorderThickness="3">
                <Image Height="100" Width="100" VerticalAlignment="Top" Grid.RowSpan="2" Stretch="UniformToFill">
                    <Image.Source> 
                          <BitmapImage UriSource="{Binding path}" CreateOptions="BackgroundCreation"  DecodePixelHeight="50" DecodePixelWidth="50"/>
                    </Image.Source>
                </Image>
             </Border>
             <Image Source="/Icons/check.png" Height="16" Width="16" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" Margin="80,7,7,0" Canvas.ZIndex="100" OpacityMask="Black" Visibility="{Binding visibility}" Name="checkImage" >    
             </Image>
          </Canvas> 
      </DataTemplate>
</phone:PhoneApplicationPage.Resources>

LonglistSelector

<phone:LongListSelector 
            Tap="ListMedia_Tap"
            x:Name="ListMedia"
            HorizontalAlignment="Left"
            Height="624" 
            VerticalAlignment="Top"
            Width="436"

Background="Transparent"

ItemTemplate="{StaticResource MediaItemTemplate}" LayoutMode="Grid" GridCellSize="120,120"/>

I am very new to windows phone programming, What basically I want to do is to develop kind of image browser experience. Please Help me out with ways to deallocate the memory. In case I am doing it completely wrong please correct me or suggest better ways to achieve the same functionality. Thanx in advance...

Kevin Gosse Kevin Gosse · Accepted Answer · 2013-07-10T14:18:31

A solution I've found to handle this case is making a custom control to automatically set the urisource to null:

public class SafePicture : System.Windows.Controls.ContentControl
{
    public SafePicture()
    {
        this.Unloaded += this.SafePictureUnloaded;
    }

    private void SafePictureUnloaded(object sender, System.Windows.RoutedEventArgs e)
    {
        var image = this.Content as System.Windows.Controls.Image;

        if (image != null)
        {
            image.Source = null;
        }
    }
}

Then, just wrap all your pictures in that control:

<my:SafePicture>
    <Image Source="{Binding Path=path}" />
</my:SafePicture>

How to free memory hold by images in data template in windows phone 8 App?

3 Answers