uwp 图像绑定不适用于 x:Bind

Question

我正在尝试将 XAML 页面上椭圆内的 imageSource 绑定到 ViewModel 中的 ImageSource 属性，因为我在项目中使用 MVVM 方法。我可以通过断点确认 c# 中的属性获取图像并填充，但由于某种奇怪的原因，它没有显示在 XAML 中，当我在混合中使用 livepropertyExplorer 分析源属性时，ImageSource 中的源显示“0 ”。这是我的代码。

XAML

<Ellipse x:Name="ProfileImage" Style="{StaticResource ProfilePicStyle}">
    <Ellipse.Fill>
        <ImageBrush ImageSource="{x:Bind ViewModel.Banner, Mode=OneWay}" 
                    Stretch="UniformToFill"/>
    </Ellipse.Fill>
</Ellipse>

视图模型

public AllVideosViewModel() : base()
    {
        //var bit = new BitmapImage();
        //bit.UriSource = (new Uri("ms-appx:///Assets/Storelogo.png"));
        //Banner = bit;
        //Above 3 lines were test code and it works perfect and binding works in this case, but I want the binding as coded in the Initialize method below, because I want that image to bind with the thumbnails of the collection.
        Initialize();
    }
private async void Initialize()
    {
        var VideoFiles = (await KnownFolders.VideosLibrary.GetFilesAsync(CommonFileQuery.OrderByName)) as IEnumerable<StorageFile>;

        foreach (var file in VideoFiles)
        {
            <...some code to fill grid view on the same XAML page which works perfect...>
            Banner = await FileHelper.GetDisplay(file);//this method returns Image just fine because I am using the same method to display thumbnails on the same XAML page which work fine.
        }

    }

提前致谢。

更新示例项目

sample project to test on github

Answer 1

我在你的代码中注意到了一些事情。

1. 您的MainViewModel 需要实现INotifyPropertyChanged 并且您的Banner 属性需要引发属性更改事件。这就是您在 UI 上看不到任何图像的原因。
2. 您应该使用 await bit.SetSourceAsync() 而不是 bit.SetSourceAsync()，因为它不会阻塞 UI 线程。

3. 由于您没有使用Image 控件而是直接使用ImageBrush，因此您应该将解码大小设置为您需要的大小，这样就不会在那里浪费内存。请注意Image 控件会自动为您执行此操作。

       bit = new BitmapImage
       {
           DecodePixelWidth = 48,
           DecodePixelHeight = 48
       };
   

希望这会有所帮助！