Question

在Android中，在imageview中设置图像占位符以进行开发非常容易。

所有人都会在开发过程中使用android:src作为占位符图片，这样您就可以在布局设计预览中看到它，并将实际图像放入<ImageView android:layout_width="28dp" android:layout_height="28dp" android:src=@drawable/activated_icon" tools:src="@mipmap/white_activated_icon" /> 。通常，你没有设置android：src put会在你将应用程序连接到网络时用你从网上下载的图像填充该imageview：

<Image Source="http://lorempixel.com/1920/1080/nature/3" />

在Xamarin中，您可以显示图像：

tools:src

应用程序连接后，图像将从Internet下载并显示。如何为开发目的添加占位符图像（类似于在android中通过<FrameworkElement x:Name="dummyElement" Visibility="Collapsed"/> <DataGrid Grid.Row="1" AutoGenerateColumns="False" ItemsSource="{Binding ChannelCombinations}" CanUserAddRows="True"> <DataGrid.Columns> <DataGridTextColumn Header="Channel" Binding="{Binding ChannelCombinationName}"/> <DataGridComboBoxColumn Header="DetectionChemistry" ItemsSource="{Binding Converter={StaticResource displayEnumNameConverter},Source={x:Reference dummyElement} }" SelectedValueBinding="{Binding SelectedDetectionChemistry, Converter={StaticResource enumValueConverter}}" /> <DataGridTextColumn Header="DetectionChemistry" Binding="{Binding SelectedDetectionChemistry, Converter={StaticResource enumValueConverter}}"/> </DataGrid.Columns> </DataGrid>执行的方式）所以我可以在布局设计预览中看到它？

Answer 1

我假设你希望用Xamarin Forms实现这一点，就像你在问题标题中提到XAML一样。

或者您可能指的是Xamarin Forms Previewer？在这种情况下，请忽略以下答案。据我所知，您只能在预览器中使用本地图像。

如果问题与运行时Xamarin表单相关，请回答

在Xamarin Forms中没有标准选项。请查看来自this example的Stephane Delcroix建议的Xamarin Forums。这种方法的重要部分是在网格中将2个图像堆叠在一起。 1是占位符，位于正在加载的图像下方，如下所示：

var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition());

grid.Children.Add (image);
grid.Children.Add (placeholderImage);

作为替代选项，Xamarin Forms Labs的WebImage允许DefaultImage的选项，但我不确定是否立即显示。有关Web Image的代码，请参阅this class。请记住，Xamarin Forms Labs不再受到维护。

当然，您也可以编写自定义渲染器。也许基于Xamarin Forms Labs示例。

Answer 2

我对此案例使用FFImageLoading。只需安装Nuget包并在XAML中使用“CachedImage”。

<ff:CachedImage Source="your url" Placeholder="placeholder while loading"/>

您无需手动下载（和缓存）图像。下载完成后会自动显示。您可以使用本地文件（来自Resources或Drawable）和来自HTTP / HTTPS的文件。

Xamarin：如何在XAML中的Image元素中设置占位符图像？

2 个答案: