在数据绑定项控件中时无法绑定到图像答案

【问题标题】：Can't bind to an image while it is in a data-bound itemscontrol在数据绑定项控件中时无法绑定到图像
【发布时间】：2020-07-22 18:25:23
【问题描述】：

我正在尝试显示地图的缩略图列表。我无法将图像源绑定到作为地图属性的缩略图。

<ItemsControl VerticalAlignment="Center" HorizontalAlignment="Center" ItemsSource="{Binding Maps}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel CanVerticallyScroll="True" Margin="5">
                        <Image Stretch="Uniform" StretchDirection="DownOnly" Height="150" Source="{Binding Thumbnail}"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

这是视图模型：（忽略临时文件路径）

  public BindableCollection<MapModel> Maps { get; set; }

        public MapListViewModel()
        {
            Maps = new BindableCollection<MapModel>();

            string projectPath = @"C:\Users\james\Documents\Projects\C#\Stratify";
            string path = projectPath + @"/Maps";

            string[] mapFiles = Directory.GetDirectories(path);

            foreach(string mapFile in mapFiles)
            {
                var mapModel = new MapModel
                {
                    Thumbnail = new BitmapImage(new Uri(mapFile + "/icon.jpg", UriKind.RelativeOrAbsolute))
                };
                Maps.Add(mapModel);
            }

        }

这是地图模型：

public class MapModel : ObservableObject
    {
        private ImageSource thumbnail;
        public ImageSource Thumbnail
        {
            get { return thumbnail; }
            set { OnPropertyChanged(ref thumbnail, value); }
        }
    }

【问题讨论】：

您有Source="{Binding Thumbnail}"，但属性名称是Thumnail。那是行不通的。调试应用程序时，您应该在 Visual Studio 的输出窗口中看到数据绑定错误。
此外，属性类型不得为Image。它应该是ImageSource 或者可能是BitmapSource。然后你会分配new MapModel { Thumbnail = bi }。
我也怀疑mapFile + @"/icon.jpg"是一个相对URI。
@Clemens 两者都做了，但问题是 xaml 没有选择 Thumbnail 作为它可以绑定的属性。通常情况下，智能感知器会接收到它，但什么也没有。
Thumnail（或 thumbnail）应该是 BitmapImage 而不是图像。图片是控件。

标签： c# wpf xaml mvvm data-binding

【解决方案1】：

属性名称错误。应该是Thumbnail，属性类型应该是ImageSource：

public class MapModel : ObservableObject
{
    private ImageSource thumbnail;
    public ImageSource Thumbnail
    {
        get { return thumbnail; }
        set { OnPropertyChanged(ref thumbnail, value); }
    }
}

您可以像这样分配 BitmapImage：

var path = Path.Combine(mapFile, "icon.jpg");
var uri = new Uri(path, UriKind.RelativeOrAbsolute);
var image = new BitmapImage(uri);
var mapModel = new MapModel { Thumbnail = image };

【讨论】：

我已经更改了名称并尝试更改您所说的内容，但存在同样的问题。 XAML 不会将缩略图作为属性。
“XAML 没有选择缩略图作为属性”——这是什么意思？运行应用程序时是否不显示图像？
当我在 xaml 中设置 datacontext 时，通常会在我键入“{Binding”时弹出缩略图。是的，当我运行应用程序时，图像没有显示
别担心，只是构建它并且它工作......我一定是在更改后没有构建它。感谢您的帮助！