Question

我正在使用xaml和c＃开发一个UWP项目。我在右侧有一个图像堆叠面板，您可以在其中单击图像，它将在堆叠面板的左侧显示相关的较大图像。

大图像最初设置为与加载页面时堆栈面板中第一个“小”图像相关的“大”图像，但是当您单击堆叠面板中的任何其他小图像时，大图像会没有更新。

整个事情是放置在弹出窗口内的数据模板。 “大”图像的相关xaml在这里：

<Border Background="White" Grid.Row="2">
    <Image Stretch="Uniform">
        <Image.Source>
            <BitmapImage UriSource="{Binding SelectedImage}" />
        </Image.Source>
    </Image>
</Border>

单击小图像时，会触发该图像的“tapped”方法，该方法为：

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    var img = ((Windows.UI.Xaml.Controls.Image)sender).DataContext as obj
    img.FlyoutContent.SelectedImage = new Uri(img.relatedPath);
}

我使用上面的代码初始设置图像并且它可以工作。单击小图像时，它不会更改大图像。

在调试中，当我点击stackpanel中的小图片时，我打破了“图像点击”方法，我可以看到uri正在正确更新并且没有绑定错误。用户界面永远不会改变。

我错过了什么？

谢谢你，扎克

*旁注：“obj”只是自定义类的组成名称。

Answer 1

对于Binding属性，您需要实现INotifyPropertyChanged类，以便自动更新UI。

class CustomClass : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    private string _imageLink;
    public string ImageLink
    {
        get
        {
            return _imageLink;
        }
        set
        {
            _imageLink = value;
            RaisePropertyChanged();
        }
    }

    private void RaisePropertyChanged([CallerMemberName] string name = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }

}

或者当您使用Tapped事件时，为什么不给您的XAML元素x:name并将该名称的图像来源设置为URi。

要更新ImageLink属性，您需要在要更改属性的页面中创建CustomClass的实例。

CustomClass ab = new CustomClass();

ab.ImageLink = "code here";

如何确保UI在点击时更新到正确的图像？

1 个答案: