WPF/C#单击图像缩略图->显示该图像大[关闭]

Posted 2023-03-29

【中文标题】WPF/C#单击图像缩略图->显示该图像大[关闭]

【英文标题】：WPF/C# Click on image thumbnail -> show that image big [closed]

【发布时间】：2017-09-11 21:15:38

【问题描述】：

我有来自相机的图像（但现在假设它们在磁盘上）。 我想要这些作为缩略图列表：

[thumb1] [thumb2] [thumb3] ... [thumb100]

单击缩略图时，我希望将该图像放在 UI 上的大图像视图（同一窗口）上。有点像this question。

我是一个 C# 菜鸟，不能按照这个答案来完成这个工作:(

另外，情节转折：我还想在我的相机上设置一个“实时模式”，这意味着“大图像”UI 元素也必须能够直接从相机实时显示图像（“实时”期间没有缩略图模式”)。

这是我目前得到的代码。我还需要补充什么？

XML：

<StackPanel>
    <!--This is the big image that I want to see when I click each thumbnail: -->
    <Image Source="Binding BigImage"/>

    <!--This is the thumbnail chain at the bottom: -->
    <ListBox ItemsSource="Binding Thumbnails"  Height="100">

        <ListBox.ItemTemplate>
            <DataTemplate>
                <Image Source="Binding BigImage"/>
            </DataTemplate>
        </ListBox.ItemTemplate>

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

    </ListBox>

</StackPanel>

CS：

public partial class MainWindow : Window, INotifyPropertyChanged

    // this is the big image on the UI
    public ImageSource BigImage  get; set; 

    // this is a collection of thumbnails. When clicked, that image should become
    // the "big image"
    public ObservableCollection<ImageSource> Thumbnails  get; set; 

    public MainWindow()
    
        InitializeComponent();
        DataContext = this;

        Thumbnails = new ObservableCollection<ImageSource>();
        Thumbnails.Add(BigImage);
        Thumbnails.Add(new BitmapImage(new Uri(@"C:\Raw0.bmp")));
        Thumbnails.Add(new BitmapImage(new Uri(@"C:\Raw1.bmp")));
        Thumbnails.Add(new BitmapImage(new Uri(@"C:\Raw2.bmp")));
        NotifyPropertyChanged("Thumbnails");
    


    public event PropertyChangedEventHandler PropertyChanged;
    protected void NotifyPropertyChanged(string name)
    
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    

【参考方案1】：

BigImage 不是 ImageSource 的属性。 Image 控件的 Source 需要绑定到 datacontext 本身。使用一个点来做到这一点。

<Image Source="Binding ."/>

然后将ItemsControl的SelectedItem绑定到BigImage对象上。

<ListBox ItemsSource="Binding Thumbnails" SelectedItem="Binding BigImage" Height="100">