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

Question

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

Answer 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 设计模式文章中的类似。主要区别在于 CommandManager 在 Windows Phone SDK 中不可用。

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