將選擇的列表框圖像綁定到MainWindow中的其他位置

Question

我在這里沒有看到類似問題的答案，但對我的情況沒有一個幫助。 我有帶圖像的列表框，綁定到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從ListBox選擇中提取出來：

    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>

Answer 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}"/>