Question

I have List box in which I am displaying values at runtime. But i want to show an image in list box only when i selected an item from list box.Currently I am using DataTemplate and ItemTemplate in list box for displaying values at runtime (In short data binding).Thanks

Answer 1

One solution is to add a dependency property IsSelected to your item view model, and toggle that when you tap on an item. This would mean that you can select multiple items, i.e. show images from several rows at once.

using some xaml like this:

<phone:PhoneApplicationPage.Resources>
    <convert:BooleanToVisibilityConverter x:Key="booltovisibility" />
</phone:PhoneApplicationPage.Resources>
<phone:PhoneApplicationPage.DataContext>
    <vm:MainViewModel/>
</phone:PhoneApplicationPage.DataContext>

<Border Grid.Row="1" BorderThickness="1" BorderBrush="Red">
    <ListBox ItemsSource="{Binding Items}">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" BorderBrush="Green">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Tap">
                                <i:InvokeCommandAction Command="{Binding ToggleSelected}"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <TextBlock Grid.Row="0" Text="{Binding Text}"/>
                        <Image Grid.Row="1" Source="{Binding Image}" Visibility="{Binding IsSelected, Converter={StaticResource booltovisibility}}"/>
                    </Grid>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Border>

Note that this xaml uses the System.Windows.Interactivity dll from the Silverlight SDK. It also uses a custom BooleanToVisibilityConverter, which is a IValueConverter that converts a boolean to a Visibility enum value.

Further more, we can define an ItemViewModel like the one below, and have an “Items” property in the MainViewModel

private readonly ObservableCollection<ItemViewModel> items;
public ObservableCollection<ItemViewModel> Items { get { return items; } }

which is populated from code.

using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Test.Commands;

namespace Test.ViewModels {
    public class ItemViewModel : DependencyObject {
        private ICommand toggleCommand;

        public ItemViewModel(string title) {
            Text = title;
            Image = new BitmapImage(new Uri("graphics/someimage.png", UriKind.Relative));
        }

        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(ItemViewModel), new PropertyMetadata(default(string)));

        public static readonly DependencyProperty IsSelectedProperty =
            DependencyProperty.Register("IsSelected", typeof(bool), typeof(ItemViewModel), new PropertyMetadata(default(bool)));

        public static readonly DependencyProperty ImageProperty =
            DependencyProperty.Register("Image", typeof(ImageSource), typeof(ItemViewModel), new PropertyMetadata(default(ImageSource)));

        public string Text {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public bool IsSelected {
            get { return (bool)GetValue(IsSelectedProperty); }
            set { SetValue(IsSelectedProperty, value); }
        }

        public ImageSource Image {
            get { return (ImageSource)GetValue(ImageProperty); }
            set { SetValue(ImageProperty, value); }
        }

        public ICommand ToggleSelected {
            get { return toggleCommand ?? (toggleCommand = new RelayCommand(o => IsSelected = !IsSelected)); }
        }
    }
}

where RelayCommand is similar to the one found at WPF Apps With The Model-View-ViewModel Design Pattern article. The main difference is that CommandManager is not available in the Windows Phone SDK.

By using this model you can tap on rows to select them, using the ToggleSelected command in the view model, and deselect them by tapping them again, in effect showing or hiding the image.