在Windows Phone 7中单击列表框项目时在运行时显示图像答案

【问题标题】：Displaying image at runtime on click of list box item in windows phone 7在Windows Phone 7中单击列表框项目时在运行时显示图像
【发布时间】：2012-10-19 11:52:47
【问题描述】：

我有一个列表框，我在其中显示运行时的值。但我只想在从列表框中选择一个项目时在列表框中显示图像。目前我在列表框中使用 DataTemplate 和 ItemTemplate 在运行时显示值（简而言之数据绑定）。谢谢

【问题讨论】：

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

标签： windows-phone-7 listbox runtime

【解决方案1】：

一种解决方案是将依赖属性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>

请注意，此 xaml 使用 Silverlight SDK 中的 System.Windows.Interactivity dll。它还使用了一个自定义的 BooleanToVisibilityConverter，它是一个 IValueConverter，可以将布尔值转换为 Visibility 枚举值。

此外，我们可以像下面这样定义一个ItemViewModel，并在MainViewModel中拥有一个“Items”属性

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

由代码填充。

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 与WPF Apps With The Model-View-ViewModel Design Pattern 文章中的类似。主要区别在于 CommandManager 在 Windows Phone SDK 中不可用。

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

【讨论】：