C# 无法在内容对话框UWP中绑定ImageSource

我将图像放在内容对话框中，但我看不到从源中获取的任何图像。似乎图像源无法从视图模型绑定。不过，它与Page配合得很好

这是我的XAML内容对话框

<ContentDialog
x:Class="SmartEducation.App.Teacher.ContentViewer.Views.SketchDetailPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SmartEducation.App.Teacher.ContentViewer.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:uwpControls="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d"
Title="Student's Sketch"
CloseButtonText="Cancel"
DefaultButton="Primary"
Background="White" Width="750" Height="500">
    <RelativePanel>
            <ScrollViewer  x:Name="scrollView" ZoomMode="Enabled" DoubleTapped="ScrollViewer_DoubleTapped" HorizontalScrollBarVisibility="Visible" HorizontalScrollMode="Enabled" MinZoomFactor="1">
            <StackPanel Background="White" Width="750" Height="500">
                <Image Name="imgSketch" Source="{Binding ImageUri}"/>
            </StackPanel>
            </ScrollViewer>
    </RelativePanel>

我将ImageUri放在我的ViewModel中

private string _imgContent;
    public string ImageUri
    {
        get { return _imgContent; }
        set
        {
            _imgContent = value;
            OnPropertyChanged(nameof(ImageUri));
        }
    }

---

首先，请确保ImageUri具有图像资源引用。在xaml.cs代码中，仅通过以下代码提供

ViewModel

属性无法设置对话框的数据上下文，因此无法获取图像源

private SketchDetailPageViewModel ViewModel
{
    get { return DataContext as SketchDetailPageViewModel; }
}

您可以通过对话框的xaml.cs中的以下代码配置对话框的数据上下文

public SketchDetailPage()
{
    this.InitializeComponent();
    this.DataContext = new SketchDetailPageViewModel() { ImageUri= "ms-appx:///Assets/Image.png" };
}

如果将图像源放在ViewModel中。比如,

 private string _imgContent= "ms-appx:///Assets/Image.png";
 public string ImageUri
 {
     get { return _imgContent; }
     set
     {
         _imgContent = value;
         OnPropertyChanged(nameof(ImageUri));
     }
 }

然后可以在“内容的XAML”对话框中设置页面数据上下文

<ContentDialog
    ...
    Background="White" Width="750" Height="500">
    <ContentDialog.DataContext>
        <local:SketchDetailPageViewModel/>
    </ContentDialog.DataContext>

    <RelativePanel>
        <ScrollViewer  x:Name="scrollView" ZoomMode="Enabled"
                       DoubleTapped="ScrollViewer_DoubleTapped"
                       HorizontalScrollBarVisibility="Visible" 
                       HorizontalScrollMode="Enabled" 
                       MinZoomFactor="1">
            <StackPanel Background="White" Width="750" Height="500">
                <Image Name="imgSketch" Source="{Binding ImageUri}"/>
            </StackPanel>
        </ScrollViewer>
    </RelativePanel>
</ContentDialog>

------更新------

但是绑定图像uri没有改变，尽管源的图像uri改变了

如果要通过更改图像uri来更改图像，可以将对话框的数据上下文公开为以下代码，同时，SketchDetailPageViewModel应实现INotifyPropertyChanged接口。看来你已经实现了这个接口，下面是一个简单的例子

SketchDetailPageViewModel类

internal class SketchDetailPageViewModel : INotifyPropertyChanged
{
    private string _imgContent;
    public string ImageUri
    {
        get { return _imgContent; }
        set
        {
            _imgContent = value;
            OnPropertyChanged(nameof(ImageUri));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string name)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }
}

类SketchDetailPage:ContentDialog

public SketchDetailPage()
{
    this.InitializeComponent();
    this.DataContext = new SketchDetailPageViewModel() { ImageUri= "ms-appx:///Assets/Image.png" };
}

internal SketchDetailPageViewModel ViewModel
{
    get { return DataContext as SketchDetailPageViewModel; }
}

您可以在使用

SketchDetailPage

对话框时更改图像

 private async void Button_Click(object sender, RoutedEventArgs e)
 {
     SketchDetailPage dialog = new SketchDetailPage();
     //change the dialog image 
     dialog.ViewModel.ImageUri = "ms-appx:///Assets/StoreLogo.png";
     await dialog.ShowAsync();
 }

---

感谢您的回复，但是绑定映像uri没有改变，尽管源的映像uri改变了。@quynhnguyen68我已经添加了更新部分，您可以检查它。如果它仍然不是您想要的，请提供一个简单的示例并澄清您的问题，以便我们可以在同一点上进行讨论。实际上，在我的ViewModel中，我使用Messenger.Default.Register将ImageUri从另一个发送到此ViewModel。因此，ImageUri在收到消息时必须更改，我已经调试，ViewModel收到了正确的消息并更改了ImageUri，但我不知道为什么内容对话框总是显示从contrustor new SketchDetailPageViewModel（）设置的实例uri{ImageUri=“ms-appx:///Assets/Image.png" };请提供一个简单的例子，以帮助我看到你的项目。正如我所看到的，通过更改viewmodel的ImageUri，它在我这边工作得很好。

public SketchDetailPage()
{
    this.InitializeComponent();
    this.DataContext = new SketchDetailPageViewModel() { ImageUri= "ms-appx:///Assets/Image.png" };
}

internal SketchDetailPageViewModel ViewModel
{
    get { return DataContext as SketchDetailPageViewModel; }
}

 private async void Button_Click(object sender, RoutedEventArgs e)
 {
     SketchDetailPage dialog = new SketchDetailPage();
     //change the dialog image 
     dialog.ViewModel.ImageUri = "ms-appx:///Assets/StoreLogo.png";
     await dialog.ShowAsync();
 }