C# 如何在加载原始源图像之前显示默认图像

在

XAML

中，我在

ItemControl

DataTemplate

中有下面一行。Source

pic

已从c#绑定到图像。但是pic的加载需要一些时间。在此之前，我希望显示一些默认图像并加载该xaml文件中的其他UI元素

<Image Grid.Row="0" Source="{Binding pic}" Stretch="Fill"  />

如何显示默认图像，直到从pic URL（URL到服务器）加载原始pic，并在从URL加载pic后将其替换为加载的图像

Peter的解决方案是可行的，但问题是我的应用程序在显示服务器url中的图像之前挂起了大约10秒钟。下面提到的代码

<ItemsControl x:Name="StoreCards" Margin="20" 
                      HorizontalAlignment="Center" VerticalAlignment="Top"
                      Grid.Row="2" AlternationCount="100000" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
  <Button BorderBrush="Black" Background="White" BorderThickness="0.2" Margin="10" Click="Card_Click">
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Rectangle Fill="Red" Stretch="UniformToFill"/>
                            <Image x:Name="BannerImage" Stretch="UniformToFill">
                                <Image.Source>
                                    <BitmapImage UriSource="{Binding pic, IsAsync="True"}"/>
                                </Image.Source>
                            </Image>
                     </Grid>
        </Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel ItemHeight="200" ItemWidth="300"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

---

谢谢

这并不漂亮，但这是最简单的方法

假设占位符图像是一个

矩形

。 这就是解决方案：

<Grid>
    <Rectangle Fill="Red" 
        Width="40"
        Height="40"
        />
    <Image 
        Stretch="Fill"
        Height="40"
        Width="40"
        Source="{Binding Path=pic, IsAsync=True}"
        />
</Grid>

---

当然，它将有2个图像的开销，但这样做很容易

请看，您可能会使用xaml中的某些触发器来显示其他内容，直到加载图像（或使用图像）。这是DataTemplate中的图像列表。我将列表附加到ItemSource，其中包含pic作为一个键，其值为image link。然后，您应该绑定到一个ImageLoader类，该类将包含DefaultImage属性、加载的布尔属性和ServerImage属性。使用触发器，您可以将DefaultImage可见性绑定到Loaded属性，然后在viewmodel中将Loaded属性更改为true，一旦从服务器加载映像，触发器将隐藏DefaultImage并显示ServerImage。映像是从URI加载的，还是下载后创建ImageSource？在后一种情况下，您可能会使用PriorityBinding。

Source=“{Binding pic}”

这里我将pic绑定到服务器URI。它是从URI加载的。这是有效的，但问题是我的应用程序在显示下载的图像之前挂起大约10秒。这是您的实现问题。您应该使用asnyc等待模式。我用

Source=“{Binding Path=pic，IsAsync=True}”

在您的解决方案中有IsAsync=True。我使用sameProvide代码来加载图像匹配。。。我假设您在ui线程中加载它。当然，一切都会冻结或启动需要很长时间