c# - 如何复制整个网格并将其复制到 WPF 中的其他列表框

Question

我的窗口中有两个ListBoxes。我将左侧放置Listbox在多个小图像上，这些图像在每个网格中动态填充ImageList。Listbox当我从左侧单击图像时，我在右侧放置了空白以显示一张展开的图像。

我已经列出了图像并在 中放置了点击事件Grid，但我不知道下一步该做什么。

这就是我想要做的。

这是我的代码。

xml.cs

<ListBox Name="ImageList" ItemsSource="{Binding ImageList}" Grid.Column="0"  Height="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
   <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
         <WrapPanel Width="{Binding ElementName=ImageList, Path=ActualWidth}"/>
      </ItemsPanelTemplate>
   </ListBox.ItemsPanel>
   <ListBox.ItemTemplate>
      <DataTemplate>
         <Border>
            <StackPanel Orientation="Horizontal">
               <!--image and dimensions-->
               <Grid Width="300" Height="360" Background="Transparent" MouseDown="Grid_Click">

                  <StackPanel>
                     <TextBlock ></TextBlock>
                     <Image Source="{Binding Path}"/>
                     <TextBlock >
                        <TextBlock.Text>
                           <MultiBinding >
                              <Binding Path=/>
                           </MultiBinding>
                        </TextBlock.Text>
                     </TextBlock>
                     <TextBlock >
                        <TextBlock.Text>
                           <MultiBinding StringFormat="">
                              <Binding Path=/>
                           </MultiBinding>
                        </TextBlock.Text>
                     </TextBlock>
                  </StackPanel>

               </Grid>
            </StackPanel>
         </Border>
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>
<ListBox Grid.Column="1"></ListBox>

代码背后

private void Grid_Click(object sender, MouseButtonEventArgs e)
{
   // What should I do here?
}

标签： c#.netwpfmvvmlistbox

Answer 1

要以 WPF 方式执行此操作，您不必使用单击事件。

在 ListView 中尝试 SelectedItems。

Xaml 代码

<Window x:Class="sof3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:sof3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <ListView Grid.Column="0" ItemsSource="{Binding ImagePathList}" SelectedItem="{Binding SelectedImagePath, Mode=TwoWay}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="{Binding ImagePath}"/>
                        <Image Source="{Binding ImagePath}" Stretch="Fill" Width="200" Height="200"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Image Grid.Column="1" Source="{Binding SelectedImagePath.ImagePath}" Stretch="Fill" Width="200" Height="200"/>
    </Grid>
</Window>

主视图模型代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Collections.ObjectModel;
using System.ComponentModel;

namespace sof3
{
    class MainViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<Image> ImagePathList
        {
            get
            {
                if (_imagePathList == null) _imagePathList = new ObservableCollection<Image>();
                return _imagePathList;
            }
            set
            {
                _imagePathList = value;                
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ImagePathList)));
            }
        }
        private ObservableCollection<Image> _imagePathList;

        public Image SelectedImagePath
        {
            get
            {
                return _selectImagePath;
            }
            set
            {
                _selectImagePath = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedImagePath)));
            }
        }
        public Image _selectImagePath;

        public event PropertyChangedEventHandler PropertyChanged;
    }

    public class Image : INotifyPropertyChanged
    {
        public string ImagePath { 
            get
            {
                return _imagePath;
            } 
            set
            {
                _imagePath = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ImagePath)));
            }
        }
        private string _imagePath;

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

主要代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace sof3
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        private MainViewModel _instance;
        public MainWindow()
        {
            InitializeComponent();
            _instance = new MainViewModel();
            this.DataContext = _instance;
            _instance.ImagePathList.Add(new Image() { ImagePath = @"C:\Users\dskim\source\repos\sof3\sof3\bin\Debug\1.bmp" });
            _instance.ImagePathList.Add(new Image() { ImagePath = @"C:\Users\dskim\source\repos\sof3\sof3\bin\Debug\2.bmp" });
            _instance.ImagePathList.Add(new Image() { ImagePath = @"C:\Users\dskim\source\repos\sof3\sof3\bin\Debug\3.bmp" });
            _instance.ImagePathList.Add(new Image() { ImagePath = @"C:\Users\dskim\source\repos\sof3\sof3\bin\Debug\4.bmp" });
        }        
    }
}

//Change Image Path