C# 如何在windows应用商店应用程序中将延迟加载应用于bing ListView？

我正在开发Windows应用商店应用程序的销售应用程序。我想为我的产品模块应用延迟加载

当产品页面打开时，它从后端获取产品并显示在列表框控件中。 每次加载都需要时间。我认为主要原因是当我检查给定url上是否存在图像时

这是我的代码和类：

private async Task getAllProductDetails()
{
    var resultproductlist = await client.PostAsync(session.Values["URL"] + "/magemobpos/product/getProductList", contents);
    if (resultproductlist.IsSuccessStatusCode)
    {
        string trys = resultproductlist.Content.ReadAsStringAsync().Result;
        List<Productlistdata> objProducts = JsonConvert.DeserializeObject<ProductlistResponse>(trys).productlistdata;
        Productlistdata Product;

        //all product are in objProducts
        foreach (var item in objProducts)
        {
            bool imageexist = false;
            //check if image exist on given url or not
            try
            {
                HttpWebRequest request = (HttpWebRequest)WebRequest.Create(new Uri(item.image.ToString()));
                using (var response = (HttpWebResponse)(await Task<WebResponse>.Factory.FromAsync(request.BeginGetResponse, request.EndGetResponse, null)))
                {

                    int imagelength = Convert.ToInt32(response.ContentLength);
                    if (imagelength > 0)
                        imageexist = true;
                    else
                        imageexist = false;
                }
            }
            catch (Exception)
            {
                imageexist = false;
            }

            //if image not exist, it get default image
            if (item.image.ToString().ToLower().Equals("n/a") || imageexist == false)
            {
                item.image = "Images/NoDataImages/ico-no-orders.png";
            }

            Product = new Productlistdata()
            {
                image = item.image,
                name = item.name,
                price = item.price,
                sku = item.sku,
                type = item.type[0],
                id = item.id
            };
            //add all product in lstProduct. lstProduct is ListBox Control
            lstProduct.Items.Add(Product);      
        }
    }
}

---

有人能建议我如何应用延迟加载吗？我不知道确切情况，但我认为它可以在加载列表后应用于绑定图像。

我建议更改您的查询

首先，不使用getAllProductDetails，而是使用getAllProductID 那么你在哪里

        var resultproductlist = await client.PostAsync(session.Values["URL"] + "/magemobpos/product/getProductList", contents);
        if (resultproductlist.IsSuccessStatusCode)
        {
            string trys = resultproductlist.Content.ReadAsStringAsync().Result;
            List<Productlistdata> objProducts = JsonConvert.DeserializeObject<ProductlistResponse>(trys).productlistdata;
            Productlistdata Product;

---

注意：延迟加载将增加总的加载时间，优点是它不是一个巨大的时间块，而是几个较小的时间块，我建议更改您的查询

首先，不使用getAllProductDetails，而是使用getAllProductID 那么你在哪里

        var resultproductlist = await client.PostAsync(session.Values["URL"] + "/magemobpos/product/getProductList", contents);
        if (resultproductlist.IsSuccessStatusCode)
        {
            string trys = resultproductlist.Content.ReadAsStringAsync().Result;
            List<Productlistdata> objProducts = JsonConvert.DeserializeObject<ProductlistResponse>(trys).productlistdata;
            Productlistdata Product;

---

注意：延迟加载将增加总体加载时间，优点是它不是一个巨大的时间块，而是几个较小的时间块，我建议使用转换器提供占位符

---

您还可以使用IsAsync=True装饰Image.Source绑定-这样主线程就不会被阻塞

我建议使用转换器提供占位符

---

您还可以使用IsAsync=True装饰Image.Source绑定-这样主线程就不会被阻止

您可以使用ImageFailed事件分配图像占位符

foreach (var item in objProducts)
{
var bitmap = new BitmapImage();
bitmap.ImageFailed += (s, e) => bitmap.UriSource = defaultImageUri;
bitmap.UriSource = new Uri(item.image);
item.Add(bitmap);
//set decodepixelwidth and dicodepixelheight correctly to avoid outofmemory exception
}

---

您可以使用ImageFailed事件分配图像占位符

foreach (var item in objProducts)
{
var bitmap = new BitmapImage();
bitmap.ImageFailed += (s, e) => bitmap.UriSource = defaultImageUri;
bitmap.UriSource = new Uri(item.image);
item.Add(bitmap);
//set decodepixelwidth and dicodepixelheight correctly to avoid outofmemory exception
}

---

我知道你不会要求它，但我强烈建议你去调查，我相信它会帮助你思考你正在努力建设的东西。因此，我将首先使用绑定更改一些代码，然后转到真正的解决方案

以下是您可以尝试和执行的操作：

首先删除此代码：

bool imageexist = false;
        //check if image exist on given url or not
        try
        {
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(new Uri(item.image.ToString()));
            using (var response = (HttpWebResponse)(await Task<WebResponse>.Factory.FromAsync(request.BeginGetResponse, request.EndGetResponse, null)))
            {

                int imagelength = Convert.ToInt32(response.ContentLength);
                if (imagelength > 0)
                    imageexist = true;
                else
                    imageexist = false;
            }
        }
        catch (Exception)
        {
            imageexist = false;
        }

现在在page.xaml.cs顶部添加一个ObservableCollection

private ObservableCollection<Productlistdata> productlist = new ObservableCollection<Productlistdata>();

    public ObservableCollection<Productlistdata> Productlist
    {
        get { return productlist ?? (productlist= new ObservableCollection<Productlistdata>()); }
        set { productlist= value; }
    }

这样，Productlist就绑定到您的列表框中，当您添加或删除项目时，它将自动更新

现在你可以跳过上面的所有内容，但我建议你仔细研究一下，当你意识到它们是有效的时，它会解决你的许多问题

现在，我们将在ProductListdata中添加我们删除的第一个代码

public class Productlistdata
{
    public string id { get; set; }
    public string sku { get; set; }
    public string name { get; set; }
    public string status { get; set; }
    public string qty { get; set; }
    public string price { get; set; }
    public string image { get; set; }
    public string type { get; set; }
    public string full_productname { get; set; }

    public async void CheckImage()
    {
        bool imageexist = false;
        try
        {
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(new Uri(image));
            using (var response = (HttpWebResponse)(await Task<WebResponse>.Factory.FromAsync(request.BeginGetResponse, request.EndGetResponse, null)))
            {

                int imagelength = Convert.ToInt32(response.ContentLength);
                if (imagelength > 0)
                    imageexist = true;
                else
                    imageexist = false;
            }
        }
        catch (Exception)
        {
            imageexist = false;
        }
        if (!imageexist)
        {
            image = "Images/NoDataImages/ico-no-orders.png";
        }
    }
}

公共类Productlistdata
{
公共字符串id{get；set；}
公共字符串sku{get；set；}
公共字符串名称{get；set；}
公共字符串状态{get；set；}
公共字符串数量{get；set；}
公共字符串price{get；set；}
公共字符串图像{get；set；}
公共字符串类型{get；set；}
公共字符串完整\u productname{get；set；}
公共异步void CheckImage（）
{
bool-imageexist=false；
尝试
{
HttpWebRequest请求=（HttpWebRequest）WebRequest.Create（新Uri（图像））；
使用（var response=（HttpWebResponse）（wait Task.Factory.fromsync（request.BeginGetResponse，request.EndGetResponse，null）））
{
int imagelength=Convert.ToInt32（response.ContentLength）；
如果（图像长度>0）
imageexist=true；
其他的
imageexist=false；
}
}
捕获（例外）
{
imageexist=false；
}
如果（！imageexist）
{
image=“Images/NoDataImages/ico no orders.png”；
}
}
}

并填充您的列表

private async Task getAllProductDetails()
    {
        var resultproductlist = await client.PostAsync(session.Values["URL"] + "/magemobpos/product/getProductList", contents);
        if (resultproductlist.IsSuccessStatusCode)
        {
            string trys = resultproductlist.Content.ReadAsStringAsync().Result;
            List<Productlistdata> objProducts = JsonConvert.DeserializeObject<ProductlistResponse>(trys).productlistdata;


            //all product are in objProducts
            foreach (var item in objProducts)
            {
                Productlistdata Product = new Productlistdata()
                {
                    image = item.image,
                    name = item.name,
                    price = item.price,
                    sku = item.sku,
                    type = item.type[0],
                    id = item.id
                };
                Product.CheckImage();
                Productlist.Add(Product);
            }
        }
    }

private异步任务getAllProductDetails（）
{
var resultproductlist=wait client.PostAsync（session.Values[“URL”]+“/magemobpos/product/getProductList”，contents）；
if（resultproductlist.IsSuccessStatusCode）
{
字符串trys=resultproductlist.Content.ReadAsStringAsync（）.Result；
List objProducts=JsonConvert.DeserializeObject（trys.productlistdata）；
//所有产品都在OBJP产品中
foreach（objProducts中的var项）
{
Productlistdata产品=新产品ListData（）
{
image=item.image，
name=item.name，
价格=项目价格，
sku=item.sku，
类型=项。类型[0]，
id=item.id
};
Product.CheckImage（）；
Productlist.Add（产品）；
}
}
}

Product.CheckImage（）将不等待。因此，列表中的项目将加载得非常快，因为foreach循环中没有等待任何东西<代码>Product.CheckImage（）稍后将在另一个线程上运行

最后，由于数据加载到ListBoxa后图像可能会发生更改（当图像不存在时），因此必须通知UI某个属性已更改。要做到这一点，您必须使用。你可以在我的另一个答案中看一看如何做到这一点
我知道你不会要求它，但我强烈建议你研究一下，我相信它会帮助你思考你正在努力构建的东西。因此，我将首先使用绑定更改一些代码，然后转到真正的解决方案

以下是您可以尝试和执行的操作：

首先删除此代码：

bool imageexist = false;
        //check if image exist on given url or not
        try
        {
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(new Uri(item.image.ToString()));
            using (var response = (HttpWebResponse)(await Task<WebResponse>.Factory.FromAsync(request.BeginGetResponse, request.EndGetResponse, null)))
            {

                int imagelength = Convert.ToInt32(response.ContentLength);
                if (imagelength > 0)
                    imageexist = true;
                else
                    imageexist = false;
            }
        }
        catch (Exception)
        {
            imageexist = false;
        }

现在在page.xaml.cs顶部添加一个ObservableCollection

private ObservableCollection<Productlistdata> productlist = new ObservableCollection<Productlistdata>();

    public ObservableCollection<Productlistdata> Productlist
    {
        get { return productlist ?? (productlist= new ObservableCollection<Productlistdata>()); }
        set { productlist= value; }
    }

这样，Productlist就绑定到您的列表框中，当您添加或删除项目时，它将自动更新

现在你可以跳过上面的所有内容，但我建议你仔细研究一下，当你意识到它们是有效的时，它会解决你的许多问题

现在，我们将在ProductListdata中添加我们删除的第一个代码

public class Productlistdata
{
    public string id { get; set; }
    public string sku { get; set; }
    public string name { get; set; }
    public string status { get; set; }
    public string qty { get; set; }
    public string price { get; set; }
    public string image { get; set; }
    public string type { get; set; }
    public string full_productname { get; set; }

    public async void CheckImage()
    {
        bool imageexist = false;
        try
        {
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(new Uri(image));
            using (var response = (HttpWebResponse)(await Task<WebResponse>.Factory.FromAsync(request.BeginGetResponse, request.EndGetResponse, null)))
            {

                int imagelength = Convert.ToInt32(response.ContentLength);
                if (imagelength > 0)
                    imageexist = true;
                else
                    imageexist = false;
            }
        }
        catch (Exception)
        {
            imageexist = false;
        }
        if (!imageexist)
        {
            image = "Images/NoDataImages/ico-no-orders.png";
        }
    }
}

公共类Productlistdata
{
公共字符串id{get；set；}
公共字符串sku{get；set；}
公共字符串名称{get；set；}
公共字符串状态{get；set；}
公共字符串数量{get；set；}
公共字符串price{get；set；}
公共字符串图像{get；set；}
public class Productlistdata
{
    public string id { get; set; }
    public string sku { get; set; }
    public string name { get; set; }
    public string status { get; set; }
    public string qty { get; set; }
    public string price { get; set; }
    public string image { get; set; }
    public string type { get; set; }
    public string full_productname { get; set; }

    public async void CheckImage()
    {
        bool imageexist = false;
        try
        {
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(new Uri(image));
            using (var response = (HttpWebResponse)(await Task<WebResponse>.Factory.FromAsync(request.BeginGetResponse, request.EndGetResponse, null)))
            {

                int imagelength = Convert.ToInt32(response.ContentLength);
                if (imagelength > 0)
                    imageexist = true;
                else
                    imageexist = false;
            }
        }
        catch (Exception)
        {
            imageexist = false;
        }
        if (!imageexist)
        {
            image = "Images/NoDataImages/ico-no-orders.png";
        }
    }
}

private async Task getAllProductDetails()
    {
        var resultproductlist = await client.PostAsync(session.Values["URL"] + "/magemobpos/product/getProductList", contents);
        if (resultproductlist.IsSuccessStatusCode)
        {
            string trys = resultproductlist.Content.ReadAsStringAsync().Result;
            List<Productlistdata> objProducts = JsonConvert.DeserializeObject<ProductlistResponse>(trys).productlistdata;


            //all product are in objProducts
            foreach (var item in objProducts)
            {
                Productlistdata Product = new Productlistdata()
                {
                    image = item.image,
                    name = item.name,
                    price = item.price,
                    sku = item.sku,
                    type = item.type[0],
                    id = item.id
                };
                Product.CheckImage();
                Productlist.Add(Product);
            }
        }
    }