Question

I have a problem with control visibility in listbox itemtemplate. Following is my code to bind data to Visibility property of imagetools:AnimatedImage and Textblock in xaml:

<ListBox x:Name="listSellers" ItemsSource="{Binding TagList}" SelectionChanged="listSellers_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid Margin="0,12,0,12" Height="132">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="Auto" MinWidth="107"/>
                                                    <ColumnDefinition/>
                                                </Grid.ColumnDefinitions>
                                                <Border Grid.Column="0" Margin="0,0,-2,8">
                                                    <Grid>
                                                        <imagetools:AnimatedImage Source="{Binding Seller.Logo, Converter={StaticResource ImageConverter}}" Stretch="Uniform" Width="240" Template="{StaticResource AnimatedImageControlTemplate1}" Visibility="{Binding LogoVisibility}"/>
                                                        <TextBlock x:Name="sellerNameTxtBlock" TextWrapping="Wrap" Text="{Binding Seller.Name}" FontSize="24" FontFamily="Segoe WP" Margin="10,0,0,0" Foreground="#FF354F59" Height="41" Visibility="{Binding Path=SellerNameVisibility}"/>
                                                    </Grid>
                                                </Border>
                                                <StackPanel Grid.Column="1" Orientation="Vertical">
                                                    <!--<TextBlock TextWrapping="Wrap" Text="{Binding Seller.Name}" FontSize="24" FontFamily="Segoe WP" Margin="10,0,0,0" Foreground="#FF354F59" Height="41"/>-->
                                                    <!--<TextBlock TextWrapping="Wrap" Text="amazon.com" FontSize="16" FontFamily="Segoe WP" Margin="10,0,0,0" Foreground="#FF157CCC" Height="35"/>-->
                                                    <TextBlock TextWrapping="Wrap" Text="{Binding TotalPrice}" FontSize="21.333" FontFamily="Segoe WP Semibold" Margin="10,0,0,0" Foreground="#cc4225"/>
                                                    <TextBlock FontSize="{StaticResource PhoneFontSizeSmall}" Text="{Binding Price}" Margin="10,0,0,0" Foreground="#FF354F59"/>
                                                    <TextBlock FontSize="{StaticResource PhoneFontSizeSmall}" Text="{Binding Tax}" Margin="10,0,0,0" Foreground="#FF354F59"/>
                                                    <TextBlock FontSize="{StaticResource PhoneFontSizeSmall}" Text="{Binding Shipping}" Margin="10,0,0,0" Foreground="#FF354F59"/>
                                                </StackPanel>
                                            </Grid>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
</ListBox>

Following is the declaration of the property in view model:

public Visibility LogoVisibility
        {
            get { return (Visibility)GetValue(LogoVisibilityProperty); }
            set { SetValue(LogoVisibilityProperty, value); }
        }

        // Using a DependencyProperty as the backing store for LogoVisibility.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty LogoVisibilityProperty =
            DependencyProperty.Register("LogoVisibility", typeof(Visibility), typeof(ProductDetailViewModel), new PropertyMetadata(Visibility.Collapsed));

        public Visibility  SellerNameVisibility
        {
            get { return (Visibility )GetValue(SellerNameVisibilityProperty); }
            set { SetValue(SellerNameVisibilityProperty, value); }
        }

        // Using a DependencyProperty as the backing store for SellerNameVisibility.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty SellerNameVisibilityProperty =
            DependencyProperty.Register("SellerNameVisibility", typeof(Visibility), typeof(ProductDetailViewModel), new PropertyMetadata(Visibility.Collapsed));

Following is where I set Visibility in view model:

foreach (Tag tag in tagArray)
                {
                    if (tag.Seller.Logo.Equals(""))
                    {
                        tag.Seller.Logo = "Images/NoImageFound.png";
                        LogoVisibility = Visibility.Collapsed;
                        SellerNameVisibility = Visibility.Visible;
                    }
                    else
                    {
                        LogoVisibility = Visibility.Visible;
                        SellerNameVisibility = Visibility.Collapsed;
                    }
                    tag.Price = "Base: " + tag.Price;
                    if (tag.Tax == null)
                    {
                        tag.Tax = "Tax: N/A";
                    }
                    else
                    {
                        tag.Tax = "Tax: " + tag.Tax;
                    }
                    if (tag.Shipping == null)
                    {
                        tag.Shipping = "Ship: N/A";
                    }
                    else
                    {
                        tag.Shipping = "Ship: " + tag.Shipping;
                    }
                    tempTagList.Add(tag);
                }
                TagList = tempTagList;
            }

And here’s where I set the datacontext in code behind:

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            _productDetailViewModel = new ProductDetailViewModel();
            DataContext = _productDetailViewModel;
            string productTitleId = "";
            if (NavigationContext.QueryString.TryGetValue("productTitleId", out productTitleId))
            {
                _productTitleId = productTitleId;
                _productDetailViewModel.getProductDetailFromServer(_productTitleId, "");
            }
        }

I also do some other data bindings in these files, all of them work. Only this Visibility binding fails. Really don’t know why. =( Any ideas? Thanks!!!

Answer 1

Looks like your ListBox ItemsSource is bound to a collection of “Tag” objects. This means that each ListBoxItem would be bound to a “Tag” object. So, the DataTemplate you are creating has a DataContext equal to one Tag object. I do not see that LogoVisibility is on the Tag object. It looks like it is on the object that holds a reference to the tag list. Going this route, you would want the LogoVisibility and NameVisibility on the Tag object itself.

What I would suggest is to not put that logic into your model object (Tag) and instead have a ValueConverter to handle this logic.

    public class EmptyToVisibilityConverter : IValueConverter
{
    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value == null) return Visibility.Collapsed;

        string val = value.ToString();

        return string.IsNullOrWhiteSpace(val) ? Visibility.Collapsed : Visibility.Visible;
    }

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

    #endregion
}

Then change your Visibility bindings to:

    <Grid DataContext="{Binding Seller}">
        <imagetools:AnimatedImage Source="{Binding Logo, Converter={StaticResource ImageConverter}}" 
                              Stretch="Uniform" Width="240" 
                              Template="{StaticResource AnimatedImageControlTemplate1}" 
                              Visibility="{Binding Logo, Converter={StaticResource EmptyToVis}}"/>
        <TextBlock x:Name="sellerNameTxtBlock" TextWrapping="Wrap" Text="{Binding Name}" FontSize="24" 
               FontFamily="Segoe WP" Margin="10,0,0,0" Foreground="#FF354F59" Height="41" 
               Visibility="{Binding Name, Converter={StaticResource EmptyToVis}}"/>
    </Grid>