以编程方式设置的图像在运行时不显示

Question

我正在为 DataTemplate 创建一个自定义 UserControl，它接受元数据对象并将 FilePath 分配给图像（这些路径由用户在运行时定义）。然而，尽管没有抛出错误并确保图像的源正确并生成实际文件，但图像在运行时不会出现。我在图像周围添加了边框，边框显示出来，但图像没有显示。

这是 UserControl 的 XAML 代码：

<Border x:Name="Outline"
        BorderThickness="1"
        BorderBrush="Red">
    <Grid>
        <Image x:Name="DisplayImage"/>
        <MediaElement x:Name="DisplayVideo"/>
    </Grid>
</Border>

以及设置图像源的代码：

public MediaContainer() {
    InitializeComponent();
    Loaded += (_, _) => Load();
}

private void Load() {
    Metadata data = (Metadata)DataContext;

    (double height, double width) = Scale(data); // This never returns 0, for either the height or the width

    Outline.Width = width + (Configs.OUTLINE_WIDTH * 2);
    Outline.Height = height + (Configs.OUTLINE_WIDTH * 2);

    Uri uri = new(data.FilePath, UriKind.RelativeOrAbsolute);
    BitmapImage source = new(uri);
    DisplayImage = new() {
        Source = data.FileType == FileType.Gif ? null : source,
        Height = height,
        Width = width
    };

    static (double, double) Scale(Metadata meta) {
        double _height = meta.Height <= 0 ? Configs.HEIGHT : meta.Height;
        double _width = meta.Width <= 0 ? Configs.HEIGHT : meta.Width;

        if (meta.Height != Configs.HEIGHT) {
            double scale = Configs.HEIGHT / meta.Height;
            _height = Configs.HEIGHT;
            _width = meta.Width * scale;
        }

        return new(_height, _width);
    }
}

我尝试手动设置图像和媒体元素的 z-index，但无济于事。那么是什么阻止了它的显示呢？

Answer 1

您不得为

DisplayImage

字段分配新值。相反，设置现有图像控件的属性：

DisplayImage.Source = data.FileType == FileType.Gif ? null : source;
DisplayImage.Height = height;
DisplayImage.Width = width;

您还必须确保 Image 元素位于 MediaElement 之上，或者当显示图像时 MediaElement 不可见，例如通过设置

DisplayVideo.Visibility = Visibility.Collapsed;