DevExpress GridControl 关于使用CardView的一点小结

时间:2021-03-22 13:34:55

最近项目里需要显示商品的一系列图片,打算用CardView来显示,由于第一次使用,遇到许多问题,发现网上这方面的资源很少,所以把自己的一点点实际经验小结一下,供自己和大家以后参考。

1、选择CardView,将原来的GirView转换为CardView,如下图

DevExpress GridControl 关于使用CardView的一点小结DevExpress GridControl 关于使用CardView的一点小结

效果如下:

DevExpress GridControl 关于使用CardView的一点小结DevExpress GridControl 关于使用CardView的一点小结

2、控件默认是纵向排列,如果要改成横向排列,改变属性MaximumCardColumns(允许横向排列的卡片数量)和MaximumCardRows(允许纵向排列的卡片行数)。

我这里设置为:MaximumCardColumns:-1、MaximumCardRows:1,效果如下图;

DevExpress GridControl 关于使用CardView的一点小结DevExpress GridControl 关于使用CardView的一点小结

3、要用到卡片,大多数情况是要展示图片用的。如何展示呢?添加一个存储图片的对象(我这里是直接在数据源中添加Image类型的字段),然后更改该字段的ColumnEdit的类型为PictureEdit,并命名为rowPicture,如下图

DevExpress GridControl 关于使用CardView的一点小结DevExpress GridControl 关于使用CardView的一点小结

DevExpress GridControl 关于使用CardView的一点小结

4、又发现图片的大小被限制了,改变CardView(卡片高度自适应,以适应图片的高度)和rowPicture(设置图片的高度)两个地方的属性即可,如图

CardView:DevExpress GridControl 关于使用CardView的一点小结DevExpress GridControl 关于使用CardView的一点小结

rowPicture:DevExpress GridControl 关于使用CardView的一点小结

DevExpress GridControl 关于使用CardView的一点小结

效果如下图:

DevExpress GridControl 关于使用CardView的一点小结

DevExpress GridControl 关于使用CardView的一点小结

5、布局问题解决了,其他需要调整的,其实属性里都有,这里只是演示。如何根据URL将图片下载下来显示,这里贴出主要代码:

var client = new WebClient();
                client.DownloadDataCompleted += client_DownloadDataCompleted;
                client.DownloadDataAsync(new Uri(img.Url));

private void client_DownloadDataCompleted(object sender, DownloadDataCompletedEventArgs e)
        {
            try
            {

Image img = Image.FromStream(new MemoryStream(e.Result));

······                
            }
            catch (Exception ex)
            {

······
            }
        }

到这就差不多解决问题了,提示下,注意将图片缓存,以提高性能。

---------------------

本文来自 程序猿成长日记 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/yang472024191/article/details/40536327?utm_source=copy