Windows phone 7 在windows phone 7中单击列表框项目时在运行时显示图像

我有一个在运行时显示值的列表框。但我只想在从列表框中选择项目时在列表框中显示图像。目前，我正在使用DataTemplate和ItemTemplate in list box在运行时显示值（简写为数据绑定）。感谢

一个解决方案是向项目视图模型添加依赖属性

IsSelected

，并在点击某个项目时切换该选项。这意味着您可以选择多个项目，即一次显示多行中的图像

使用如下一些xaml：

<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>

它是由代码填充的

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)); }
        }
    }
}

其中RelayCommand与第条中的类似。主要区别在于CommandManager在Windows Phone SDK中不可用

---

通过使用此模型，您可以在视图模型中使用ToggleSelected命令点击行来选择行，然后再次点击行来取消选择行，实际上是显示或隐藏图像。

到目前为止，您在xaml和代码方面有什么经验？而且，可以同时选择多行吗？

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)); }
        }
    }
}