从 web url 动态加载的图像在加载时不可见

Posted 2023-02-26

【中文标题】从 web url 动态加载的图像在加载时不可见

【英文标题】：Images that dynamically loaded from web url are invisible at load

【发布时间】：2015-07-01 12:41:06

【问题描述】：

我在 ItemsControl 的 DataTemplate 中使用动态加载的图像作为网格元素的背景

<ItemsControl Name="Category_Items" HorizontalContentAlignment="Stretch">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Margin="10" Name="WrapPanel" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid Cursor="Hand" Margin="4,0,4,8" Width="Binding Converter=StaticResource PercentageConverter, ElementName=WrapPanel, Path=ActualWidth, ConverterParameter='0,25'"
                                                           Height="Binding Converter=StaticResource PercentageConverter, Path=ActualWidth, RelativeSource=RelativeSource Self,ConverterParameter='0,6'">
                    <Grid.Background>
                        <ImageBrush ImageSource="Binding Logo, Converter=StaticResource ImageConverter" />
                    </Grid.Background>
                    <TextBlock Text="Binding Name" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,0,5"/>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

如您所见，我的网格元素的宽度和高度属性是由 WrapPanel 的实际宽度和它自己的高度决定的。

我正在使用下面的转换器类来获取图像的 uri 并从网络加载它。

public class ImageConverter : IValueConverter

    public object Convert(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    

        BitmapImage image = new BitmapImage();
        image.BeginInit();
        image.UriSource = new Uri(value as string, UriKind.Absolute);
        image.CacheOption = BitmapCacheOption.None;
        image.EndInit();
        return image;
    

    public object ConvertBack(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    
        throw new NotImplementedException();
    

看起来工作正常。但是图像在加载时是不可见的。拖动或调整主窗口大小后，使图像出现。

更新 这是 UI，我尝试构建。

我尝试在加载后刷新用户控件。但它没有帮助。

有什么想法吗？

【问题讨论】：

你不需要那个转换器。 WPF 内置了从 Uri 和字符串到 ImageSource 的自动类型转换。

您能否添加一些有关您尝试实现的布局的详细信息？将 DataTemplate 中的 Grid 维度绑定到 ItemTemplate 的一小部分维度看起来很奇怪。

@Clemens，你是对的。我将 ImageSource 属性更改为“Binding Logo”，但问题仍然存在。

@Clemens，我用我尝试构建的 UI 图像更新了我的问题。

我建议删除 DataTemplate 中的 Width 和 Height 绑定，并用 UniformGrid 替换 WrapPanel。 UniformGrid 允许您指定固定数量的行或列。然后，您可以将 ItemsControl 放在 Grid 中，使其双向拉伸。

【参考方案1】：

经过几个小时的挣扎，我放弃了将图像用作网格的背景。相反，我使用了 Image Element，一切正常。

<ItemsControl Name="Category_Items" HorizontalContentAlignment="Stretch">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Margin="10" Name="WrapPanel" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid ClipToBounds="True" Cursor="Hand" Margin="4,0,4,8" Width="Binding Converter=StaticResource PercentageConverter, ElementName=WrapPanel, Path=ActualWidth, ConverterParameter='0,333'"
                                                           Height="Binding Converter=StaticResource PercentageConverter, Path=ActualWidth, RelativeSource=RelativeSource Self,ConverterParameter='0,6'">
                    <Image Source="Binding Logo, IsAsync=True" Stretch="UniformToFill" />
                    <lib:TextPath Text="Binding Name" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="5,0,0,5" FontSize="22" Fill="White" Stroke="Black" FontWeight="Bold"/>                        
                    <Grid.InputBindings>
                        <MouseBinding MouseAction="LeftClick" Command="Binding GetCompanies" CommandParameter="Binding Id"></MouseBinding>
                    </Grid.InputBindings>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>