Question

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

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

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

我是C＃noob并且不能按照这个答案来实现这个目标：（

另外，情节扭曲：我也希望有一个＆＃34;现场模式＆＃34;在我的相机上，这意味着＆＃34;大图像＆＃34; UI元素还必须能够实时直接从相机显示图像（在＆＃34期间没有缩略图;实时模式＆＃34;）。

这是我到目前为止的代码。我还需要添加什么？

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));
    }

}

Answer 1

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

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

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

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

WPF / C＃点击图片缩略图 - ＆gt;显示图片大

1 个答案: