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

Posted 2021-04-05

我将图像放在内容对话框中，但我看不到从源获取的任何图像。似乎图像源无法从视图模型进行绑定。但它适用于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>

我已经在我的xaml.cs中将ViewModel添加到DataContext

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

    public SketchDetailPage()
    {
        this.InitializeComponent();
    }

我把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>

或者您可以在xaml.cs中设置数据上下文，

public SketchDetailPage()
{
    this.InitializeComponent();
    this.DataContext = new SketchDetailPageViewModel();
}

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

但是虽然图像uri的源变化，但是绑定图像uri不会改变

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

草图详细信息页面视图模型类，

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));
        }
    }
}

class 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();
 }