windows-phone-7 - WindowsPhone7のリストボックスアイテムをクリックして実行時に画像を表示する

Question

実行時に値を表示するリストボックスがあります。ただし、リストボックスからアイテムを選択した場合にのみ、リストボックスに画像を表示したいのですが、現在、実行時に値を表示するためにリストボックスでDataTemplateとItemTemplateを使用しています（短いデータバインディング）。ありがとうございます。

Answer 1

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は、SilverlightSDKのSystem.Windows.Interactivitydllを使用することに注意してください。また、ブール値をVisibility列挙値に変換するIValueConverterであるカスタムBooleanToVisibilityConverterを使用します。

さらに、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 WiththeModel-View-ViewModelデザインパターンの記事にあるものと似ています。主な違いは、CommandManagerがWindowsPhoneSDKで使用できないことです。

このモデルを使用すると、ビューモデルでToggleSelectedコマンドを使用して行をタップして選択し、もう一度タップして選択を解除して、画像を表示または非表示にすることができます。