将选择的列表框图像绑定到MainWindow中的其他位置

时间:2018-12-13 09:09:59

标签: c# wpf data-binding

我在这里没有看到类似问题的答案,但是它们对我的情况都没有帮助。 我有带图像的ListBox,绑定到ObservableCollection的方法如下:

<ListBox x:Name="gallery" ItemsSource="{Binding Path=Gallery}" Grid.Row="2" Grid.Column="0" Margin="5" SelectionChanged="ImageSelectionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate DataType="{x:Type model:ImageData}">
            <Label Padding="4" Height="90">
                <Image ToolTip="{Binding ImageGuid}" 
                       SnapsToDevicePixels="True">
                    <Image.Source>
                        <BitmapImage UriSource="{Binding ImageUrl}"  
                                     DecodePixelHeight="90"  
                                     CacheOption="OnLoad" 
                                     CreateOptions="DelayCreation">
                        </BitmapImage>
                    </Image.Source>
                </Image>
            </Label>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

我正在尝试将选定的图像绑定到Window的不同部分中的Grid,但是我采用的方法无效。

SelectionChanged事件正在尝试将选定的项作为ImageData从列表框选择中提取出来:

    private void ImageSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var obj = (sender as ListBox).SelectedItem as ImageData;
        bigImage.DataContext = obj;
    }

以及用于显示全局图片的XAML代码:

    <Grid x:Name="bigImage"  Grid.Row="2" Grid.Column="1">
        <Label Padding="4" Height="90">
            <Image ToolTip="{Binding ImageGuid}" 
                   SnapsToDevicePixels="True">
                <Image.Source>
                    <BitmapImage UriSource="{Binding ImageUrl}">
                    </BitmapImage>
                </Image.Source>
            </Image>
        </Label>
    </Grid>

这给我关于未设置UriSource的例外情况。

有人可以告诉我我做错了什么,并指出正确的方向吗?

基于Peregrine和Clemens答案的解决方案:

源列表框:

<ListBox x:Name="gallery" ItemsSource="{Binding Path=Gallery}" Grid.Row="2" Grid.Column="0" Margin="5">
    <ListBox.ItemTemplate>
        <DataTemplate DataType="{x:Type model:ImageData}">
            <Label Padding="4" Height="90">
                <Image ToolTip="{Binding ImageGuid}" 
                       SnapsToDevicePixels="True"
                       Source="{Binding ImageUrl}" />
            </Label>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

目标网格:

<Grid x:Name="bigImage" DataContext="{Binding ElementName=gallery, Path=SelectedItem}" Grid.Row="2" Grid.Column="1">
    <Label Padding="4" Height="90">
        <Image ToolTip="{Binding ImageGuid}" 
               SnapsToDevicePixels="True"
               Source="{Binding ImageUrl}" />
    </Label>
</Grid>

1 个答案:

答案 0 :(得分:1)

尝试使用诸如WPF Snoop之类的工具来检查bigImage.DataContext是否确实按预期设置。

您还可以通过直接数据绑定而不是在后面的代码中使用事件来设置网格的DataContext。

<Grid x:Name="bigImage" DataContect="{Binding ElementName=gallery, Path=SelectedItem}" ...   

由于SelectedItem属性可能是null,因此您还应该直接绑定Image的Source属性,以避免BitmapImage可能为产生空值的UriSource绑定抛出任何异常:

<Image ToolTip="{Binding ImageGuid}" SnapsToDevicePixels="True"
       Source="{Binding ImageUrl}"/>