Question

在XAML我ItemControl DataTemplate下面有一行。源pic从c＃绑定到Image。但是加载pic需要一些时间。然后我想显示一些默认图像并加载该xaml文件中的其他UI元素。

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

如何显示默认图像，直到从图片URL（网址到服务器）加载原始图片，并在完成从网址加载图片后用加载的图片替换它？

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>

谢谢

Answer 1

这不是很美，但这是最简单的方法。

让我们假设您的占位符图片是Rectangle。这是解决方案：

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

当然它会产生2张图像的开销，但这种方式很容易！

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

1 个答案: