Windows Phone 7 Wrappanel visibility

Question

I have a list that displays a bunch of images in gridview style, the following is my code:

<controls:PanoramaItem x:Name="Pano_Photos" Header="photos">
        <ListBox x:Name="lstMemoriesPhoto" ItemsSource="{Binding MemoryList}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged" x:Name="ListPhotoSelectionChangedEventTrigger">
                    <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding NavigateToDetailPage}" PassEventArgsToCommand="True"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel ItemWidth="130" ItemHeight="130" Visibility="{Binding MemoryPhoto,Converter={StaticResource PhotoConverter}}"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding MemoryPhoto,Converter={StaticResource ByteImageConverter}}" Margin="5"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>        
    </controls:PanoramaItem>

The PhotoConverter checks MemoryPhoto variable and returns Visibility.Visible or Collapse depending on whether the MemoryPhoto variable is null or not. Here is the code for PhotoConverter:

  public class PhotoConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        try
        {
            if ((value is byte[]) && (value != null))
            {
                return Visibility.Visible;
            }
            return Visibility.Collapsed;
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

But When I run my app, I've got this result,. The second grid should be invisible because it contains null image variable.

Does anyone know how to disable individual item in wrappanel? Thanks a lot

Edit I think I found the solution for my issue, define width and height in image control rather than in wrappanel, the code is

<ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding MemoryPhoto,Converter={StaticResource ByteImageConverter}}" Margin="5" Visibility="{Binding MemoryPhoto,Converter={StaticResource PhotoConverter}}" width="130" height="130"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>

Answer 1

First please fix your converter:

public class PhotoConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        try
        {
            if ((value is byte[]) && (value != null))
                return Visibility.Visible;
            else
                return Visibility.Collapsed;
        }

        catch (Exception ex)
        {
            throw ex;
            return Visibility.Collapsed;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Then fix your XAML

<controls:PanoramaItem x:Name="Pano_Photos" Header="photos">
    <ListBox x:Name="lstMemoriesPhoto" ItemsSource="{Binding MemoryList}">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="SelectionChanged" x:Name="ListPhotoSelectionChangedEventTrigger">
                <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding NavigateToDetailPage}" PassEventArgsToCommand="True"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel ItemWidth="130" ItemHeight="130"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding MemoryPhoto,Converter={StaticResource ByteImageConverter}}" Visibility="{Binding MemoryPhoto, Converter={StaticResource PhotoConverter}}" Margin="5"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>        
</controls:PanoramaItem>