Show tick image when item is selected in WPF Listbox

Question

I have this simple ListBox which displays a list of images horizontal en vertical. I have also added a tick image on every image. Now I would like to enable this tick image only when the item is selected in the Listbox.

How can I achieve this?

ListBox XAML:

    <ListBox x:Name="PhotoCollection"
         Grid.Row="2"
         Grid.ColumnSpan="4"
         ItemsSource="{Binding PhotoCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
         ScrollViewer.HorizontalScrollBarVisibility="Disabled"
         SelectionMode="Multiple">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Vertical">
        <Border BorderBrush="White"
                BorderThickness="2"
                Margin="5"
                Background="LightGray">
          <Grid>
          <Image Source="{Binding}"
                 Stretch="Uniform"
                 Width="50"
                 Height="50"
                 Margin="5" />
            <Image Source="{StaticResource Check_24}"
                   Visibility="{Binding Converter={StaticResource VisibleConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}, AncestorLevel=1},Path=IsSelected}"
                   Stretch="Uniform"
                   Width="20"
                   Height="20"
                   Margin="5" 
                   HorizontalAlignment="Right"
                   VerticalAlignment="Bottom"/>
          </Grid>
        </Border>
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel IsItemsHost="True"
                 Orientation="Horizontal" />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>

EDIT: This line does the trick

Visibility="{Binding Converter={StaticResource VisibleConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}, AncestorLevel=1},Path=IsSelected}"

Tickmark on all images but should only be active on the selected images.

@ Joulukuusi. I understand that I need to bind the thick image's visibility to the IsSelected state of the Listbox item, but I can't see how to do it in my XAML. — PitAttack76

Josh Josh · Accepted Answer · 2013-03-20T14:54:19

When I need to bind visibility of items to boolean values, I've been using a converter class:

public class BoolToVisibleOrHidden : IValueConverter {
        public BoolToVisibleOrHidden() { }
        public bool Collapse { get; set; }
        public bool Reverse { get; set; }
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
            bool bValue = (bool)value;
            if (bValue != Reverse) {
                return Visibility.Visible;
            } else {
                if (Collapse)
                    return Visibility.Collapsed;
                else
                    return Visibility.Hidden;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
            Visibility visibility = (Visibility)value;
            if (visibility == Visibility.Visible)
                return !Reverse;
            else
                return Reverse;
        }
    }

After grabbing an instance of it in XAML like so :

<local:BoolToVisibleOrHidden x:Key="BoolToVisConverter" Collapse="True" />

I can bind visibility of items like this:

Visibility="{Binding Converter={StaticResource BoolToVisConverter}, Path=DataContext.PATHTOBOOLEAN}"

Show tick image when item is selected in WPF Listbox

2 Answers