WPF ListBox数据绑定活动 [英] WPF ListBox Databinding & Events

问题描述

我的问题很简单。

我有一个ListBox，包含Thumnails（Image）

 < ListBox Name =ListBox_Thumbnails ItemsSource ={Binding}DataContext ={Binding Source = {StaticResource ThumbnailListSource}}Width =120Horizo​​ntalAlignment =LeftMargin = -  1,26,0,54> 
< ListBox.ItemTemplate> 
< DataTemplate> 
< StackPanel> 
< Image Source ={Binding Path = absolutePath}MouseLeftButtonDown =<！ - ？ - > /> 
< / StackPanel> 
< / DataTemplate> 
< /ListBox.ItemTemplate> 
  

我想显示一个图像，但作为一个新的StackOverFlow用户，我不能。您可以在这里找到图片：

http://www.freeimagehosting.net/uploads/61aa983cad.jpg

（对于那些不信任我的人，我在这里解释一下图像：
在左侧，有一个缩略图列表（垂直显示），右侧有一个更大的图像，默认情况下对应于第一个缩略图的大图像）。

当我点击一个缩略图（左侧）时，右侧的大图像应该被我点击的更新。

因为我是WPF的新手，我的方法可能完全是错误的ListBox。
请WPF Gurus向我展示光！

解决方案

我猜，你可以使用ListBox上的事件，smth像SelectionChanged ...但这完全不是真正的WPF-Jedi方式 - 记住，代码隐藏是黑暗的一面！ =）

认为数据绑定，就是力量。将您的大图像元素的源绑定到 ListBox 的 SelectedItem 属性。它应该看起来像

 < Image Source ={Binding SelectedItem.absolutePath，ElementName = ListBox_Thumbnails}> 
  

WPF-databinding-jedi应该附近有这个作弊表。

PPS实际上，当你使用ItemTemplate这可能不起作用，你将把StackPanel作为选定的项目...在这种情况下，你可以尝试 SelectedValuePath技巧，将其设置为absolutePath，并将大图像绑定到 SelectedValue 属性。 p>

所以你的ListBox开始标签变成：

 < ListBox Name = ListBox_ThumbnailsItemsSource ={Binding}DataContext ={Binding Source = {StaticResource ThumbnailListSource}}Width =120Horizo​​ntalAlignment =LeftMargin = -  1,26,0,54SelectedValuePath =absolutePath> ; 
  

您的大图标变为：

 < Image Source ={Binding SelectedValue，ElementName = ListBox_Thumbnails}> 
  

My problem is rather simple.
I have a ListBox, containing Thumnails (Image)

<ListBox Name="ListBox_Thumbnails" ItemsSource="{Binding}" DataContext="{Binding Source= {StaticResource ThumbnailListSource}}" Width="120" HorizontalAlignment="Left" Margin="-1,26,0,54">
<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel>
            <Image Source="{Binding Path=absolutePath}" MouseLeftButtonDown=<!--?????-->/>
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

I wanted to show an image, but as a new StackOverFlow user, I can't. You can find the image here:

http://www.freeimagehosting.net/uploads/61aa983cad.jpg

(For those who don't trust me, I explain here the content of the image: On the left, there is a list of thumbnails (displayed vertically) and on the right there is a bigger image, corresponding per default to a large image of the first thumbnail).

When I click on a thumbnail (on the left), the large image on the right should be updated by the one that I clicked on.

As I am new with WPF, my approach is perhaps totally wrong with the ListBox. Please, WPF Gurus, show me the light!

解决方案

I guess, you can use events on ListBox, smth like SelectionChanged... but that's totally not the TRUE WPF-Jedi way -- remember, code-behind is the dark side! =)

Think data binding, that's the Force. Bind your large Image element's source to the SelectedItem property of the ListBox. It should look like

<Image Source="{Binding SelectedItem.absolutePath, ElementName=ListBox_Thumbnails}">

P.S. Every WPF-databinding-jedi should have this cheat sheet nearby.

P.P.S. Actually, as you're using ItemTemplate this might not work, you'll have your StackPanel as the selected item... in this case you can try the SelectedValuePath trick, set it to "absolutePath" and bind the large image to the SelectedValue property.

So your ListBox opening tag becomes:

<ListBox Name="ListBox_Thumbnails" ItemsSource="{Binding}" DataContext="{Binding Source= {StaticResource ThumbnailListSource}}" Width="120" HorizontalAlignment="Left" Margin="-1,26,0,54" SelectedValuePath="absolutePath">

And your large image tag becomes:

<Image Source="{Binding SelectedValue, ElementName=ListBox_Thumbnails}">

这篇关于WPF ListBox数据绑定活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！