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

【问题标题】：Images that dynamically loaded from web url are invisible at load从 web url 动态加载的图像在加载时不可见
【发布时间】：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 中，使其双向拉伸。

标签： c# wpf image bitmapimage gridpanel

【解决方案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>

【讨论】：