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

Question

我在 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 的实际宽度和它自己的高度决定。

我正在使用下面的转换器 Class 来获取图像的 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();
    }
}

看起来工作正常。但是图像在加载时是不可见的。拖动主图像或调整其大小后 window 显示图像。

更新这里是UI，我试着建。

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

有什么想法吗？

Answer 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>

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

Images that dynamically loaded from web url are invisible at load

c#

wpf

image

bitmapimage

gridpanel