UWP - 在仍然加载时在 gridview 图像绑定上显示占位符

Question

我在 gridview 上有一个图像绑定，下面是 XAML：

<Border x:Name="coverBox" Grid.Row="0" Margin="5,10,0,0" Width="230" Height="170" VerticalAlignment="Top" HorizontalAlignment="Left" BorderBrush="Gray" BorderThickness="1" Background="{x:Null}">
                                <Image x:Name="cover" Source="{Binding Thumbnail}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Title}" Width="230" Height="170"/>
</Border>

代码：

string urlPath1 = "http://..../API/sekolah";
                            var httpClient1 = new HttpClient(new HttpClientHandler());

                            var values1 = new List<KeyValuePair<string, string>>
                            {
                                new KeyValuePair<string, string>("api_key", "...."),
                                new KeyValuePair<string, string>("limit", limit++.ToString()),
                                new KeyValuePair<string, string>("hal", noHal++.ToString())
                            };

                            var response1 = await httpClient1.PostAsync(urlPath1, new FormUrlEncodedContent(values1));
                            response1.EnsureSuccessStatusCode();

                            if (!response1.IsSuccessStatusCode)
                            {
                                busyIndicator.IsActive = false;
                                RequestException();
                            }
                            string jsonText1 = await response1.Content.ReadAsStringAsync();
                            JsonObject jsonObject1 = JsonObject.Parse(jsonText1);
                            JsonArray jsonData1 = jsonObject1["data"].GetArray();

                            foreach (JsonValue groupValue1 in jsonData1)
                            {
                                JsonObject groupObject2 = groupValue1.GetObject();
                                string thumbnail = groupObject2.ContainsKey("thumbnail") && groupObject2["thumbnail"] != null ? groupObject2["thumbnail"].GetString() : string.Empty;

                                ListingClass file1 = new ListingClass();
                                file1.Thumbnail = thumbnail;

                                listingDatasourceDetail.Add(file1);
                            }
                            listingGridView.ItemsSource = listingDatasourceDetail;

我想在加载的同时从 JSON 中获取图像数据，然后首先显示 paceholder images/SEKOLAH-place-holder-600.png

如何在加载时添加占位符？

Answer 1

将您的cover 图像包装在一个网格中，然后创建另一个图像以显示占位符 png 并将其放在cover 后面。

Answer 2

尝试将Loading 事件添加到图像：

    private void myimage_Loading(FrameworkElement sender, object args)
        {
            Image myimage = (Image)sender;
            myimage.Source = new BitmapImage(new Uri("ms-appx:///images/SEKOLAH-place-holder-600.png"));
        }