动态将图像添加到ListView

Question

在我的程序中，我有一个listview ，可以在其中添加文件夹中的图像。

所选图像应在程序中大显示。

现在，我只能显示刚从文件夹中打开的图像。

我的问题是，如何将图像添加到listview并显示所选图像？

我知道我需要一个用于所选Image的变量，以及一个我在listview图像可观察的集合。

我的Xaml

<Grid x:Name="GridLoadedImage" HorizontalAlignment="Left" VerticalAlignment="Top">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown">
            <i:InvokeCommandAction Command ="{Binding MouseLeftButtonDownCommnad}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeftButtonUp">
            <i:InvokeCommandAction Command="{Binding MouseLeftButtonUpCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseMove">
            <i:InvokeCommandAction Command="{Binding MouseMoveCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Grid.LayoutTransform>
        <ScaleTransform ScaleX="{Binding ElementName=slider1, Path=Value}" ScaleY="{Binding ElementName=slider1, Path=Value}"/>
    </Grid.LayoutTransform>
    <Image x:Name="_image" Margin="10" Source="{Binding CurrentImage.ImagePath, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
<Grid>
    <ListView Margin="10" ItemsSource="{Binding Image, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
        <ListViewItem>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" MaxHeight="40"/>
            </StackPanel>
        </ListViewItem>
    </ListView>
</Grid>

我的ViewModel

public MainViewModel()
{
    SaveCommand = new ViewModelBase(this.saveFile);
    CropCommand = new ViewModelBase(this.Croping);
    ResizeCommand = new ViewModelBase(this.Resize);
    Image = new ObservableCollection<ImageModel>();
}

打开

 ICommand _openCommand;
    public ICommand OpenCommand
    {
        get
        {
            if (_openCommand == null)
            {
                _openCommand = new ViewModelBase(param => Open());
            }
            return _openCommand;
        }
    }
    private void Open()
    {

        Microsoft.Win32.OpenFileDialog open = new Microsoft.Win32.OpenFileDialog();
        open.DefaultExt = (".png");
        open.Filter = "JPG (*.jpg)|*.jpg|PNG (*.png)|*.png|All files (*.*)|*.*";
        BitmapImage myBitmapImage = new BitmapImage();

        if (open.ShowDialog() == true)
        myBitmapImage.BeginInit();
        myBitmapImage.UriSource = new Uri(open.FileName);
        myBitmapImage.EndInit();
        this.currentImage.ImagePath = myBitmapImage;           
    }

图片模型

 BitmapSource imagePath;
    public BitmapSource ImagePath
    {
        get { return imagePath; }
        set
        {
            imagePath = value;
            OnPropertyChanged("ImagePath");
        }
    }

也许我的方法是错误的？ 由于我是MVVM和WPF的新手，因此我们欢迎您提供建议

Answer 1

您的ImageModel应该具有字符串，Uri或ImageSource类型的Image属性，例如

public class ImageModel
{
    public ImageSource Image { get; set; }
}

MainViewModel中的collection属性最好命名为Images而不是Image ，并且应该有一个CurrentImage属性：

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<ImageModel> Images { get; }
        = new ObservableCollection<ImageModel>();

    private ImageModel currentImage;
    public ImageModel CurrentImage
    {
        get { return currentImage; }
        set
        {
            currentImage = value;
            PropertyChanged?.Invoke(this,
                new PropertyChangedEventArgs(nameof(CurrentImage)));
        }
    }

    ...
}

现在，您绑定一个ListView或ListBox的ItemsSource和SelectedItem ，并这样声明其ItemTemplate （其中，StackPanel可能是多余的）：

<ListBox ItemsSource="{Binding Images}" SelectedItem="{Binding CurrentImage}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" MaxHeight="40" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

所选图像现在可以显示在另一个Image元素中，如下所示：

<Image Source="{Binding CurrentImage.Image}"/>

打开图像文件时，还应将其添加到Images集合中，如下所示：

if ((bool)open.ShowDialog())
{
    var item = new ImageModel
    {
        Image = new BitmapImage(new Uri(open.FileName))
    };

    Images.Add(item);
    CurrentImage = item;
}